Give Liquid-templated 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.

score 7 · Answer 1 · answered Sep 02 '11 at 03:45

7

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

answered Sep 02 '11 at 03:45

M. Scott Ford

2,859
1
23
24

score 4 · Answer 2 · edited Oct 17 '14 at 09:09

4

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

edited Oct 17 '14 at 09:09

Mark Amery

143,130
81
406
459

answered Aug 10 '11 at 13:19

Didde

76
1

score 2 · Answer 3 · answered Dec 10 '11 at 13:28

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.

score 1 · Answer 4 · answered Feb 08 '12 at 17:23

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

score 0 · Answer 5 · answered Sep 05 '12 at 22:54

0

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.

answered Sep 05 '12 at 22:54

Jerimee

181
1
6

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](http://stackoverflow.com/q/462741/1709587)); 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. – Mark Amery Oct 16 '14 at 20:57

score 0 · Answer 6 · answered Jul 17 '15 at 00:34

0

For me, the following worked

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

answered Jul 17 '15 at 00:34

svnm

22,878
21
90
105

Give Liquid-templated a class in Locomotive

6 Answers6