Twig Attributes

Twig Attributes allows developers to set HTML attributes (such as classes or an id) in a parent Twig template to elements in a child template, eliminating the need to create a template override or implement a preprocess hook just to add an attribute. It is particularly useful when working with fields that do not by default support attributes on certain HTML elements, such as links. Twig Attributes includes specific support for a number of templates provided by Drupal core, including ones used for image fields, responsive image fields, and links.

Attributes are added using a Twig filter (add_attr) on the element to be rendered, with the following arguments:

• Key: The key of the property element to which the attributes should be added. If the first character is not a hash ("#"), one will automatically be prepended.
• Attributes: The attributes to add. This should be an array of key/value pairs. The key is the name of the attribute to add and the value, which can either be a string or an array, is the attribute's value.
• Add to Children: By default, attributes are added to the child elements (non-property elements that don't begin with "#") of the renderable array. Pass false as the third argument to alter this behavior and set the attributes on the parent element.
• Override: By default, if an attribute value is an array, new values are merged with existing ones. Pass true as the fourth argument to alter this behavior and override any existing value with a new one.

Examples

To add a class to an <img> tag when rendering an image field:

{{ content.field_image|add_attr('image_attributes', {class: ['custom-class']}) }}

To add an ID to an <a> tag when rendering a link field:

{{ content.field_link|add_attr('link_attributes', {id: 'custom-id'}) }}

Filters can be chained to set attributes on multiple elements in a template:

{{ content.field_image
  |add_attr('image_attributes', {class: ['custom-image-class']})
  |add_attr('link_attributes', {class: ['custom-link-class']})
}}

To add class to an <a> tag when rendering a link (not in a field), you need to pass false for the add_to_children argument, so that it applies to the top-level element:

{{ link|add_attr('link_attributes', {class: 'custom-class'}, false) }}

In order to add link attributes to a responsive image field, you will need to override the responsive_image_formatter template in your theme (the default template is located in core/modules/responsive_image/templates) and change the anchor tag to use the link_attributes variable, which is provided by Twig Attributes, like so:

<a{{ link_attributes|without('href') }} href="{{ url }}">
  {{ responsive_image }}
</a>

with_attr is available as an alias to add_attr.