Dynamic attributes

Community resources Product feedback
1

So this is probably low on totem pole, but I imagine it would be a simple functional improvement that could especially help with integrating webflow with other js libraries.

I can manually set an object’s custom attributes, but it would be nice if I could set that attribute to the value of a field from a collection item.

For example, swiper supports lazy loading of images but requires that you set image src to a data attribute, ie:

<img data-src="path/to/picture-1.jpg" class="swiper-lazy">

or, for background images:

<div data-background="path/to/picture-3.jpg" class="swiper-slide swiper-lazy"></div>

unfortunately, if I’m building the swiper DOM using a dynamic list, I can’t access the field when setting the attribute, even though I can set the bg image directly from dynamic style settings.

many libraries (scrollr and others) require data attributes, being able to set them from collection fields could help integrating those libraries alot.

Cheers --Reed

EDIT: Oh… btw here’s the site I specifically would like this for: http://longwooddressageteam.com

The slider at the top is build from a collection of images to allow new images to be added easily.

the client loves how I have a history of the team, but at this point its 50 images long … loading the page the first time is pretty slow and will only get slower in time. Lazy loading would be a perfect solution, but I can’t do that without dynamic attributes. (actually it’s close to the point I may abandon the collection and go back to a manually created and updated list of slides =/)

2

If you do this, you add the custom attribute you need

http://vincent.polenordstudio.fr/snap/4azjh.jpg

Maybe not ideal as the href will still be there anyway.

3

Problem is… the img src tag.

  • Lazy load doesn’t use it.

Perhaps - along with what @vincent said above…

  • you could use a 1px transparent image (for src) that would be replaced when lazy load has finished.

Technically… you could also remove the src tag with JQuery.

4

Considering that website is for a riding school…

and there are not many images…

are you sure want to lazy load the few images that are there ?

I don’t think search engines will see the images.

5

hmm … while I’m aware there are work-arounds, what the request is looking for would help when integrating collections with js libraries.

In revolution’s workaround he suggests using the custom attributes, and manually entering the url. This would require workarounds in code for 2 reasons:

  1. the path to the picture will need to be converted to the cdn url (i’ve done this before, its fairly trivial, but does require custom coding)
  2. the path is hard coded, instead of using the collection’s field to define its value. Within a dynamic list, attempting to set the attribute individually can’t be done, and outside a dynamic list you lose the convenience that collections give you.

What I’m looking for is similar to the “Dynamic Custom Style” section when you look at an object’s settings that is nested within the Dynamic List. With this I am able to pull the Image or BG Image from a field. Similarly, with “Dynamic Attributes” I would envision being able to set the value of an attribute using a field instead of manually coding it.

I absolutely agree there are work-arounds, and I may leverage them, the best of which I believe is using jquery to move the src attribute into a data-src attribute… but if there weren’t workaround necessary it may enable more of your customers to more easily integrate their collections, and dynamic content, with other js libraries.

Hopefully that clarifies

Cheers --Reed