Give Liquid-templated <img> class in Locomotive

Question

I have the following liquid markup:

{{ 'image.jpg' | theme_image_tag }} 

and it displays how

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

How to add a class or any other option? I want it to look like this:

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

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

Answer 1

For most controls, use theme_image_url instead of theme_image_tag . Here is a more detailed example that should interest you.

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

Answer 2

Although the documents do not make this clear, you can add classes to the image_tag or theme_image_tag as follows:

 {{ "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 create HTML as follows:

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

Answer 3

If you want to customize your fluid, you can 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.

Answer 4

the difference between image_tag and theme_image_tag is taht image_tag will give you the url from the data you uploaded to your server, and theme_image_tag will give you the one you get from your theme.

both take parameters.

 {{ '/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 %} 

amuses Horion grégory

Answer 5

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

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

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

Answer 6

The following works for me

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