Daj cieczowe matrycy <img> klasę w lokomotywie

Question

Mam następujący ciekły znaczników:

{{ 'image.jpg' | theme_image_tag }} 

i renderuje jak,

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

Jak dodać klasę lub cokolwiek opcję do niego? Chcę, aby brzmiał on następująco:

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

Używam CMS Locomotive i cieczy, która z nim jest.

Answer 1

Chociaż the docs nie robią to jasne, można dodać klas do image_tag lub theme_image_tag filtrów, takich jak ten:

{{ "image.png" | image_tag: "class:image" }} 

Bardziej ogólnie, można dodać dowolne atrybuty HTML. Ciecz kod tak ...

{{ "image.png" | image_tag: "id:foo", "some_custom_attr:bar" }} 

będzie produkować HTML tak:

<img src="image.png" id="foo" some_custom_attr="bar"> 

Answer 2

W większości kontroli, należy rozważyć użycie theme_image_url zamiast theme_image_tag. Oto bardziej szczegółowy przykład, który powinien Ci się podobać.

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

Answer 3

Jeśli chcesz dostosować płynu, można rozważyć edycję pliku html.rb zlokalizowany w lib/lokomotywy/ciecz/Filtry/html.rb.

def my_custom_tag (input,*args) 
     "<img src=\"#{theme_image_url(input)}\" class=\"#{args.first}\" />" 
    end 

Można nawet edytować aktualny filtr theme_image_tag.

Answer 4

Różnica między image_tag i theme_image_tag to taht image_tag da ci adres URL z danych, które przesyłasz do backendu, a theme_image_tag to ten, który dostaniesz z tematu.

oba przyjmują parametry.

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

okrzyki, Horion Grégory

Answer 5

Filtry wyjściowe biegnie od lewej do prawej, więc można też to zrobić:

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

Lokomotywa CMS może posiadać swoje własne filtry, ale kod o powinien działać uniwersalnie.

Answer 6

Dla mnie, co następuje pracował

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