Custom CMS parameters styling an object

Design help Custom code
1

Hey guys.

I’m developing a website for architects studio and there’s going to be a projects list. I’m curious if it’s possible to build a CMS collection, where separate items will be stylised using custom CMS parameters. I’m almost sure there’s some kind of a solution using JS for example, but I have no idea how to write it properly.

This is the prototype:
https://preview.webflow.com/preview/3xa-prototyp?utm_medium=preview_link&utm_source=dashboard&utm_content=3xa-prototyp&preview=a5f77e27095364a57d6fc62259a498c2&workflow=preview

Details:

My collection list is built like this:
collection list wrapper
collection list
.cms-item (default cms item container)
.cms-image (photo object fetched from the CMS)

I want to build a CMS record like this:

  • title
  • photo
  • thumbnail size (dropdown, here an user can select “L”, “M” or “S”, and it’s going to set a different thumbnail size in the collection list, that’s going to be just a standard a flex box)

for example:
L size - width: 66.66%; height: 1020px;
M size - width: 66.66%; height: 560px;
S size - width: 33.33%; height: 560px;

This is how the project looks like:

Screenshot 2021-11-26 at 11.57.46
Screenshot 2021-11-26 at 11.57.461514×2458 264 KB

Do you have any ideas how to write it and implement correctly?
Thanks a lot in advance! Cheers!

Here is my site Read-Only: Webflow - 3XA

2

Hi @Leming, the design you’re going after is pretty cool! Just want to give my 2 cents and possibly a workaround.

I think the solution might not be worth the time as there are only a few amount of possibilities in the layout unless you want to allow gaps in between. It’s either S-S-S, S-M (2nd & 3d row) or S-S-L (1st row). With this I would rather create preset grids.

And if you really want to give a customisation option, just use custom css grid-template property and some lighter jquery to assign unique classes that dictates wether its either of the 3 options.