I’m building a calendar for scheduling of social media posts.
I like the design and functionality of the Canva content scheduler, so I trying to create something that works much the same.
I have the calendar made, now I need display the thumbnails of each social media post.
But I’m not sure how to go about it… if you can give me an idea of how to implement this I would be very grateful.
Below is a description of what I’m trying to achieve with screenshots taken from Canva to help explain.
The design:
When there is enough room (only one or two social posts) the thumbnail should display large size. But when there are many social posts the thumbnails should shrink down. If there are so many thumbnails that it won’t fit even after shrinking down, it should display a clickable count of the remaining unseen thumbnails.
As the width of the page narrows on smaller screens, the thumbnails should stack. If there are so many thumbnails that it won’t fit even after shrinking down and stacking, it should display a clickable count of the remaining unseen thumbnails. The count goes higher the more you shrink the screen because there are more unseen social posts.
Finally, if you click the count it makes the cell taller and displays all the social posts.
How hard would this be to make in Bubble? Can you give me guidance so I have a starting point?
Obviously would use repeating group for the thumbnails, but I’m not sure how to make it behave like I need with the cells changing size and stacking and creating a clickable count to reveal more.
Completely possible. Just depends how much responsive design aspects you want to dictate how complicated it will be.
Maybe there is a calendar plugin out there that could do it, but I am not sure.
However, you could create your own calendar, using a free plugin called calendar tools
Then create a repeating group for the calendar and in the cell add another repeating group to display the images. Then set up your responsive settings for when the page width is decreased…keep in mind, this will not affect your height, so the calendar height will not be responsive to the page height.
I created a calendar for complete responsiveness
Having it respond to the height of the page adds a lot of complications but you’d most likely want to use the classify plugin to use CSS to get the repeating group cells heights to respond to the page.
I have already created the responsive calendar using Calendar Tool.
I am struggling with how to create a responsive repeating group for the thumbnails. I can’t figure out how to get images to stack and collapse the same as the examples given in Canva.
Any ideas for that specific part? I’m at a loss, so any direction would be helpful.
to show a + and a number of how many other are available you would set up the repeating group to have a group inside of it…the group inside of it would have an image element to show the image and a text element to show the + and number…then you need to put conditionals on them to show or hide dependent upon the number of results and you need to put conditionals onto the repeating group to show a specific number of results or the entire set of results dependent on the conditional.
To get the number of columns to change can be a bit of a challenge, but there is a way
You can check out this editor and check out the settings…it uses features of responsive editor for collapse margins
Thanks that has helped a lot! Has given me the direction I need.
But I’m having a few troubles with implementing the Extended Repeating Group with expanding columns.
Only a single thumbnail loads on page load, and the rest don’t load until you scroll the page a little bit. All of the thumbnails would be visible on page load if they all loaded without this “lazy load” style of loading. Is there anyway to disable that?
I can’t get the images to shrink down to a smaller size because the Extended Repeating Group (with expanding columns turned on) is adding more rows before shrinking the images down to their minimum width.
This is what I’m seeing with lots of images inside the “16th” date cell. The images are too large, they need to shrink down to their minimum width, and therefore create an Extended Repeating Group for the smaller images with less rows and more columns:
Here are the images settings. I want the images to be full sized at 92px and then shrink down to a 40px if there’s too many to fit in the cell. So I gave it a min width of 43% (43% of 92px = 39.56px). The image cell containers have similar settings:
