I am also giving my vote to that one
Dynamic Masonry Pinterest Style Cascading Grid
I don’t know if they are going to come up with a solution for this anytime soon. But for now, here is a workaround so that you can at least achieve the Masonry/Pinterest type grid you’re looking for. Hopefully this helps!
This allows you to have a feed that updates dynamically as you or others add to the content.
The order of the photos will be
1 2 3 4
5 6 7 8
Note: I’ve placed borders around all the groups I will be dealing with to make it easier to see and work with. You will probably want it to look cleaner from the start.
- Start by placing a repeating group somewhere on the page. Put it anywhere on the page and you can make it very small— it will be hidden so it doesn’t matter. This will do the search for the content you want to fill your grid. This makes it so that the search is only performed once, not a separate time for each column. Program it like this:
- Next, place a repeating group on the page. This will be the first column of your content. Program it as follows:
(note: my layout style for the repeating group is Ext. vertical scrolling)
- Then make a group inside that same repeating group. *Important: check the box to collapse the group when hidden. Program it like this:
You’ll then add a condition to make the column show the photos you want in the right order and not duplicate photos.
Program it like this: Current cell’s index - 1 < modulo > 4 is not 0
Choose “This element is visible” from the menu Select a property to change when true. Make sure to uncheck the box.
- Insert your content into the cell. Make sure the image is programmed like this and that the image is set to Adjust the element height.
- Copy and paste the repeating group to build the rest of your columns.
- Change the programming in each subsequent repeating group. Column one should start with items from #1. Column two should start with items from #2, and so forth.
Here’s the finished product:
And then without all the extra fluff:
Hope this helped someone out there! Let me know if I missed anything in the tutorial.
Amazing tutorial, thanks man!
I gave it a try and it works really well – and it’s really easy to set up. The repeating group somehow still ‘shows’ the empty list items – which is a bit annoying because it causes lots of whitespace at the bottom – but other than that this is a pretty good solution for the time being.
You should be able to eliminate any whitespace between photos. What you’re telling it to do is only to show every fourth item in the list, starting on whichever column you’re on. So there shouldn’t be any empty list items as far as I know. Getting rid of whitespace should be a simple matter of shrinking down the repeating group and the group inside it down to the photo size like this:
And you should come up with something like this:
But if you’re talking about this whitespace that would come up at the end of the list:
I don’t think my solution could fix that problem unfortunately.
Let me know if you can make it work for you. I have been thinking about posting this as a showcase on the forum, do you feel that would be helpful to people?
Ah yeah, whoops, shrinking the image group fixes it.
Sure, I think it would be good to create a separate showcase item for this. I think having a ‘Pinterest style grid’ was asked here before and this seems like a great solution.
I grappled with this issue for a long time. Glad to see you found a solution @jrowley343 Great effort.
Thanks for posting this. This is a frequent problem for me too, and I will likely move my project off Bubble due to the limitation. Dynamic tag clusters, link groups, and button groups are my biggest pain points—not so much the masonry grids. That said, I’m really impressed with how far I got using only visual programming so kudos to the Bubble team.
This is strange… I have variable height repeating groups in my app. I’ve pre placed all the text content I could possibly want to see in a cell (it’s important that it doesn’t overlap) and am hiding any of the content that shouldn’t appear in a particular cell - setting the element’s height to collapse when hidden. That automatically changes the height of a cell in my app… Now I just wish I could make the cell clickable without having to put an invisible button over the whole cell (which sadly doesn’t resize with the cell height)
@zelus_pudding an alternative to using a transparent button is to place all of the cell contents in a group, and then make that group clickable. That way everything should resize since no elements are overlapping.
I have asked about this before… and about centering RGs. Bubble has said they would put this on their horizon but i dunno how long till it gets resolved. It is a huge hole in bubbles excellent platform!
I recently figured out how to change the width of the RG
That’s exactly what I thought @fayewatson!.. but those groups didn’t resize for some reason I also tried with shapes to no avail. In the end I’m just making the text content clickable and changing it’s background. Doesn’t look as good as what I originally wanted but it’ll work for now.
Ohh! That’s odd it’s not resizing! If you’d like to PM me a link to your app editor, I’d be happy to take a look!
Hey. How can I achieve the same thing but instead of images I want to do it with text? Will it work if using the same steps?(I guess I will give it a try). I have columns of text of random size and bubble aligns them all leaving the shorter ones with a lot of free space. And some of my columns are super tall while others can be super short and this leaves even more space than shown in the picture.
UPDATE: It actually works. Tho the last columns still have some space but it works
Interesting topic, can some please explain how the formula above works? I know it used to get item 1,5,etc in first column and 2,6 in the second column but how…
Hey @FJP ,
< modulo > returns the remainder portion of division. So if a modulo operation is zero, that means the first number (current cell index - 1 ) is a multiple of the second number ( 4 ). Or in the example you use, if modulo does NOT return zero, then it is NOT divisible by 4.
It is a way to perform operations on periodic rows.
It doesn’t solve all the ‘requests’ in this thread, but @levon just released a Pinterest Style Grid plugin. Haven’t tried it yet – but it looks nice a nice plugin!
TO RE-ORDER CONTENT SO NEWEST DISPLAYS FIRST
*Following the directions of @jrowley343’s above tutorial *
Sort the “HiddenRepeatingGroup” by Creation Date > Descending = “yes”
How did you achieve what you intended here?
Magnificent work, congratulations! Maybe I am quite late in this, as it was in 2018. Come on, I have a problem with the positioning of the images. I’ll put the link.
In fact, there is a strange spacing between the images. What could be wrong?
Thank you very much in advance.