Forum Documentation Showcase Pricing Learn more

Pinterest Style Photo Grid

Dynamic Pinterest-style cascading masonry photo grid

This allows you to have a feed that updates dynamically as you or others add to the image content.

The order of the photos will be
1 2 3 4
5 6 7 8
etc.

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:

Side note: if you want your photo grid to update from the top down according to when each content was created (so that when you upload a new photo it’ll show up as item number ‘1’) it’ll be easiest to program the ‘sorted by’ into this hidden repeating group. (Programming: Search for Photos:sorted by Created date, descending “yes”)

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: DON’T FORGET to check the box to collapse the group when hidden. Program it like this:

47%20PM

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.

17%20PM

Here’s the finished product:

And lastly, 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 even be able to come up with something like this:

And finally, here’s what it might look like somewhat normally in your app:

Hope this helps some people out there! Let me know if I missed anything in the tutorial.

15 Likes

nice work! love it :slight_smile:

Levon Terteryan
Founder @ Zeroqode & Bubblewits

let’s stay in touch on twitter!

zeroqode-for-web-160x120

Bubble Templates
Bubble Plugins
Bubble Courses
Convert Web to iOS & Android
No-code Development Services

1 Like

@jrowley343 Awesome tutorial! Thank you! :slight_smile:

Great work and thanks for sharing!

Awesome, this was the best workaround for the “pinterest grid”. But I’m having some trouble with the conditional you suggested on your 4º step “-1 <- modulo -> 4 is not 0”. My columns are behaving like if they were the same columns, and not complementary. Any suggestions?

I’d recommend going through and making sure you have done each step correctly. If they are showing up as the same column with the same photos in each, it sounds to me like maybe you need to program each individual repeating group to start with item #1 for the first, 2 for the second, etc. Does that help?

This looks fantastic!

How does it handle responsive?

we have just published a plugin that would simplify implementing Pinterest Style Grids

1 Like

Yeah, that’s a great service to save and organize your own photo collection. As for me it’s so precious, it holds memories of the most important moments of my life like my wedding Dominican Republic photo shoot or my final day in college. Can’t afford to lose that memories.:wink: