Usar un valor de campo como atributo Twig

Necesito establecer un valor de campo como clase CSS en una plantilla de página. ¿Cómo puedo hacerlo al estilo Twig?

{{attributes.addClass('class-name')}} es la forma de configurar la clase manualmente.

Tengo un campo de lista para permitir al usuario establecer un color de fondo para una parte del sitio. En Drupal 7 usé este código.

<div class="<?php print render($content['field_background']); ?>">

En Drupal 8, puedo imprimir el campo con {{ content.field_background }}, pero <div class="{{ content.field_background }}">no funciona.

Esto se puede hacer de varias maneras, puede hacerlo todo en la plantilla de nodo con Twig o puede crear una función de preproceso y crear una variable para usar en la plantilla de nodo. La clave para aprender lo que hay en la matriz es usar Devel Kint. Sin eso, no sabrás qué hay en la matriz.

Primero instale Kint que viene con el módulo Devel para Drupal 8. Luego, elija su plantilla de nodo (pero esto se puede hacer en cualquier tipo de plantilla) y examine la variable de contenido de esta manera (idealmente en la parte inferior de la plantilla).

{{ kint (content) }}

A partir de esto, obtenemos información de depuración impresa en la página y si expande la matriz, verá una gran cantidad de información. De inmediato, veo mi valor de fondo y puedo construir una ruta para imprimir esto como

{{ content.field_background[0]['#markup'] }}

Ahora puede imprimir esto como un estilo de fondo o una clase en un div

<div style="background-color: {{ '#' }}{{ content.field_background[0]['#markup'] }};" class="color-{{ content.field_background[0]['#markup'] }}">
<h2>Hello</h2>
</div>

He probado esto y funciona muy bien, el div mostró el color de fondo que había seleccionado en mi lista de campos en la edición de nodos.

Ahora, esto no es ideal, por lo que probablemente queremos crear una variable para esto en un preprocess_node en el archivo .theme de nuestro tema.

function MYTHEME_preprocess_node(&$vars) {
  $vars['bgcolor'] = '#' . $vars['content']['field_background'][0]['#markup'];
}

Ahora que tengo una var creada, es mucho más limpio imprimir esto:

 <div style="background-color: {{ bgcolor }};" >
      <h2>Hello</h2>
    </div>

Una nota para lo anterior, probablemente debería envolver esto con una declaración if para verificar si está vacío o no.

Esto funcionaría o estructuraría la declaración if donde le guste

   {% if bgcolor %}
    <div style="background-color: {{ bgcolor }};" >
      <h2>Hello</h2>
    </div>
    {% endif %}

En una plantilla de nodo, los campos están en {{ content }}. En una plantilla de página no hay una variable de contenido, en cambio hay una variable de página que contiene regiones {{ page.region }}.

Como usted preguntó acerca de la plantilla de la página, no podemos usarla content.

Pero puede usar {{node}} en ambas plantillas. El objeto de nodo siempre está en una plantilla de nodo y en la plantilla de página, cuando la página muestra un nodo.

Entonces esto debería funcionar en ambas plantillas:

<div class="{{ node.field_background.value|clean_class }}">