How to add class to image tag in Twig template? [duplicate]

Question

How can I add a CSS class to an <img> tag by using a template file if output looks like this:

<!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/system/image.html.twig' -->
<img class="media__image media__element b-lazy b-responsive img-responsive b-loaded" src="/sites/default/files/styles/media_image/public/2018-03/Trainer-Norbert-Sauer-auf-der-Rennbahn-Wambel-Am-Donnerstag-249903.jpg?h=c913b3c6&amp;itok=sENPOWtc" alt="Trainer Norbert Sauer auf der Rennbahn Wambel">
<!-- END OUTPUT from 'themes/contrib/bootstrap/templates/system/image.html.twig' -->

Answer 1

You can use hook_preprocess_field to add classes to the attributes array without modifying twig:

/**
 * Implements hook_preprocess_field().
 */
function mytheme_preprocess_field(&$variables) {
  if ($variables['entity_type'] == 'media' && $variables['field_name'] == 'image') {
    foreach ($variables['items'] as $key => $item) {
      $variables['items'][$key]['content']['#item_attributes']['class'][] = 'myclass';
    }
  }
}

Note that I am checking by both entity type (media) here along with the field name (image).

If you want to do this by image style, you can also use hook_preprocess_image:

/**
 * Implements hook_preprocess_image().
 */
function mytheme_preprocess_image(&$variables) {
  if ($variables['style_name'] == 'content_embed') {
    $variables['attributes']['class'][] = 'myclass';
  }
}

In both cases you do not need to touch the Twig file because the image field will be rendered and as long as attributes is output on the img tag (coming from core, it will be), the class will be appended to any other existing classes.

Answer 2

A less hacky option is to enable Display Suite field templates, which allows you to add classes to the immediately <div> wrapper of the <img> tag. This way, you can practically add different classes to different image fields.

Answer 3

Copy image.html.twig from themes/contrib/bootstrap/templates/system/image.html.twig to your theme's template folder

and modify the image tag adding addClass("myClass")

<img{{ attributes.addClass(classes).addClass("myClass") }} /> 

Note: this will apply the class to all images fields in the site