Pinterest-Style Cascading Grid Layout

Hey Greg! :slight_smile: I actually just ended up using a repeating group for this. How many items are you looking to display in this format (I was thinking a similar ‘cascading’ style could be accomplished using groups within a cell of a repeating group, and then having that repeat).

Thanks for getting back to me Faye. :sunglasses:

My idea is to create a moodboard app similar to Pinterest but without the fluff, just clean images like below.

I’d want 4 columns of fixed width but want the height to collapse negative space between images. I want people to be able to upload images of varying widths and heights.

Does your solution do this?

1 Like

If I create 1 row and 4 columns, then set the images to ‘adjust element height’ I get the desired effect. I just need to figure out how a user can upload a single image and add it to the board.

Yes, I think this is possible with a few workarounds. :slight_smile: I just created this forum example:

Preview:

Editor:

So if you kept your setup with 1 row with 4 columns, that would have the element height of each image adjust in the cell, but the horizontal dividers would remain the same from row to row (shown below)

To workaround having negative space between the rows, I created four repeating groups (1 column, 4 rows) with extended vertical scrolling. In your application the data structure will be different, but in the forum example I just created a new Data Type called “Pinterest Grid”:

With this setup, each Image also has an assigned “Group Number” (1, 2, 3 or 4). This is because there are four repeating groups (each with only one column):

Each repeating group does a “Search for Pinterest Grids”, and in that constraint is a Group Number.

For example, in the first repeating group on the far left, the search constraint is this:

The second group only shows ‘Group 2’ images:

And that same process repeats for the 3rd and 4th Repeating Groups. With this setup, there won’t be any negative space between the rows. To make sure everything was adjusting, I created these entries within the App Data tab:

In preview mode the repeating groups adjust dependent upon the image, as well as the text element within the cell. In this example, I used static text within the text element, but the text you use could definitely be the result of a dynamic expression (a caption of the image created by the User, for example).

This way, there won’t be any wasted space because the cell in each repeating group adjusts its height. I haven’t done this with User uploaded images, but I think this is definitely possible if you were to create a workflow which detected which Group number should be assigned to the User’s most recently uploaded image. If this is something you’d like to set up in your app, I can definitely try to help with the data structure/workflow parts to ensure that everything is uploaded in the correct order.

7 Likes

@fayewatson this is brilliant!!! :grinning:

Thanks for being so smart.

I’m going to give this a go shortly.

1 Like

Sounds great Greg! :smiley: Excited to see if this solution works out for you! Will test some workflows for submitting pictures in the forum app now.

1 Like

Ok, I just tested everything and I think this works as expected. :slight_smile: Here’s a new forum page I created with the picture input and workflows to save the image to the Current User. You can test everything as well in the forum app and it will save to the Current User (even if you’re logged out of the forum app).

Preview:

Editor:

With data:

In summary, each repeating group has conditional formatting which changes the repeating group’s data source based on the Group number of the User’s most recently uploaded image. This way, the most recently uploaded image is always in the top left cell in the 1st column (similar to uploading something to Instagram). Each repeating group involves a lot of conditional formatting statements, but I think the loading time is still fine and each repeating group column updates very quickly after each picture upload.

2 Likes

This is such a clever hack. Well done!!

1 Like

Thank you so much @geo.chiv.george! :smiley:

2 Likes

You’re awesome, @fayewatson

2 Likes

Gaby, you’re the best - Thank you! :blush:

2 Likes

Extending Faye’s idea is to have nested repeating groups. The outer groups searches for all images. The inner group filters the list from the outer group according to which number it is, which it gets from the current cell index.

This works well for being responsive, it can have 4 columns down to 1 column depending on page width.

My test picture selection isn’t as nice as yours!

I noticed the pictures at the bottom become uneven, the method depends on the average picture height being consistent.

2 Likes

That is a much cleaner solution to have the inner, filtered repeating group’s constraint be the current cell’s index - Great idea. I’ll definitely be doing that from now on! Thank you @mishav :slight_smile:

1 Like

I looked into it a bit more … if in responsive mode it becomes three columns, then the pictures from groups 1 to 3 are laid out nicely, then group 4 is all piled up under group 1 in a long column.

So the caveat is, the division of the pictures needs to match the number of displayed columns.

Edit: it’ll be fine with 1 column (obviously), 2 columns will have group 1 and 2 at the top and group 3 and 4 underneath so it will also look fine. Just when displaying three columns it’s an issue.

1 Like

[solved] Hello there @mishav. Would you be able to provide the link to this pinterest style grids editor? Thanks.

I figured it out. Thanks.

Now what we really need is a search bar at the top which keeps the same type of ‘Pinterest’ grid layout to display it’s results… somewhat tricky though, I’ve been failing miserably :frowning:

We have just published a plugin that will easily apply a Pinterest Style Grid to your repeating groups

3 Likes

Not so bad, isn’t it? Without any plugin from the marketplace ! :+1:t2:

Masonry gallery + lightbox demo

2 columns on small device screens, up to 4 on large screens.

Performances could be improved (lot of F…), but not so bad regarding loading time!

don’t know if its still up to date, but I made this work without any plugin!

It is working with any number of columns, but you have to adjust the values a little bit.

Here is how to do it with 3 columns on a big screen, 2 columns on Tablet and 1 column on smartphone:

  1. Create 1 repeating group where you load the data and 3 nested repeating groups inside which access the data of the outside repeating group.

  2. Data source of all 3 nested rgs is the outside rg.

  3. Build 1 group inside every nested rg which represent the current cell

  4. Conditions for the groups (3):

  5. RG: Current cells index modulo3 is not 1 and current page width >=1000 → element not visible
    (this is when there are 3 columns)

  • current cells index modulo2 is 0 and current page width >=700 and < 1000 → element not visible

this you have to adjust for the other 2 groups of course with the following:

  1. RG : modulo3 is not 2 and current.page.width >= 1000 ->not visible
    +modulo 2 is not 0 and cpw >=700 and <1000 → not visible

  2. rg modulo 3 is not 0 and cpw >=1000 → not visible

  3. also put every of the repeating group inside a group with the following conditionals:

  4. no other conditions

  5. current page width < 700 → not visible

  6. current page width < 1000 → not visible

These instructions built the following effect:

1st RG:
If 3 columns shown it shows number 1,4,7,10 etc
If 2 columns shown it shows number 1,3,5,7 etc
If 1 column shown it shows number 1,2,3,4,5 etc

Its perfectly responsive and you can search within without using any numbers.

Here some screenshots:

3columns:

2columns:

1column:

1 Like

Looks great!

1 Like