Streaming live at 10am (PST)

Targeting specific items within CMS lists/data

Wondering if there’s some way of targeting the data within lists.

As an example, with a grid structured list … I want to affect the width/height of a specific (individual) entry within the CMS data but have all others continue displaying in the standard grid type set up — which would create a somewhat masonry style/overlapped grid, with data being fed by the CMS.

Does this sound at all possible?

Soft bump and fingers crossed for an answer

:slight_smile:

When you say “grid” are you referring to the CSS grid (display:grid) or just a grid type layout with flex?

it’s currently a CSS grid, but there’s no reason it wouldn’t be a flex grid (other than perhaps wanting to affect both width and height of an item at the same time)

:slight_smile:

I have used the value of a text field in a collection list to assign CSS classes to items in the list; affecting the display of these items. Took just a small amount of custom code. If that sounds viable to you, I could find the project you could look at.

1 Like

That would be amazing. just trying to find a solution that can be fed via a CMS … I could obviously approach it with manual content (it’s for a folio).

Thanks Jeff.

Summary: Added option field to collection. Populated it with some values. Assigned values to collection items. Added the field to the collection list. Display set to none.

Custom code fetches the value, and then acts on it. Code is on the home page (before body close). I built this as a quick proof of concept.

Here is the published link -> https://dynamic-classes-on-a-collection.webflow.io

You can see I the result above.

Read Only Link