Using attributes in Twig template

Submitted by shiv on Fri, 04/22/2016 - 20:19
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. 

Splitting out the class attribute:

<div class="myclass {{ attributes.class }}">   </div> 
Here are other 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.

 
outputs

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().
Check updated info @ here

Sample blackbox block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non porta odio, id mattis erat.

Nam sed tincidunt eros. Donec a venenatis odio, vitae commodo sem. Vivamus ullamcorper pellentesque erat, in adipiscing tortor scelerisque sit amet. Nulla pulvinar urna magna. Vivamus a ipsum lorem. Etiam adipiscing pulvinar lorem.