Utilisation d'une valeur de champ comme attribut Twig

J'ai besoin de définir une valeur de champ comme classe CSS dans un modèle de page. Comment puis-je le faire à la manière de Twig?

{{attributes.addClass('class-name')}} est le moyen de définir la classe manuellement.

J'ai un champ de liste pour permettre à l'utilisateur de définir une couleur d'arrière-plan pour une partie du site. Dans Drupal 7, j'ai utilisé ce code.

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

Dans Drupal 8, je peux imprimer le champ avec {{ content.field_background }}, mais <div class="{{ content.field_background }}">cela ne fonctionne pas.

Cela peut être fait de plusieurs manières, vous pouvez tout faire dans le modèle de nœud avec Twig ou vous pouvez créer une fonction de prétraitement et créer une variable à utiliser dans le modèle de nœud. La clé pour apprendre ce qui est dans le tableau est d'utiliser Devel Kint. Sans cela, vous ne saurez pas ce qu'il y a dans le tableau.

Installez d'abord Kint qui est fourni avec le module Devel pour Drupal 8. Ensuite, choisissez votre modèle de nœud (mais cela peut être fait dans n'importe quel type de modèle) et examinez la variable de contenu comme cela (idéalement au bas du modèle).

{{ kint (content) }}

De cela, nous obtenons des informations de débogage imprimées sur la page et si vous développez le tableau, vous verrez toute une série d'informations. Tout de suite, je vois ma valeur d'arrière-plan et je peux construire un chemin pour l'imprimer comme

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

Vous pouvez maintenant l'imprimer en tant que style ou classe d'arrière-plan dans un div

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

J'ai testé cela et cela fonctionne très bien, le div a rendu la couleur d'arrière-plan que j'avais sélectionnée dans ma liste de champs lors de la modification du nœud.

Maintenant, ce n'est pas idéal, donc nous voulons probablement créer une variable pour cela dans un preprocess_node dans le fichier .theme de notre thème.

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

Maintenant que j'ai créé un var, il est beaucoup plus propre d'imprimer ceci:

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

Une note pour ci-dessus, vous devriez probablement envelopper cela avec une instruction if pour vérifier si elle est vide ou non.

Cela fonctionnerait ou structurerait l'instruction if là où vous l'aimez

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

Dans un modèle de nœud, les champs sont dedans {{ content }}. Dans un modèle de page, il n'y a pas de variable de contenu, mais une variable de page qui contient des régions {{ page.region }}.

Puisque vous avez posé des questions sur le modèle de page, nous ne pouvons pas l'utiliser content.

Mais vous pouvez utiliser {{node}} dans les deux modèles. L'objet nœud est toujours dans un modèle de nœud et dans le modèle de page, lorsque la page affiche un nœud.

Cela devrait donc fonctionner dans les deux modèles:

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