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.
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)