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.

Decrease

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" />

Zoilazoilla

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">

Comparison

Answer 3

If you want to customize your liquid, you could consider editing the html.rb file located in lib/locomotive/liquid/filters/html.rb .

    def my_custom_tag (input,*args)
      "<img src=\"#{theme_image_url(input)}\" class=\"#{args.first}\" />"
    end

Or you can even edit the current theme_image_tag filter.

Papaw

Answer 4

the difference between image_tag and theme_image_tag is taht image_tag will give you the url from the data you have upload in your backend and theme_image_tag is the one you get form your theme.

both accept params.

{{ '/public/images/exemple.jpg' | theme_image_tag:'class: c1,c2'}}

{% for blog_post in contents.blog_posts%}
 {{ blog_post.image.url | image_tag, 'alt:my beautyfull image', 'id:exemple'}}
{% endfor %}

cheers, Horion grégory

Oneupmanship

Answer 5

Output filters run from left to right, so you could also do this:

{{ 'image.jpg' | theme_image_tag | replace_first' />',' class="thumbnail" />' }}

Locomotive CMS may have its own filters, but the code about should work universally.

Persecution

This seems needlessly hacky when there are clean solutions for this exact problem built into Liquid, as described by the other answers here. It also depends upon image_tag and similar filters generating a tag that has a / before the > (not required in HTML 5) and a space before the / (not required except for compatibility with Netscape 4 and older browsers); at least the latter of these points feels like an implementation detail in Liquid that the devs would think little of changing in future. I'd worry that relying on this could be fragile. – Sorce

Answer 6

For me, the following worked

{% image "book.jpeg" alt="My book" class="book-123" %}

Teem