How do I check the image's view mode in the image.html.twig template?

Question

I'd like to detect the custom view mode (Structure > Display Modes) selected for an media entity (image) and then be able to have html output based on the view mode. Specifically I have a custom view mode named 'top_banner' and would like to change the formatting of the default element when this view mode is selected. Here is what I have in my image.html.twig template:

{% if view_mode == 'top_banner' %}
    <img{{ attributes.addClass(banner) }} data-cover/>    
{% else %}
    <img{{ attributes }} />
{% endif %}

This however does not seem to detect the view mode. Currently the image is output in the default format <image {{ attributes }} />.

The image is a media entity field and is part of a Paragraph type named x_banner. The x_banner Paragraph is then referenced on the x_page content type.

I've searched and can't seem to find an instance where this is implemented in the field.html.twig or image.html.twig template.

Any assistance with this would be greatly appreciated.

Answer 1

If you're using a Media entity, you can check the view mode in the media template: media.html.twig:

From the media.html.twig file documentation:

• view_mode: View mode; for example, "teaser" or "full".

This would let you add the class to the image parent <div>.

If you want to target only images, you can do this:

media--image.html.twig

And if you want to target only images with the view mode abc, you can do this:

media--image--abc.html.twig