Créer un gabarit

Le module "twig_vardumper" permet la découverte et l'analyse de façon extrément conviviale des variables disponibles dans un bloc "drupal". Il fournit la fonction vardumper() que  l'on utilisera en lieu et place de  dump(_context|keys) 

Comme indiqué sur la page /GererSite/Theming/Gabarit, une inspection du code (par exemple avec les outils de développement de firefox), illustrée par l'image ci-dessous, nous indique quel(s) gabarit(s) peu(ven)t être utilisé(s) pour afficher les données.

Par conséquent, j'ai choisi de créer le fichier "block--tagclouds.html.twig" que je place dans le dossier templates/block de mon thème.

Il est également possible de copier le fichier indiqué à la suite de "<!--BEGIN OUTPUT from" depuis un thème existant ou un module du coeur puis de le modifier selon ses besoins. Pensez à vider les caches pour visualiser vos modifications. 

 Ces gabarits figurent dans la variable "theme_hook_suggestions". Pour les visualiser, on peut aussi insérer ce code dans le gabarit que l'on analyse : 

<p>les themes possibles sont :  
       <ol>   
         {% for key, value in theme_hook_suggestions  %}   
            <li>{{ theme_hook_suggestions[key]}}</li>  
          {% endfor %}  
      </ol>   
</p>

 

Lire la documentation officielle.

Version 0 du fichier :

La version 0 de mon fichier était réduite à la seule ligne de code

{{vardumper()}}

qui affiche, comme le montre la figure ci-dessous la liste (array) des 21 variables disponibles dans ce bloc.

Dans ce tableau à 21 entrées je vais utiliser :

• label : le "nom du bloc" tel que défini lors de sa mise en place dans "structure-mise en place des blocs" qui vaut "mots clé (etude)"
• content : le contenu du bloc. Cette variable a , elle aussi, la structure "array". Elle a 3 entrées

Un clic sur le triangle détaille ces 3 entrées (cf figure ci-contre) :

• "#attached" : un tableau à 1 entrée
• "0" : un tableau à 1 entrée identifiée "tags"
  • "tag"  est un tableau à 20 entrées
• "1": un tableau à 3 entrées
  • #type
  • #title
  • #url

Version 1 du fichier :

la version 1 de mon fichier était réduite à la seule ligne de code ci-dessous  qui produit l'affichage du contenu du tableau "tags"

{{ content[0] }}

qui est bien la variable d'index "0" du tableau "content" .    
Il s'agit bien de la liste des mots clé (liste réduite à la taille  qui est configurée dans "structure-mise en place des blocs" pour le bloc "mots clé".

Ajoutons les lignes de code

</br> {{ content[1]["#url"]}}   
</br> {{ content[1]["#title"]}}   
 

qui ajoute à la liste des mots clé  :

• une URL ( le contenu de la variable d'index "#title" de content[1] (le tableau index "1" du tableau "content" ) ;
• et un titre ( le contenu de la variable d'index "#url" de content[1].

Version 2 du fichier :

Une légère mise en forme produit l'affichage souhaité :

  1.  {% block content %}   
  2.    <div class="dh_tagclouds">   
  3.        <div>   
  4.           {{content[0]}}   
  5.       </div>   
  6.     <div>   
  7.      </br>   
  8.       <a href="{{content[1]["#url"]}}">   
  9.              <img src="http://localhost/themes/custom/dhv4/css/images/plus.png"   
 10.                      alt="{{content[1]['#title']}}" height="20" width="50">   
 11        </a>   
 12.        </div>   
 13.     </div>   
 14. {% endblock %}

En ligne 4,  on retrouve l'affichage de la liste des mots clé.   
En lignes 8 à 11,  l'affichage du lien sous forme d'une image

La classe "dh_tagcloud" se résume à :

.dh_tagclouds {   
          display : flex;   
}