Print image in blog template

Support Themes & Styling
1

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 - tag?

2

did you try :

3

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

4

see here in antimatter theme for instance

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

5

thank you.

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

6

shortcut is:

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

notice the .classes('foo') part…

7

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