给予液体模板机车班

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_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 gregory

Answer 5

输出过滤器从左到右运行，所以您也可以这样做:

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

机车CMS可能有自己的过滤器，但是about的代码应该是通用的。

Answer 6

对我来说，下面的操作行得通

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