0

I have a site running on Drupal 8. I would like to add a css style specifically to one Field. I know the machine name for this field and was trying to create an {% if %} command within a twig template that references the machine name in order to style it with a class.

What would be the correct way to write an {% if %} "field_name" "is", "then apply this class"?

This is the code within the Twig file that controls the appearance of the page:

{%
  set classes = [
    'field',
    'field--name-' ~ field_name|clean_class,
    'field--type-' ~ field_type|clean_class,
    'field--label-' ~ label_display,
  ]
%}
{%
  set title_classes = [
    'field__label',
    label_display == 'visually_hidden' ? 'visually-hidden',
  ]
%}


{% if label_hidden %}


  {% if multiple %}
    <div{{ attributes.addClass(classes, 'field__items') }}>
      {% for item in items %}
        <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
      {% endfor %}
    </div>
  {% else %}
    {% for item in items %}
      <div{{ attributes.addClass(classes, 'field__item') }}>{{ item.content }}</div>
    {% endfor %}
  {% endif %}


{% else %}

  <div{{ attributes.addClass(classes) }}>
    <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
    {% if multiple %}
      <div class='field__items'>
    {% endif %}
    {% for item in items %}

      <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
    {% endfor %}

    {% if multiple %}
      </div>
    {% endif %}
  </div>


{% endif %}

Could someone please tell me what the correct way to code this for my desired outcome would be?

  • Can you paste your code? – Kevin Jan 8 at 23:15
  • @Kevin I've just updated the question with code – Auxiliary Joel Jan 8 at 23:32
  • I’d advise copying out to field—FIELD-NAME.html.twig and make modifications there instead of add one off logic to the main field template. – Kevin Jan 8 at 23:55
  • @Kevin I've now created a new file called: "field--field_additional_text.html.twig" that includes the following code: {% if field_name == 'field_additional_text' %} <div class="additionalbreaker">test </div> {% endif %} That produced error on page, stating I need to wrap code in a block. I've made a block: {% extends "field.html.twig" %} {% block additional %} {% if field_name == 'field_additional_text' %} <div class="additionalbreaker">test </div> {% endif %} {% endblock %} I can load page, but content in block doesn't affect anything? – Auxiliary Joel Jan 9 at 0:09
  • You made a template that only affects that field specifically - you don’t need field name conditions in it. Just add your style or markup change. Drupal will use that for that field only. – Kevin Jan 9 at 0:50
0

You copied field.html.twig to a new file, field--field-additional-text.html.twig. After clearing the cache, Drupal will only use this new file for that field only. Now you do not need logic in either template.

So you now can make changes, for example:

{% for item in items %}
  <div class="additionalbreaker">{{ item.content }}</div>
{% endfor %}

^ This means, for every item in this field (single or multiple values), print each value wrapped in this div, with this class. However, within a field template, you cannot output different fields as one, the sole purpose of a field template is to render the current field.

Read up on theming Drupal fields for more information.

  • sorry I think we were posting at same time then, I have now changed the entire "field--field-additional-text.html.twig" to include only this code: {% extends "field.html.twig" %} {% for item in items %} <div class="additionalbreaker">{{ item.content }}</div> {% endfor %} but that causes an error: The website encountered an unexpected error. Please try again later.</br></br><em class="placeholder">Twig_Error_Syntax</em>: A template that extends another one cannot include content outside Twig blocks. Did you forget to put the content inside a {% block %} tag? – Auxiliary Joel Jan 9 at 1:06
  • There are various ways of doing this - you can avert the error by not extending that twig file, so remove the extend tag. The above example is the most basic way - from there you can learn onward with the Drupal and Twig docs. – Kevin Jan 9 at 1:07
  • ah yes I can see that now I have removed the "extend.." code that the page is now displaying with my class to that field. thank you so much. This now makes me realise I don't entirely understand the point of "Extend". I assumed that Extend was needed for the page to register that my new twig needed to be read. But this exercise shows that "Extend" is not needed for the new twig to be acknowledged, so in what circumstances would I want to use "extend"? – Auxiliary Joel Jan 9 at 1:08
  • extends is probably best explained at a high level in the official Twig docs (off of drupal.org). It can be used in certain cases, but you do need to have a better grasp of Twig and the rendering pipeline of Drupal to really wield it. twig.symfony.com/doc/1.x/tags/extends.html – Kevin Jan 9 at 1:09

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.