Using attributes in templates

Last updated on
21 October 2016

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).addAttribute('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().