0

I'm learning twig and using it to format and style my fields. The problem I am running into is that I need to create a new twig template for each individual field.

In the example picture, I have field--parent-task.html.twigwhich allows me to edit 1 field (or the first field), but I will need to create 6 more templates with identical code structure, just to style and move the fields around.

enter image description here

Is there a more efficient way to do this? In the end, I will have 7 templates just to target different fields, but yet they are all on the same page. I know I can target classes, say field__label, but that is not what I need, since I will be moving these fields around, giving them unique positions on the page.

If it cannot be done and this is how it is in D8, that is fine, I will deal with it. But if not, is there a better approach? So I don't end up having a endless list of field templates just to add/tweak a few css styles?

  • 1
    There are multiple template suggestions for fields and there are multiple different ways of reusing code in Twig – Hudri May 21 at 14:22
  • 1
    This wouldn't be Drupal if there weren't countless other options. Two of the most common ones would be to install a module to add the css classes in UI or use a preprocess hook to add the attributes in PHP. You have to be more specific in what direction you want to go and the specific problem you need to solve. – 4k4 May 21 at 18:40
  • 1
    Yet another way, if it's a node, use node--[content-type].html.twig and print all 7 fields there. – No Sssweat May 21 at 18:57
  • Is your theme extending classy? It sounds like your field template may be missing classes that wrap the output. That said, there’s so many ways you could do this that there’s no one way to answer it. – Kevin May 22 at 1:32
2

I had a project that needed some specific markup for different fields, using field.html.twig only at least saved managing multiple files.

field.html.twig:

{%
  set themeGroupOne = [
    'first_field',
    'second_field',
  ]
%}

{%
  set themeGroupTwo = [
    'third_field',
    'fourth_field',
  ]
%}

{# field markup option #}
{% if field_name in themeGroupOne %}

  {% for item in items %}
    {{ item.content }}
  {% endfor %}

{# field markup option #}
{% elseif field_name in themeGroupTwo %}

  {% for item in items %}
    {{ item.content }}
  {% endfor %}

{# Final option, default field template #}
{% else %}

{% if label_hidden %}
<span{{ attributes.addClass('field', field_type | clean_class, field_name | clean_class) }}>
  {% if multiple %}
    {% for item in items %}
      <span{{ item.attributes.addClass('field-item', field_type | clean_class ~ '-item', field_name | clean_class ~ '-item') }}>{{ item.content }}</span>
    {% endfor %}
  {% else %}
    {% for item in items %}
      {{ item.content }}
    {% endfor %}
  {% endif %}
</span>
{% else %}
<label{{ title_attributes.addClass(field_type | clean_class, field_name | clean_class) }}>{{ label }}</label>
<span{{ attributes.addClass('field', 'with-label', field_type | clean_class, field_name | clean_class) }}>
  {% if multiple %}
    {% for item in items %}
      <span{{ item.attributes.addClass('field-item', field_type | clean_class ~ '-item', field_name | clean_class ~ '-item') }}>{{ item.content }}</span>
    {% endfor %}
  {% else %}
    {% for item in items %}
      {{ item.content }}
    {% endfor %}
  {% endif %}
</span>
{% endif %}

*Note that the two fields:

  • field.field.paragraph.paragraph_type.field_h2
  • field.field.node.node_type.field_h2

will both register as field_name == 'field_h2' in field.html.twig, making it even easier to theme fields across your site.

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.