Give Жидкостная <img>класс в Локомотиве

Question

У меня есть следующая разметка жидкости:

{{ 'image.jpg' | theme_image_tag }}

и это выглядит как,

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

Как добавить класс или какую-либо опцию к нему? Я хочу, чтобы это выглядело как:

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

Я использую Locomotive CMS и жидкость, которая поставляется с ней.

Answer 1

Для наибольшего контроля используйте theme_image_url вместо theme_image_tag. Вот более подробный пример, который должен заставить вас хотеть.

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

Answer 2

Хотя документы не дают ясного объяснения, вы можете добавить классы к фильтрам image_tag или theme_image_tag следующим образом:

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

В общем, вы можетедобавить произвольные атрибуты HTML.Жидкий код, подобный этому ...

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

будет выдавать HTML следующим образом:

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

Answer 3

Если вы хотите настроить жидкость, вы можете отредактировать файл html.rb, расположенный в lib / locomotive / liquid / filters / html.rb.

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

Или вы даже можете редактировать текущий фильтр theme_image_tag.

Answer 4

разница между image_tag и theme_image_tag в том, что image_tag даст вам URL из данных, которые вы загрузили в свой бэкэнд, а theme_image_tag - это тот, который вы получите из своей темы.

оба принимают параметры.

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

ура, Horion grégory

Answer 5

Для меня сработало следующее

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

Answer 6

Выходные фильтры запускаются слева направо, так что вы также можете сделать это:

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

Locomotive CMS может иметь свои собственные фильтры, но код должен работать универсально.