CMS random image gallery

Hi, I am using Masonry Layout gallery, but I wish I could make it more randomized in the layout. I am newbie in js and basically in web design :wink:
I am using 3 columns in a collection list but the output is very static, I would give it a bit random feeling. What would be the best approach, still having a power of cms?

from this:


to:

Would appreciate any help!
Thanks


Here is my public share link: LINK
(how to access public share link)

One common practice to add variety to a grid of CMS content is to split the grid into several Collection Lists.

For example, start with a Collection List (CL) limited to 3 items from 1 to 3, and use Flexbox to make 2 columns followed by an full width item. Then add a new CL, limited to 4 items from 4 to 8, and make a four columns layout. Then a CL with 2 columns with 2 items from 9 to 10, then one with a grid a 2 x 2, etcā€¦

Youā€™ll get a nice list and you can control what is shown and where quite easily.

Now to have that ā€œrandom feelingā€, use the technique above to build a straight grid, made of a series of CL (it ultimately can be 1 CL by itemā€¦ Youā€™re limited to something like 20 Cl per page), and play with Position (ie relative and top and bottom values to moke them vertically) to introduce your random effect.

Hey Vincent, I think I tried to do it similiar to your approach. But Iā€™ve also used sliders instead of just images, so the user can click through series of images right in the box (no lightbox). Iā€™m looking for the same more randomized look buberts described. Now the way I did it, Iā€™ve used already 20 collection lists but just showing 5 projects. Is there any workaround. Is there any way to use less collection lists for the same amount of sliders?

Hereā€™s what Iā€™ve created so far: http://asome.webflow.io/

Share Link: https://preview.webflow.com/preview/asome?preview=7d6a86a9ec84e9c3ad191af885af052c

Could you give me a step by step guide on how to create what you described above or do you have a share link?