Uso degli attributi nei template

02/10/2025, by Ivan

Molti template Twig avranno uno o più oggetti Attribute, passati come variabili. Il compito dell’oggetto Attribute è quello di memorizzare un insieme di attributi HTML, fornendo al developer metodi utili per interagire con questi dati e consentendo di stampare facilmente gli attributi. Ad esempio, attribute.addClass('myclass') semplifica l’aggiunta di una classe senza preoccuparsi della concatenazione manuale delle stringhe.

Normalmente, gli attributi in un template dovrebbero apparire così:

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

Non ci devono essere spazi tra il nome del tag e la sintassi Twig. Il tema "stable", incluso nel core di Drupal 8, contiene molti esempi di attributi da studiare.

Di default, per tutti i template sono disponibili le seguenti variabili di oggetto attributo: attributes, title_attributes e content_attributes.

Puoi usare il tuo strumento di debug (kint(), dump(), dpm(), ecc.) per controllare cosa è disponibile. Ecco un esempio di utilizzo di {{ kint(attributes) }} in un file node.html.twig.

kint-attributes-object

Metodi degli attributi

Ecco alcuni metodi utili che puoi usare con l’oggetto Attribute:

attributes.addClass()

Aggiunge classi o le unisce a un array di classi CSS esistenti.

Classe singola:

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

Classi multiple:

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

produce: <div class="red green"></div>.

attributes.removeClass()

Rimuove una classe dall’oggetto Attribute. Si usa in modo simile ad addClass. Supponiamo che tu riceva la variabile delle classi da qualche altra parte, ad esempio da una funzione di preprocessing.

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

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

produce: <div class="red blue"></div>.

attribute.setAttribute($attribute, $value)

Imposta i valori per una chiave di attributo.

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

produce: <div id="myID"></div>

attributes.removeAttribute($attribute)

Rimuove un attributo dall’oggetto Attribute.

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

attributes.hasClass($class)

Controlla se l’array delle classi contiene una determinata classe CSS.

{% if attributes.hasClass('myClass') %}
  {# esegui qualcosa #}
{% endif %}

Creare attributi in Twig

A partire da Drupal 8.3.x, è stata introdotta una nuova funzione Twig create_attribute(). Vedi la change record: https://www.drupal.org/node/2818293.

Questa funzione fornisce un nuovo oggetto Attribute vuoto da usare per creare attributi.

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

Altri frammenti utili

La notazione a punti può essere concatenata

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

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

Uso del filtro without

Il filtro twig without estrae una parte degli attributi:

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

Nota: nella maggior parte dei casi si dovrebbe evitare di usare codice come quello sopra, preferendo invece l’uso di addClass().

Fai molta attenzione quando assegni attributi manualmente nei template twig. Assicurati di racchiudere sempre le stringhe degli attributi tra virgolette doppie, altrimenti il sito può rimanere vulnerabile ad attacchi XSS. Twig esegue automaticamente l’escape del contenuto racchiuso tra virgolette doppie, proteggendo dall’XSS.

Questo template twig:

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

Con input dell’utente:

foo onclick=alert(bar)

Produrrà questo output:

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

Questo template Twig con virgolette doppie:

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

Produrrà questo output dallo stesso input:

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

Modificare l’attributo con without

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

Extra Block Types (EBT) - Nuova esperienza con Layout Builder❗

❗Extra Paragraph Types (EPT) - Nuova esperienza con Paragraphs