Using attributes in templates

Last updated on
4 August 2017

Many Twig templates will have one or more attribute objects passed in as variables. The job of the Attribute object is to store a set of HTML attributes, give the themer helpful methods to interact with that data and allow for easy printing of the attributes.

It should look something like this:

<div{{ attributes }}></div>

There should not be any space between the tag name and the Twig syntax.

By default the following attribute objects variables are available to all templates: attributes, title_attributes, and content_attributes.

You can use your debug helper of choice (kint(), dump(), dpm(), etc) to inspect what's available. Below is an example of using {{ kint(attributes) }} in node.html.twig

{{ kint(attributes) }} on a node

Attribute's methods

Here are some of the helpful methods you can use with the Attribute object:

attributes.addClass()

Adds classes or merges them on to array of existing CSS classes.

Single class:

<div{{attributes.addClass('my-class')}}></div>

Multiple classes:

{%
  set classes = [
    'red',
    'green',
  ]
%}
<div{{ attributes.addClass(classes) }}></div>

outputs <div class="red green"></div>.

attributes.removeClass()

Removes a class from an Attribute object. Used similarly to addClass. Let's say you get the classes variable from somewhere else like a preprocess function.

{% set classes = [ 'red', 'green', 'blue' ] %}

<div{{ attributes.addClass(classes).removeClass('green') }}></div>

outputs <div class="red blue"></div>.

attributes.setAttribute($attribute, $value)

Sets values for an attribute key.

<div{{ attributes.setAttribute('id', 'myID') }}></div>

outputs <div id="myID"></div>

attributes.removeAttribute($attribute)

Removes an attribute from an Attribute object.

<div{{ attributes.removeAttribute('id') }}></div>

attributes.hasClass($class)

Checks if the class array has the given CSS class.

{% if attributes.hasClass('myClass') %}
  {# do stuff #}
{% endif %}

Create Attributes in Twig

As of Drupal 8.3.x there is a new Twig function create_attribute() See the change record: https://www.drupal.org/node/2818293

This provides a new blank Attribute object to use to build up attributes.

{% set my_attribute = create_attribute() %}
{%
  set my_classes = [
    'kittens',
    'llamas',
    'puppies',
  ]
%}
<div{{ my_attribute.addClass(my_classes).setAttribute('id', 'myUniqueId') }}>
  {{ content }}
</div>
<div{{ create_attribute({'class': ['region', 'region--header']}) }}>
  {{ content }}
</div>

Other helpful snippets

Dot notation can be chained

{% set classes = ['red', 'green', 'blue'] %}
{% set my_id = 'specific-id' %}
{% set image_src = 'https://www.drupal.org/files/powered-blue-135x42.png' %}
<img{{ attributes.addClass(classes).removeClass('green').setAttribute('id', my_id).setAttribute('src', image_src) }}>

outputs <img id="specific-id" class="red blue" src="https://www.drupal.org/files/powered-blue-135x42.png">

Using without filter

The twig filter without to retrieve part of attributes:

<div class="myclass {{ attributes.class }}"{{attributes|without('class') }}></div>

Note that in most cases code like the above should be avoided in favor of using addClass().

Modifying attributes without printing them

{% set attributes = attributes.addClass('my-class') %}
<div{{ attributes }}></div>