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.

28 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:

Hi @jrowley343,

Just ran across this two years later, but still had to say thanks! I needed this and it works great!
George

I was very excited when I ran across this. Been trying to use @levon’s plug in to no avail.

However @jrowley343, for some reason I am running into a problem… see below:

Each Column is doing the list, minus one image. But it is not doing

1 2 3 4
5 6 7 8

As you described and showed in your samples.

I’ve double checked my triple checks and can’t find a what I did differently (other than I am not using captions).

Any help is greatly appreciated!! :pray:

what was the issue there? Did you report that to our team?

@levon - as a newb I am going to assume this is an operator problem and not a problem with the plugin… I simply need more guidance on how to make it function. I could not find any documentation - and everything I tried based on my basic understanding produced zero results.

As far as reporting to your team… honestly not sure how to do that… LOL… the slack link on your forum is broken, I couldn’t find any contact info and while I did post about under the Pinterly Template on your forum, I have not had a response.

Would love for your plug in to work, just need a helping hand. :pray:

Sorry to hear that it’s so hard to reach us :pray:
we have a live chat widget on our website
we use https://forum.zeroqode.com a lot to assist our users

when was this? I’ve just checked and it worked well for me.

did you check the demo page for the plugin?
it can be found here: Pinterest Style Grid Plugin for Bubble | Zeroqode

Hope this would help, if not, please post on our forum and we’d be happy to help

Thanks and sorry once again.

Levon Terteryan

Founder @ Zeroqode

zeroqode-for-web-160x120

Bubble Templates

Zeroqode Blocks

Bubble Plugins

Bubble Courses

Convert Web to iOS & Android

No-code Development Services

Thank you for the reply @levon. I appreciate the contact link.

The link I clicked on for Slack is on the forums Welcome message… I get the following:

Yes, I checked the Demo page. I will review it again to see if I missed anything.

oh, i see now, i completely forgot about the forum welcome message. I’ve changed it now and thanks so much for pointing out for me :pray:

hi @jrowley343

This is really fantastic idea and I love it and I successfully implemented it but I have an issue with the repeating group. while we use (Current cell’s index - 1 < modulo > 4 is not 0) it loads all the items and eliminates the duplicates but it leaves a lot of white space below the element (because it loads the entire item in all repeating groups) Do you have any idea eliminating this white space

Hello, @antro.s.vino

In case you have faced some difficulties with the scenario, provided earlier, allow us to mention that you can try our Pinterest Style Grid Plugin for Bubble: Pinterest Style Grid Plugin for Bubble | Plugin for Bubble by Zeroqode

In case we can help you with any additional information - please be free to contact us.
Best regards,
Zeroqode Support Team

How does a repeating group with 1 column and 1 row display mutliple images inside a single group?

Am I missing something, or is this maybe not consistent since the responsive rollout?