1. 8.5.x core/themes/stable/templates/field/field.html.twig
  2. 8.5.x core/modules/system/templates/field.html.twig
  3. 8.5.x core/themes/classy/templates/field/field.html.twig
  4. 8.0.x core/modules/system/templates/field.html.twig
  5. 8.0.x core/themes/stable/templates/field/field.html.twig
  6. 8.0.x core/themes/classy/templates/field/field.html.twig
  7. 8.1.x core/themes/classy/templates/field/field.html.twig
  8. 8.1.x core/modules/system/templates/field.html.twig
  9. 8.1.x core/themes/stable/templates/field/field.html.twig
  10. 8.2.x core/themes/classy/templates/field/field.html.twig
  11. 8.2.x core/modules/system/templates/field.html.twig
  12. 8.2.x core/themes/stable/templates/field/field.html.twig
  13. 8.3.x core/themes/classy/templates/field/field.html.twig
  14. 8.3.x core/modules/system/templates/field.html.twig
  15. 8.3.x core/themes/stable/templates/field/field.html.twig
  16. 8.4.x core/modules/system/templates/field.html.twig
  17. 8.4.x core/themes/stable/templates/field/field.html.twig
  18. 8.4.x core/themes/classy/templates/field/field.html.twig
  19. 8.6.x core/themes/stable/templates/field/field.html.twig
  20. 8.6.x core/modules/system/templates/field.html.twig
  21. 8.6.x core/themes/classy/templates/field/field.html.twig

Default theme implementation for a field.

To override output, copy the "field.html.twig" from the templates directory to your theme's directory and customize it, just like customizing other Drupal templates such as page.html.twig or node.html.twig.

Instead of overriding the theming for all fields, you can also just override theming for a subset of fields using Theme hook suggestions. For example, here are some theme hook suggestions that can be used for a field_foo field on an article node type:

Available variables:

  • attributes: HTML attributes for the containing element.
  • label_hidden: Whether to show the field label or not.
  • title_attributes: HTML attributes for the title.
  • label: The label for the field.
  • multiple: TRUE if a field can contain multiple items.
  • items: List of all the field items. Each item contains:
    • attributes: List of HTML attributes for each item.
    • content: The field item's content.
  • entity_type: The entity type to which the field belongs.
  • field_name: The name of the field.
  • field_type: The type of the field.
  • label_display: The display settings for the label.

See also

template_preprocess_field()

1 theme call to field.html.twig
FormatterBase::view in core/lib/Drupal/Core/Field/FormatterBase.php
Builds a renderable array for a fully themed field.

File

core/modules/system/templates/field.html.twig
View source
  1. {#
  2. /**
  3. * @file
  4. * Default theme implementation for a field.
  5. *
  6. * To override output, copy the "field.html.twig" from the templates directory
  7. * to your theme's directory and customize it, just like customizing other
  8. * Drupal templates such as page.html.twig or node.html.twig.
  9. *
  10. * Instead of overriding the theming for all fields, you can also just override
  11. * theming for a subset of fields using
  12. * @link themeable Theme hook suggestions. @endlink For example,
  13. * here are some theme hook suggestions that can be used for a field_foo field
  14. * on an article node type:
  15. * - field--node--field-foo--article.html.twig
  16. * - field--node--field-foo.html.twig
  17. * - field--node--article.html.twig
  18. * - field--field-foo.html.twig
  19. * - field--text-with-summary.html.twig
  20. * - field.html.twig
  21. *
  22. * Available variables:
  23. * - attributes: HTML attributes for the containing element.
  24. * - label_hidden: Whether to show the field label or not.
  25. * - title_attributes: HTML attributes for the title.
  26. * - label: The label for the field.
  27. * - multiple: TRUE if a field can contain multiple items.
  28. * - items: List of all the field items. Each item contains:
  29. * - attributes: List of HTML attributes for each item.
  30. * - content: The field item's content.
  31. * - entity_type: The entity type to which the field belongs.
  32. * - field_name: The name of the field.
  33. * - field_type: The type of the field.
  34. * - label_display: The display settings for the label.
  35. *
  36. * @see template_preprocess_field()
  37. *
  38. * @ingroup themeable
  39. */
  40. #}
  41. {% if label_hidden %}
  42. {% if multiple %}
  43. <div{{ attributes }}>
  44. {% for item in items %}
  45. <div{{ item.attributes }}>{{ item.content }}</div>
  46. {% endfor %}
  47. </div>
  48. {% else %}
  49. {% for item in items %}
  50. <div{{ attributes }}>{{ item.content }}</div>
  51. {% endfor %}
  52. {% endif %}
  53. {% else %}
  54. <div{{ attributes }}>
  55. <div{{ title_attributes }}>{{ label }}</div>
  56. {% if multiple %}
  57. <div>
  58. {% endif %}
  59. {% for item in items %}
  60. <div{{ item.attributes }}>{{ item.content }}</div>
  61. {% endfor %}
  62. {% if multiple %}
  63. </div>
  64. {% endif %}
  65. </div>
  66. {% endif %}

Related topics

Comments

Strutsagget’s picture

How do i get the Id or uuid of an item?
For instance if i want to add an data-uuid attribute.

Daimos’s picture

I think the best way to do it, is use include inside twig, and pass variable with your field. So for example if you have field_reference:
instead of:

{{ content.field_reference }}

try:

{{ include('your/path' }}

your path is of course your partial twig theme for this field. You can there render content.field_reference or use $node to skip standard field.html.twig

madlobz’s picture

If you like old field format like Drupal 7 you can redeclare this file and put there next:

<div{{ attributes.addClass('field-'~field_name|clean_class, 'field-type-'~field_type|clean_class, 'field-label-'~label_display|clean_class) }}>
  {% if not label_hidden %}
  <div{{ title_attributes.addClass('field-label') }}>{{ label }}</div>
  {% endif %}
  <div class="field-items">
    {% for item in items %}
    <div{{ item.attributes.addClass('field-item', item.index%2?'odd':'even') }}>{{ item.content }}</div>
    {% endfor %}
  </div>
</div>

or next in more readable format:

<div{{ 
  attributes.addClass('field-' ~ field_name | clean_class)
            .addClass('field-type-' ~ field_type | clean_class)
            .addClass('field-label-' ~ label_display | clean_class) 
}}>
  {% if not label_hidden %}
  <div{{ 
    title_attributes.addClass('field-label') 
  }}>{{ label }}</div>
  {% endif %}
  <div class="field-items">
    {% for item in items %}
    <div{{ 
      item.attributes.addClass('field-item')
                     .addClass(item.index % 2 ? 'odd' : 'even') 
    }}>{{ item.content }}</div>
    {% endfor %}
  </div>
</div>