Gebruik van attributen in sjablonen

Veel Twig-sjablonen zullen één of meerdere Attribute-objecten hebben die als variabelen worden doorgegeven. De taak van het Attribute-object is het opslaan van een set HTML-attributen, waarbij het de ontwikkelaar nuttige methodes biedt om met deze data te werken en eenvoudig de attributen af te drukken. Bijvoorbeeld, attribute.addClass('myclass') maakt het eenvoudig om een enkele klasse toe te voegen, zonder je zorgen te maken over de juiste string-concatenatie.

Gewoonlijk zouden attributen in een sjabloon er ongeveer zo uitzien:

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

Er mogen geen spaties staan tussen de tagnaam en de Twig-syntaxis. Het “stable”-thema, dat is opgenomen in de Drupal 8-core, heeft veel voorbeelden van attributen om te bestuderen.

Standaard zijn voor alle sjablonen de volgende object-variabelen van attributen beschikbaar: attributes, title_attributes en content_attributes.

Je kunt je debug-helper (kint(), dump(), dpm(), enz.) gebruiken om te onderzoeken wat er beschikbaar is. Hieronder staat een voorbeeld van het gebruik van {{ kint(attribute) }} in het bestand node.html.twig.

Attribute-methodes

Hier zijn enkele nuttige methodes die je kunt gebruiken met het Attribute-object:

attributes.addClass()

Voegt klassen toe of voegt ze samen in een array van bestaande CSS-klassen.

Enkele klasse:

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

Meerdere klassen:

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

geeft uit: <div class="red green"></div>.

attributes.removeClass()

Verwijdert een klasse uit het Attribute-object. Wordt op dezelfde manier gebruikt als addClass. Stel dat je een variabele met klassen uit bijvoorbeeld een preprocess-functie krijgt.

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

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

geeft uit: <div class="red blue"></div>.

attribute.setAttribute($attribute, $value)

Stelt waarden in voor een attribuut-sleutel.

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

geeft uit: <div id="myID"></div>

attributes.removeAttribute($attribute)

Verwijdert een attribuut uit het Attribute-object.

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

attributes.hasClass($class)

Controleert of de klasse-array een bepaalde CSS-klasse bevat.

{% if attributes.hasClass('myClass') %}
  {# doe iets #}
{% endif %}

Attributen aanmaken in Twig

Sinds Drupal 8.3.x is er een nieuwe Twig-functie: create_attribute(). Zie de change record: https://www.drupal.org/node/2818293.

Deze levert een nieuw, leeg Attribute-object om attributen mee aan te maken.

{% 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>

Andere nuttige fragmenten

Punt-notatie kan worden gekoppeld

{% 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) }}>

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

Gebruik van de filter without

De Twig-filter without haalt een deel van de attributen eruit:

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

Opmerking: in de meeste gevallen moet je bovenstaande aanpak vermijden, en de voorkeur geven aan het gebruik van addClass().

Wees uiterst voorzichtig bij het handmatig toekennen van attributen in Twig-sjablonen. Zorg er altijd voor dat je strings van attributen tussen dubbele aanhalingstekens plaatst, anders kan de site kwetsbaar blijven voor een XSS-aanval. Twig escapt automatisch de inhoud binnen dubbele aanhalingstekens en beschermt zo tegen XSS-aanvallen.

Dit Twig-sjabloon:

<b class={{ attributes.class }}>Hello<b>

Met gebruikersinvoer:

foo onclick=alert(bar)

Zal dit resultaat opleveren:

<b class=foo onclick=alert(bar)>Hello</b>

Dit Twig-sjabloon met dubbele aanhalingstekens:

<b class="{{ attributes.class }}">Hello<b>

Zal uit dezelfde invoer dit resultaat geven:

<b class="foo &quot; onclick=&quot;alert(bar)">Hello</b>

Wijzigen van attribuut zonder

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