Add dynamic class name on collection lists

Hi :wave:

We’re currently trying to add a class name to each item within a collection list - this name needs to come from a field within the cms.

My understanding is to add a dynamic field name to collection list items required custom JS - is this something anyone has had success with?

The intention is to vary styling across the list items - I know people have achieved this through using multiple collection lists (e.g a collection list of featured items, followed by a list of standard items) but we’d like more control than that.

Any help appreciated!

Chris


Here is my public share link: LINK
(how to access public share link)

Here is some jQuery code that will do what you want. Read the comments in the code.

Here is a link to the code.

1 Like

Thank you! Much appreciated.

For those with more interest:

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

Note: This is only implemented on the home page.

Shared - > https://preview.webflow.com/preview/dynamic-classes-on-a-collection?utm_source=dynamic-classes-on-a-collection&preview=a5222ef1fd15b0ba3cafdd827bcc02de

1 Like

Thanks Webdev.

Just testing an implementation combining with MixitUp dynamic filtering, which requires the addition of combo classes to act as category tags for each item being sorted. Works a treat so far:
https://charterhouse-asia.webflow.io/en/news

Project is here if you’re interested:
https://preview.webflow.com/preview/charterhouse-asia?utm_medium=preview_link&utm_source=dashboard&utm_content=charterhouse-asia&preview=4f9d6a6640ef8b4e5c6607a0e129f97e&mode=preview

Hello Webdev, and thanks for those examples.

Would there be a way to apply that same logic on a CMS Collection list inside of a CMS template page?

For instance: let’s say I have two collections, one for “categories” (Economics, Politics) and one for “articles” (Article A, B, C, D, E). On the “Politics” category template page, I’m creating a CMS Collection List to display the article within that category (A, B, C) — via a standard reference field. Same for the “Economics” category template page (but this time with articles D and E).

But now let’s imagine I want to give article A a different color (highlight) or article B a different width, or article C a different text style etc etc, based on fields within that Articles collection.

That’s where I’m stuck.

I cannot reference CMS fields of the Articles collection in the Before <body> tag section of the Category Template Page. I can only reference CMS fields of the Category collection in that area.

Is there a workaround?
Thanks in advance :pray:

I’m after a similar thing as @ronotypo in that, I would love to have some pages of the collection have a white background, others light yellow, etc.

I have added in nested classes to my custom code for each page, just need a way to add the class of the collection-page to the body.

Just wondering,
Is there a way to extract with js data from a collection item directly without having to use a textelement in the DOM?
I know I can just set to “hidden” and call it a day, just wondering

Since we can only act on the page once it is rendered, using a value on the page after the render is the only way.