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

虽然the docs不明确，但您可以向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之间的区别是taht image_tag会根据您在后端上传的数据为您提供网址，而theme_image_tag则是您从主题中获取的数据。

都接受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 %}

欢呼声， Horiongrégory

Answer 5

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

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

机车CMS可能有自己的过滤器，但代码应该普遍适用。

Answer 6

对我来说，以下工作

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

在机车中给出液体模板<img/>类

6 个答案: