给出液体模板机车类

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。这是一个更详细的示例，应该可以满足您的需求。

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

如果您想自定义液体，可以考虑编辑位于 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 是您从主题中获得的 URL。

两者都接受参数。

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

干杯，
霍里昂·格雷戈里

Answer 5

输出过滤器从左到右运行，因此您也可以这样做：

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

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

Answer 6

对我来说，以下工作有效

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