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.

For example, for a field named 'body' displayed on the 'article' content type, any of the following templates will override this default implementation. The first of these templates that exists is used:

  • field--body--article.html.twig
  • field--article.html.twig
  • field--body.html.twig
  • field.html.twig

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.
  • content_attributes: HTML attributes for the content.
  • items: List of all the field items.
  • item_attributes: List of HTML attributes for each item.

See also

template_preprocess_field()

theme_field()

1 theme call to field.html.twig
FormatterBase::view in drupal/core/modules/field/lib/Drupal/field/Plugin/Type/Formatter/FormatterBase.php
Builds a renderable array for one field on one entity instance.

File

drupal/core/modules/field/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. * For example, for a field named 'body' displayed on the 'article' content
  11. * type, any of the following templates will override this default
  12. * implementation. The first of these templates that exists is used:
  13. * - field--body--article.html.twig
  14. * - field--article.html.twig
  15. * - field--body.html.twig
  16. * - field.html.twig
  17. *
  18. * Available variables:
  19. * - attributes: HTML attributes for the containing element.
  20. * - label_hidden: Whether to show the field label or not.
  21. * - title_attributes: HTML attributes for the title.
  22. * - label: The label for the field.
  23. * - content_attributes: HTML attributes for the content.
  24. * - items: List of all the field items.
  25. * - item_attributes: List of HTML attributes for each item.
  26. *
  27. * @see template_preprocess_field()
  28. * @see theme_field()
  29. *
  30. * @ingroup themeable
  31. */
  32. #}
  33. <!--
  34. THIS FILE IS NOT USED AND IS HERE AS A STARTING POINT FOR CUSTOMIZATION ONLY.
  35. See http://api.drupal.org/api/function/theme_field/8 for details.
  36. After copying this file to your theme's folder and customizing it, remove this
  37. HTML comment.
  38. -->
  39. <div{{ attributes }}>
  40. {% if not label_hidden %}
  41. <div class="field-label"{{ title_attributes }}>{{ label }}:&nbsp;</div>
  42. {% endif %}
  43. <div class="field-items"{{ content_attributes }}>
  44. {% for delta, item in items %}
  45. <div class="field-item {{ cycle(["even", "odd"], delta) }}"{{ item_attributes[delta] }}>{{ item }}</div>
  46. {% endfor %}
  47. </div>
  48. </div>

Related topics