You are here

field--paragraphs-grid-formatter.html.twig in Paragraphs grid 8

Theme override for a field.

To override output, copy the "field--entity-reference-revisions.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_yourfieldname 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.
  • container_attributes: The attributes for the grid container.
  • row_attributes: The attributes for a grid row.

File

templates/field--paragraphs-grid-formatter.html.twig
View source
  1. {#
  2. /**
  3. * @file
  4. * Theme override for a field.
  5. *
  6. * To override output, copy the "field--entity-reference-revisions.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_yourfieldname field
  14. * on an article node type:
  15. * - field--node--field-paragraphs--article.html.twig
  16. * - field--node--field-paragraphs.html.twig
  17. * - field--node--article.html.twig
  18. * - field--field-yourfieldname.html.twig
  19. * - field--entity-reference-revisions.html.twig
  20. *
  21. * Available variables:
  22. * - attributes: HTML attributes for the containing element.
  23. * - label_hidden: Whether to show the field label or not.
  24. * - title_attributes: HTML attributes for the title.
  25. * - label: The label for the field.
  26. * - multiple: TRUE if a field can contain multiple items.
  27. * - items: List of all the field items. Each item contains:
  28. * - attributes: List of HTML attributes for each item.
  29. * - content: The field item's content.
  30. * - entity_type: The entity type to which the field belongs.
  31. * - field_name: The name of the field.
  32. * - field_type: The type of the field.
  33. * - label_display: The display settings for the label.
  34. * - container_attributes: The attributes for the grid container.
  35. * - row_attributes: The attributes for a grid row.
  36. *
  37. *
  38. * @see template_preprocess_field()
  39. */
  40. #}
  41. {%
  42. set classes = [
  43. 'field',
  44. 'field--name-' ~ field_name|clean_class,
  45. 'field--type-' ~ field_type|clean_class,
  46. 'field--label-' ~ label_display,
  47. ]
  48. %}
  49. {%
  50. set title_classes = [
  51. 'field__label',
  52. label_display == 'visually_hidden' ? 'visually-hidden',
  53. ]
  54. %}
  55. <div{{ attributes.addClass(classes) }}>
  56. {% if not label_hidden %}
  57. <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
  58. {% endif %}
  59. {% if container_attributes is not empty %}
  60. <div{{ container_attributes }}>
  61. {% endif %}
  62. <div{{ row_attributes.addClass('field__items') }}>
  63. {% for item in items %}
  64. <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
  65. {% endfor %}
  66. </div>
  67. {% if container_attributes is not empty %}
  68. </div>
  69. {% endif %}
  70. </div>