Cannot add CSS class to views field

Question

I have a view in Drupal 8, and have configured a field in the view to have a custom CSS class.

The field I am adding the class to is an image. Under Style Settings I have chosen "Customize field HTML" and "Create CSS class".

When I inspect the image element on the front end, the class is nowhere to be found, and the styles are not applied.

I also have a view fields template for this view named:
views-view-fields--home-page-top-three-stories.html.twig

{{ fields.field_story_preview_image.content }} 
<div class="story-title-box">
    <h3>{{ fields.title.content}}</h3>
    <h4>{{ fields.field_subtitle.content }}</h4>
</div>

"fields.field_story_preview_image.content" is the image field that I would like to apply the CSS class to. Am I missing a configuration step?

Why isn't the CSS class being applied to this image field?

Answer 1

1. I hope you cleared cached
2. I hope u added css under [themename].library.yml
3. If still not working plz use rewrite result add your custom html.

Answer 2

I think you might have modified the template that actually prints the preview image field classes

If you have modified the original views-view-field.html.twig in your theme than make sure that the {{ field.element_attributes }} is included as it is the one responsible for printing the attributes (which includes the classes)

For reference I am pasting here the original views-view-field.html.twig

{% for field in fields -%}
  {{ field.separator }}
  {%- if field.wrapper_element -%}
    <{{ field.wrapper_element }}{{ field.wrapper_attributes }}>
  {%- endif %}
  {%- if field.label -%}
    {%- if field.label_element -%}
      <{{ field.label_element }}{{ field.label_attributes }}>{{ field.label }}{{ field.label_suffix }}</{{ field.label_element }}>
    {%- else -%}
      {{ field.label }}{{ field.label_suffix }}
    {%- endif %}
  {%- endif %}
  {%- if field.element_type -%}
    <{{ field.element_type }}{{ field.element_attributes }}>{{ field.content }}</{{ field.element_type }}>
  {%- else -%}
    {{ field.content }}
  {%- endif %}
  {%- if field.wrapper_element -%}
    </{{ field.wrapper_element }}>
  {%- endif %}
{%- endfor %}