Autopsie d'un gabarit

Ce billet décrit la création du  gabarit "block--tagclouds.html.twig" du site qui a pour objectif l'affichage personnalisé des mots-clés définis grâce au module "tagclouds".
Pour cela, sur mon site de développement, j'ai

• paramétré le mode "debug" ;
• installé le module twig_vardumper

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().

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 gabarit peut être utilisé pour afficher les données du bloc.

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.

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"
• 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. Son objectif est l'affichage du contenu de la variable "tags"

{{ content[0] }}

qui affiche le contenu de 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"

Ajoutons les lignes

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

qui ajoute à la liste des mots clé  :

• un lien ( le contenu de la variable d'index "#title" de content[1] (le tableau index "1" du tableau "content" ) ;
• et son 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é :

    {% block content %}
        <div class="dh_tagclouds">
            <div>
               {{content[0]}}
            </div>
           <div>
               </br>
               <a href="{{content[1]["#url"]}}">
                   <img src="http://localhost/themes/custom/dhv4/css/images/plus.png"
                        alt="{{content[1]['#title']}}" height="20" width="50">
               </a>
           </div>
        </div>
    {% endblock %}

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

La classe "dh_tagcloud" se résume à :

.dh_tagclouds {
          display : flex;
}

Version finale du fichier :

Il ne reste qu'à ajouter un titre au bloc. Celui-ci est le contenu de la variable "label".

    {% if label %}
        <h2>{{ label }}</h2>
    {% endif %}

Encadrons finalement l'ensemble du code par les balises <section> et <\section>

La version finale du fichier se trouve dans l'onglet ci-dessous.