Uso de atributos en las plantillas

Muchos templates Twig tendrán uno o varios objetos Attribute pasados como variables. La tarea del objeto Attribute es almacenar un conjunto de atributos HTML, proporcionando al desarrollador métodos útiles para interactuar con esos datos y permitiendo imprimir fácilmente los atributos. Por ejemplo, attribute.addClass('myclass') facilita añadir una clase sin preocuparse por la concatenación exacta de cadenas.

Normalmente los atributos en la plantilla deberían verse así:

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

No debe haber espacios entre el nombre de la etiqueta y la sintaxis Twig. El tema "stable", incluido en el núcleo de Drupal 8, tiene muchos ejemplos de atributos para estudiar.

Por defecto, las siguientes variables de objeto Attribute están disponibles para todas las plantillas: attribute, title_attributes y content_attributes.

Puedes usar tu herramienta de depuración (kint(), dump(), dpm(), etc.) para inspeccionar qué está disponible. A continuación un ejemplo de uso de {{ kint(attribute) }} en el archivo node.html.twig.

Métodos de Attribute

Aquí algunos métodos útiles que puedes usar con el objeto Attribute:

attributes.addClass()

Añade una o más clases al array de clases CSS existentes.

Clase única:

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

Múltiples clases:

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

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

attributes.removeClass()

Elimina una clase del objeto Attribute. Se usa igual que addClass. Por ejemplo, si obtienes un array de clases de otra parte, como una función de preprocesamiento:

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

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

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

attributes.setAttribute($attribute, $value)

Establece el valor para un atributo dado.

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

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

attributes.removeAttribute($attribute)

Elimina un atributo del objeto Attribute.

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

attributes.hasClass($class)

Comprueba si el array de clases contiene una clase CSS dada.

{% if attributes.hasClass('myClass') %}
  {# haz algo #}
{% endif %}

Crear atributos en Twig

A partir de Drupal 8.3.x, existe la nueva función Twig create_attribute(). Consulta la nota de cambios: https://www.drupal.org/node/2818293.

Esto proporciona un nuevo objeto Attribute vacío para crear atributos.

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

Otros fragmentos útiles

Las notaciones puntuales pueden encadenarse

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

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

Uso del filtro without

El filtro Twig without extrae parte de los atributos:

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

Nota: en la mayoría de los casos deberías evitar usar código como el anterior y preferir addClass().

Ten mucho cuidado al asignar atributos manualmente en plantillas Twig. Asegúrate siempre de encerrar las cadenas de atributos entre comillas dobles, de lo contrario el sitio podría quedar vulnerable a ataques XSS. Twig escapa automáticamente el contenido entre comillas dobles y protege contra ataques XSS.

Este template Twig:

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

Con una entrada de usuario:

foo onclick=alert(bar)

Resultará en la salida:

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

Este template Twig con comillas dobles:

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

Producirá esta salida con la misma entrada:

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

Modificar atributo without

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