Display images either 50% or 100% width based on Collection field setting?

Hi,

I’d like to create a mosaic of images displaying from a collection–some images taking up 50% of the container width, others displayed as full-width, 100% of the container.

Would it be possible to set a Collection field called Image Width, which would be either “full” or “half”, and set the display to react to that, accordingly?

Thanks!


Hi @robtour, I’m interested to see if this can be done. I may be wrong but when you set rules, especially with collection lists, these rules apply to all the same items yes? So not sure how you could, for example, ‘get image from full’ and also ‘get image from half’ within the same collection. Maybe I’m wrong :slight_smile:

A while back I needed a solution that styled individual cms items in a list based on the value of a option field in the collection. It was done with custom code.

https://dynamic-classes-on-a-collection.webflow.io/

https://preview.webflow.com/preview/dynamic-classes-on-a-collection?utm_medium=preview_link&utm_source=designer&utm_content=dynamic-classes-on-a-collection&preview=a5222ef1fd15b0ba3cafdd827bcc02de&mode=preview

1 Like

Could this work with grid too? For example a 3x3 grid with the first image on row 1 spanning columns 1-3 and maybe row 2 an image spanning column 1-2, then a third image in column 3, and on row 3 an image in each column. All from a collection list.

I don’t know. What I do know is if you can add a class to an element, or inline CSS that formats the element the way you want, then yes.