Give Liquid-templated <img> a class in Locomotive

Question

I have the following liquid markup:

{{ 'image.jpg' | theme_image_tag }}

and it renders like,

<img src="/site.com/site/3424242/image.jpg" />

How to add a class or whatever option to it? I want it to render like:

<img src="/site.com/site/3424242/image.jpg" class="thumbnail" />

I use the Locomotive CMS and the liquid that comes with it.

Answer 1

For the most control, consider using theme_image_url instead of theme_image_tag. Here's a more detailed example that should get you want you want.

<img src="{{ 'image.jpg' | theme_image_url }}" class="thumbnail" />

Answer 2

Although the docs don't make this clear, you can add classes to the image_tag or theme_image_tag filters like this:

{{ "image.png" | image_tag: "class:image" }}

More generally, you can add arbitrary HTML attributes. Liquid code like this...

{{ "image.png" | image_tag: "id:foo", "some_custom_attr:bar" }}

will produce HTML like this:

<img src="image.png" id="foo" some_custom_attr="bar">