Con la incorporación de las plantillas Twig a partir de Drupal 8, se facilita notablemente el trabajo de maquetación con CSS, teniendo la oportunidad de añadir o eliminar clases de forma dinámica o algunas específicas para ciertos contenidos o campos, dependiendo de nuestras necesidades. Por defecto, la plantilla node.html.twig, incluye clases específicas para cada tipo de contenido, facilitando bastante el trabajo del maquetador.
Ahora voy contarte algunas formas disponibles para que puedas trabajar con las clases, en tus plantillas de Drupal 8 o 9 y que puedas explorar las nuevas opciones con las que podrías reducir posibles dolores de cabeza, al momento de implementar algunas soluciones, que antes eran mucho más complejas de aplicar.
AÑADIR UNA CLASE SIMPLE
Imagina el caso de tener un campo tipo Select en que quieras cambiar el color, dependiendo de si el usuario ha elegido un valor u otro o que necesitas una clase específica para diferenciar entre dos campos que se mostrará en varios contenidos, pero no tienes una plantilla específica para el tipo de contenido en cuestión. Estos son sólo dos ejemplos en los que podrías necesitar de añadir una clase simple.
Para esto, sólo tendrás que pasar como argumento el nombre de la clase en la función attributes.addClass().
<div {{ attributes.addClass('classname') }}> </div>
AÑADIENDO VARIAS CLASES AL MISMO TIEMPO
Otro caso con el que nos podemos encontrar, es el de añadir múltiples clases a un campo en concreto y remover alguna de ellas dependiendo del resultado que queremos obtener, por ejemplo si queremos aplicar algún efecto con javascript.
En este caso, crearemos un array con los nombres de todas las clases que vamos a utilizar, para crear un Array en Twig escribiremos la etiqueta "set" y luego el nombre del array, si abres cualquiera de las plantillas de Drupal, veras esta clase de estructura justo al final de los comentarios.
{% set classes = [ 'content', 'node', 'custom', ] %}
Para añadir estas clases al campo, lo que tendremos que agregar es el nombre del array como argumento en la función attributes.addClass()
<div {{ attributes.addClass(classes) }}> </div>
Siempre que se añadan clases a un elemento de cualquiera de las formas anteriores, estas se fusionarán con las demás clases existentes.
ELIMINAR CLASES DINÁMICAMENTE
Como mencionamos al principio, puede que además de añadir clases, nos haga falta eliminar una o varias existentes para obtener un resultado específico. La forma en que podemos hacerlo en Twig es añadiendo el nombre de la clase a la función attributes.removeClass().
<div {{ attributes.addClass(classes).removeClass('node') }}> </div>
DOS EJEMPLOS REALES QUE PODRÁS EXPLORAR EN TU INSTALACIÓN DE DRUPAL 9
Si abres, en tu editor de texto favorito, la carpeta donde se guardan las plantillas del tema Classy "core/themes/classy/templates", verás dos claros ejemplos sobre lo que explicábamos al principio de este artículo.
EJEMPLO DE CLASE SIMPLE
Si abres la plantilla ubicada en "field/time.html.twig", verás que se ha añadido la clase datetime en el elemento time
<time{{ attributes.addClass('datetime') }}></time>
EJEMPLO DE MÚLTIPLES CLASES
Si abres la plantilla ubicada en "layout/region.html.twig", podrás ver un ejemplo real de cómo añadir varias clases utilizando un array en Twig.
{% set classes = [ 'region', 'region-' ~ region|clean_class, ] %}
Como habrás notado, en este último ejemplo exites dos clases, una simple llamada "region", per en la segunda vemos varios elementos adicionales:>
- 'region-': es una variables simple tipo sting
- ~ este es un operador de Twig, que sirve para concatenar strings
- region: la variable region. Ésta será reemplazada por la región actual(ej.: block)
- |: Un pipe que separará las variables (region) de un filtro (clean_class)
- clean_class: un filtro que, en este caso removerá los caracteres no validos de las clases HTML
Si tienes un block en la región Header, entonces, según el código anterior, se añadirrá la clase llamada region-header.
<div class="region region-header">
CLASE NODE
El último de los ejemplos es la clase que se añade al elemento artículo en la plantilla node.html.twig, varás otro ejemplo de cómo añadir clases múltiples en la plantilla ubicada en "content/node.html.twig"
{% set classes = [ 'node', 'node--type-' ~ node.bundle|clean_class, node.isPromoted() ? 'node--promoted', node.isSticky() ? 'node--sticky', not node.isPublished() ? 'node--unpublished', view_mode ? 'node--view-mode-' ~ view_mode|clean_class, ] %}
Como mencioné al comenzar este artículo, la plantilla node.html.twig añade dinámicamente clases específicas para cada tipo de contenido, facilitando la aplicación de estilos notablemente, este comportamiento está definido en la línea:
'node--type-' ~ node.bundle|clean_class,
Un tipo de contenido es un tipo de paquete en Drupal. Entonces node.bundle devolverá el nombre de la máquina del tipo de contenido. Al igual que en el ejemplo de campo, esto se pasa a través del filtro clean_class.
Una muestra clara de este comportamiento, podemos comprobarlo si estamos viendo un nodo del tipo artículo, si ejecutamos el explorador del navegador con la tecla F12, e inspeccionamos el código html, veremos que la clase añadida al artículo es:
node--type-article
En el Array de clases anterior, también podemos ver una serie de condiciones que verifican si algo existe antes de añadir las clases:
node.isPromoted() ? 'node--promoted',
Esta línea comprueba si hemos dejado seleccionada la opción que nos viene por defecto, para promocionar el contenido en la página principal, y si es el caso, entonces añade la clase node--promoted
not node.isPublished() ? 'node--unpublished',
Esta línea comprueba si nuestro contenido está o no publicado, si no es así entonces le añade la clase node--unpublished
Echa un vistazo al video para que veas ejemplos de cómo trabajar con twig