By dappi on

How can I add data attributes to image?

I have view that prints title, body and image. The image code is this: 

<img width="578" height="472" src="http://mydomain.com/sites/mydomain.com/files/image-small.jpg" typeof="foaf:Image">

Now what I would like it to be:

<img width="578" height="472" src="http://mydomain.com/sites/mydomain.com/files/image-small.jpg" typeof="foaf:Image data-big-image="http://mydomain.com/sites/mydomain.com/files/image-big.jpg" />

So I would need to get that data-big-image attribute there somehow. But how? Can I do it via Views admin, block template or..? Drupal isn't very HTML5 friendly i guess?

Thakns for all help!

⋅ Categories: Drupal 7.x

Comments

criznach’s picture

criznach commented

Using views, I'd create two image fields. The first is the large image, the second is the small. For the first, large image, exclude it from display, and set it's formatter to just the URL. For the second image, set the formatter to just the URL, and rewrite the output. In the rewrite text field, enter your img tag, and substitute the replacement tokens for your two image URLs in the appropriate places.

You could also do it with a custom template, but this way is quick and requires no code.

http://www.trailheadinteractive.com