Alternating design for Collection List of Images?

[bensilvertown]

I’m sure something like this is possible - I just can’t figure out for the life of me using CMS Collections.

Currently I’m using a multi-image collection to upload project images.
I’d like to alternate between showing one full screen image and showing two side by side.

The side by side view would need to stack on mobile view otherwise the images would be too small.
I’d like to be able to control which images are 2 up and which are 1 up per item and per page as each page will have a different, unpredictable curation of images.

How would I go about getting this to work pulled from one bucket of images in the CMS?

My one thought is to create all 1 up and two up versions for each image. Then I can use an HTML embed using nth CSS selectors to specify which to toggle visible or not. I could also use the designer to change what is seen on different screen sizes.

However this seems like a long winded and non-performant way of achieving something simple.
Totally open to just not using a multi-image collection but unsure how I’d keep image uploading into the CMS simple per page.

Thank you!

Here is my site Read-Only: [LINK][1]
([how to share your site Read-Only link][2])

[1]: Read only link here
[2]: Share a read-only link | Webflow University

[abirana (Abi Rana | Creative Web Developer)]

You can easily do that by applying Grid system on the parent. I was editing a template for similar requirements, please check the screenshot.

g

By the way, to simply stack those image on mobile you can just apply display flex (to keep the spacing) or you can again edit the grid properties as you need.

[bensilvertown]

Thanks @abirana

How would this work if every page has a different set of images? E.g

Page 1:
1 up, 2 up, 1 up

Page 2:
2 up, 1 up, 1up

If i’m not mistaken this would mean that every page would have the exact same grid pattern of images?

[abirana (Abi Rana | Creative Web Developer)]

Oh ya, according to Webflow template system (CMS Collection page) every page will have same thing.

I have not done this, but if we can add a class to child elements then it should work. This option is not available inbuilt but I’ve found a way with JS, read this topic here Add dynamic class name on collection lists - #5 by Lucas_Wild

By the way, way add a class you may ask. Because wherever that class is present on the child, that child has to stretch. Class name should come from CMS with for each data.

Create a style as below and add this class as data value for the child that you want to stretch. And then apply JS instruction above. By the way, JS script will only work(display) on live site.

<style>
  .grid-cell-stretch {
      grid-area: span 1 / span 2 / span 1 / span 2;
  }
</style>

[bensilvertown]

Awesome thanks I will give it a go and report back

[abirana (Abi Rana | Creative Web Developer)]

Hi @bensilvertown, if your issue is solved can you please mark this post as solved as well? Would really appreciate it.

[bensilvertown]

For anyone else who needs to achieve the same thing I managed to do it by using CSS selectors to count the number of sibling elements. Then depending on the # of siblings I’d span cols differently

/* one item */
div.image-grid:first-child:nth-last-child(1) {
/* -or- li:only-child { */
 grid-column: span 12;
}

/* two items */
div.image-grid:first-child:nth-last-child(2),
div.image-grid:first-child:nth-last-child(2) ~ div.image-grid {
 grid-column: span 6;
}

/* three items */
div.image-grid:first-child:nth-last-child(3),
div.image-grid:first-child:nth-last-child(3) ~ div.image-grid {
grid-column: span 4;
}