Add CSS class to view image_field in twig

Question

In my custom view fields twig file views-view-fields--search--product_result.html.twig I try to theme my view item.

{{ fields.field_images.content }}
<h5 class="card-title">{{ fields.title.content }}</h5>

How do I add a CSS class to my image field {{ fields.field_images.content }}?

Answer 1

This is what worked for me: It's a preprocess function in the .theme file. I wish there was a way to do this directly into the template. This would apply that class everywhere the field appears.

/**
 * Implements hook_preprocess_field().
 * Adds a class to a People image.
 */
function themename_preprocess_field(&$vars) {
  if ($vars['element']['#field_name'] == 'field_machine_name') {
    foreach($vars['items'] as $key => $item){
      $vars['items'][ $key ]['content']['#item_attributes']['class'][] = 'my_class';
    }
  }
}

themename, field_machine_name, and my_class are placeholders for your values.

This produces:

<img class="my_class" src="/your/image/location.png" alt="Your alt text." typeof="foaf:Image" width="458" height="354">