Print image in blog template

HI Guys,

as a grav rookie i need some support.

i try to print a blog image in the blog_item.html.twig and need to add a class to it.

the default markup seems to be:

{% set header_image = page.header.header_image|defined(true) %}
{% set header_image_width = page.header.header_image_width|defined(680) %}
{% set header_image_height = page.header.header_image_height|defined(400) %}
{% set header_image_file = page.header.header_image_file %}

{% if header_image %}
{% if header_image_file %}
{% set header_image_media = page.media.images[header_image_file] %}
{% else %}
{% set header_image_media = page.media.images|first %}
{% endif %}
{{ header_image_media.cropZoom(header_image_width, header_image_height).html }}
{% endif %}

Can someone help me to get more familiar with the twig and how to get the image printed with an additional class in the <img> - tag?

@achikas:
header_image_media

did you try :

https://learn.getgrav.org/content/media#html-title-alt-classes

i can't try it, because i didnt know how to render the url for the <img> from the the first header_image_media with a class.

@achikas:
images

see here in antimatter theme for instance
https://github.com/getgrav/grav-theme-antimatter/blob/develop/templates/blog.html.twig#L6-L12

it gets the first img from page media then you get the url when you add .url see example.

with the url you can do for instance
{% set media = '<img class="' ~ image_class ~ svg_classe ~'" src="' ~ image_media_url ~ '"' ~ image_width_attr ~ image_height_attr ~ image_alt ~ image_title ~ '/>' %}

NB: the code is just an example, you have to adapt it

thank you.

the missing output tag for the image url was {{ header_image_media.url }}

shortcut is:

{{ header_image_media.cropZoom(header_image_width, header_image_height).classes('foo').html }}

notice the .classes('foo') part...

thanks for the shortcut. this gave me a real good support to start learning grav and twig!