liquid - 在 Locomotive 中给 Liquid-templated一个类

Question

我有以下液体标记：

{{ 'image.jpg' | theme_image_tag }}

它呈现像，

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

如何添加一个类或任何选项？我希望它呈现如下：

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

我使用机车 CMS 和它附带的液体。

Answer 1

为了获得最大的控制权，请考虑使用theme_image_url而不是theme_image_tag. 这是一个更详细的示例，应该可以满足您的需求。

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

Answer 2

尽管文档没有说明这一点，但您可以像这样向image_tagortheme_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

如果你想定制你的液体，你可以考虑编辑位于 lib/locomotive/liquid/filters/html.rb 的 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.jpg' | theme_image_tag | replace_first' />',' class="thumbnail" />' }}

Locomotive CMS 可能有自己的过滤器，但是关于的代码应该可以通用。

Answer 6

对我来说，以下工作

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