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