Streaming live at 10am (PST)

CMS random image gallery


#1

Hi, I am using http://thinking-twins.webflow.io/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)


#2

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.


#3

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?