0

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.

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

4
  • Thank you for your quick response. If I could get media--image--abc.html.twig to work it would be great, however that template file name suggestion is not being detected/used/rendered. Perhaps it's because I'm using the Responsive Image module and the <img> tag is wrapped in a <picture> tag inside a <div>. I also took a shot at image--top-banner.html.twig and it also didn't work with the following - <img{{ attributes.addClass(banner) }} data-cover/> – flamesquirrel Dec 11 '20 at 20:00
  • If the view-mode-specific template doesn't work, try the base image template and use an if statement for the view mode in that template. More importantly, there is no need to guess which template is being used; you need to turn Twig debugging on and use that to find the correct template: drupal.org/docs/theming-drupal/twig-in-drupal/… – Patrick Kenny Dec 12 '20 at 1:45
  • As mentioned in initially, I did try the image.html.twig template with the {% if view_mode == 'top_banner' %} statement and and I still got the default output i.e {% else %} <img{{ attributes }} />. I have Twig debug turned on and and it shows that the image.html.twig template is being used. There are no other template suggestions for the image-- hook. I also tried {% if paragraph.view_mode == 'top_banner' %} – flamesquirrel Dec 12 '20 at 21:50
  • Sorry, I meant base media image template (media--image.html.twig), not base image template. When creating templates, if you copy them from the base templates (in core, contrib, etc.), there will be basic documentation at the top that tells you what variables are available. So again, you don't need to guess; the list of available variables should be there in the comment in the twig template file itself. – Patrick Kenny Dec 13 '20 at 2:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.