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.