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".

enter image description here

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:

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

"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?

  • I'm having the exact same issue: Drupal 8; a view that includes an image field; same style settings applied. I also can't get Drupal to actually render the class="" attribute. Commented Apr 1, 2021 at 20:06

2 Answers 2

  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.
  • I have cleared the cache, my css has been added under [themename].library.yml, and im not sure about rewrite result, I will explore that now.
    – crayden
    Commented Jan 26, 2018 at 17:53

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 %}
  • Unfortunately this is not the solution. My custom theme is a child theme of the Bootstrap 3 theme for Drupal. Within my theme there was no template for views-view-field.html.twig. I have created the template and used the code you provided (from the original), and now none of the view fields across the website appear at all.
    – crayden
    Commented Jan 26, 2018 at 18:34
  • I looked at the original template in core/modules/views/templates and the file you mentioned is views-view-fields.html.twig, not views-view-field.html.twig (plural vs singular). I have copied this template to my custom theme just in case, but still no CSS class on the font end is being applied.
    – crayden
    Commented Jan 26, 2018 at 18:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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