6

次の液体マークアップがあります。

{{ '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 と付属の液体を使用します。

4

6 に答える 6

7

ほとんどの制御については、theme_image_url代わりに を使用することを検討してtheme_image_tagください。これは、あなたが望むより詳細な例です。

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

于 2011-09-02T03:45:26.587 に答える
4

ドキュメントではこれが明確にされていませんが、次のように または フィルターにクラスを追加でき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">
于 2011-08-10T13:19:08.913 に答える
2

液体をカスタマイズしたい場合は、 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 フィルターを編集することもできます。

于 2011-12-10T13:28:05.917 に答える
1

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 %}

乾杯、ホリオングレゴリー

于 2012-02-08T17:23:07.837 に答える
0

出力フィルターは左から右に実行されるため、次のようにすることもできます。

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

Locomotive CMS には独自のフィルターがある場合がありますが、コードは普遍的に機能するはずです。

于 2012-09-05T22:54:54.540 に答える
0

私にとっては、以下が機能しました

{% image "book.jpeg" alt="My book" class="book-123" %}
于 2015-07-17T00:34:51.570 に答える