Forum Academy Marketplace Showcase Pricing Features

Pinterest-Style Cascading Grid Layout

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