Streaming live at 10am (PST)

Refrence CMS in custom div attrbute

#1

I have a few fields in CMS that i wanna set as data attributes of the CMS item in the Collection List, anyone have a minimalistic way of doing this?

Before the solution was to add 4 text fields, refrence the CMS text for each field, display:hidden and put a ID on each of the attributes, then loop throught hem with JS and take each text field and add the attribute to the parent element.

However this requires me to have 4 extra elements for each CMS item, wich becomes a problem when you have 300 cms items on one page, it woudl result in 4x300 = 1200 more elements.

If i could add custom div attributes on the “CMS Item” and refrence the fields, no additional elements would be needed, nor any JS.

Anyone have a better idea of doing this?
I had a plan of adding an embedded and refrence the cms in there, Embeded =>

CMS1, CMS2, CMS3, CMS4
and then split it and apply it as attributes with JS, but feel like this is only semi optimal.
#2

By JS. But anyway no way to solve this without extra element (Embed code with span and four data-src sound the most minimal her).

Maybe try this trick
https://www.w3schools.com/jquery/html_wrap.asp

$(".cms-card").wrap("<div data-src="hello" data-width="100" data-lorem="ipsum"></div>");

If this idea could work for you - its should take ± 10 minutes to convert this idea to loop throw all cms items (Update me).


Maybe you find some idea her (More complex example):
(In this example i convert youtube id to code - the concept/steps should be the same±. And first try to create this by codepen (Copy-paste the html from webflow)