Utilizzo di un valore di campo come attributo Twig

Devo impostare un valore di campo come classe CSS in un modello di pagina. Come posso farlo nel modo Ramoscello?

{{attributes.addClass('class-name')}} è il modo di impostare manualmente la classe.

Ho un campo elenco per consentire all'utente di impostare un colore di sfondo per una parte del sito. In Drupal 7 ho usato questo codice.

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

In Drupal 8, posso stampare il campo con {{ content.field_background }}, ma <div class="{{ content.field_background }}">non funziona.

Questo può essere fatto in diversi modi, puoi fare tutto nel modello di nodo con Twig oppure puoi creare una funzione di pre-elaborazione e creare una variabile da usare nel modello di nodo. La chiave per apprendere ciò che è nell'array è usare Devel Kint. Senza quello, non saprai cosa c'è nell'array.

Per prima cosa installa Kint che viene fornito con il modulo Devel per Drupal 8. Successivamente, scegli il tuo modello di nodo (ma questo può essere fatto in qualsiasi tipo di modello) ed esamina la variabile di contenuto in questo modo (idealmente nella parte inferiore del modello).

{{ kint (content) }}

Da questo, otteniamo le informazioni di debug stampate sulla pagina e se espandi l'array, vedrai un'intera serie di informazioni. Vedo subito il mio valore di sfondo e posso costruire un percorso per stamparlo come

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

Ora puoi stamparlo come sfondo o classe in un div

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

Ho provato questo e funziona alla grande, il div ha reso il colore di sfondo che avevo selezionato nella mia lista di campi sulla modifica del nodo.

Ora questo non è l'ideale quindi probabilmente vogliamo creare una variabile per questo in un preprocess_node nel file .theme del nostro tema.

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

Ora che ho creato un var, è molto più pulito stamparlo:

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

Una nota sopra, probabilmente dovresti racchiuderla con un'istruzione if per verificare se è vuota o meno.

Questo funzionerebbe o strutturerebbe l'istruzione if dove ti piace

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

In un modello di nodo sono presenti i campi {{ content }}. In un modello di pagina non è presente alcuna variabile di contenuto, ma esiste una variabile di pagina che contiene aree {{ page.region }}.

Poiché hai chiesto informazioni sul modello di pagina, non possiamo utilizzarlo content.

Ma puoi usare {{node}} in entrambi i modelli. L'oggetto nodo si trova sempre in un modello di nodo e nel modello di pagina, quando la pagina visualizza un nodo.

Quindi questo dovrebbe funzionare in entrambi i modelli:

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