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 ! 
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:
-
Create 1 repeating group where you load the data and 3 nested repeating groups inside which access the data of the outside repeating group.
-
Data source of all 3 nested rgs is the outside rg.
-
Build 1 group inside every nested rg which represent the current cell
-
Conditions for the groups (3):
-
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:
-
RG : modulo3 is not 2 and current.page.width >= 1000 ->not visible
+modulo 2 is not 0 and cpw >=700 and <1000 → not visible -
rg modulo 3 is not 0 and cpw >=1000 → not visible
-
also put every of the repeating group inside a group with the following conditionals:
-
no other conditions
-
current page width < 700 → not visible
-
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