Aller au contenu principal


Le bloc "Créé le :"

Pour réaliser les blocs "Billet créé le :"  dans mes billets (par exemple ceux de type de contenu "billet_systeme" dont cette page fait partie), je procède en 2 phases. 
La 1ère suit les 3 étapes illustrées dans l'image ci-dessous :

  1. je clique sur le lien "ajouter un bloc" à l'intérieur d'une de ses sections layout-builder (par exemple : la section "Introduction") ;
  2. dans la liste des blocs, je développe l'onglet "champs de contenu" ;
  3. je clic sur le bloc "écrit le" puis je choisis l'affichage personnalisé "d M Y".

La seconde peut s'écrire selon 2 versions décrites les paragraphes ci-dessous.

 

Billet créé le :
20 jan 2023
Cliquer pour agrandir l'image

Comme indiqué sur l'image, ce bloc est produit par l'éxécution du template "field--node--created.html.twig" disponible, par exemple, dans "core\themes\stable9\templates\field" d'une installation standard de Drupal. Je l'ai copié dans le dossier templates/field de mon  thème.

 

Version "sans preprocess"

Pour cette version, moins "propre" que celle présentée dans le paragraphe suivant, j'ai modifié le code d'origine comme indiqué ci-dessous pour styliser le bloc et scinder la date en 2 parties.

La balise "section role="dateCreationNode" me permet de styliser.
La variable  items[0]["content"][#markup"] me fournit la date de création.

<section role="dateCreationNode">  
   <div>  
   Billet créé le :  
    </div>  
    <div>  
        <span{{ attributes }}>          
                {{ items[0]["content"]["#markup"]|slice(0, 2) }}  
        </span>  
        <span{{ attributes }}>          
                {{ items[0]["content"]["#markup"]|slice(3, length) }}  
        </span>  
    </div>  
</section>

 

 La fonction twig "slice" placée à la suite du pipe | me permet de découper la chaîne de caractères qui précédé le pipe, à savoir : la date de création.

  • slice(0,2) qui rend les 3 premières lettres ;
  • slice(3, length) pour le reste de la date.

 

Version avec preprocess

Cette version nécessite la définition de la fonction "preprocess" dh_preprocess_field__node__created() qui doit figurer dans le fichier .theme de mon thème donc dans dh.theme

Dans Drupal, une telle fonction est exécutée avant l'affichage du gabarit ou template. La fonction dh_preprocess_field__node__created()  sera donc exécutée avant field--node--created.html.twig. Remarquez que la syntaxe de son nom est très proche de celle du gabarit, elle colle le nom du thème (ici dh) à "_preprocess_" et au nom du gabarit dans lequel les "-" sont remplacés par des "_"

Dans mon exemple, le rôle de cette fonction est de sécuriser l'affichage en testant l'existence (usage de "isset" ) des données et de fournir les variables jourCreated et moisAnCreated au gabarit "field--node--created.html.twig" .

function dh _preprocess_field__node__created(&$variables) {         
 /*dump($variables);*/         
 if (isset ($variables['items'][0]["content"]["#markup"])){         
     $temp= $variables['items'][0]["content"]["#markup"];         
     $variables['jourCreated'] = substr($temp,0,2);         
     $variables['moisAnCreated'] = substr($temp,3);         
 }         
 else {         
     $variables['jourCreated'] = "00";         
     $variables['moisAnCreated'] = "MmM YYYY";         
 }         
}

Les fonctions "preprocess" sont écrite en php d'où l'emploi de substr() à la place de la fonction twig slice(). Sinon, on manipule bien les mêmes éléments que dans le paragraphe précédent.

Le fichier du gabarit devient :

<section role="dateCreationNode">         
   <div>         
   Billet créé le :          
    </div>         
    <div>         
        <span{{ attributes }}>                 
                {{ jourCreated }}         
        </span>         
        <span{{ attributes }}>                 
                {{ moisAnCreated }}         
        </span>         
    </div>     
</section>

Ci dessous figure le code CSS pour styliser ce bloc.

Cliquez sur le bouton pour copier le code 
dans le presse papier  

section[role="dateCreationNode"]{
   display:flex;
flex-direction: column;
float:right;
width: 8em;
   height: 80px;
   overflow: hidden;
   padding: 0em 0em 0em 1em;
margin: 0px 5px 7px 5px;
background-color: rgb(235, 249, 198);
}
section[role="dateCreationNode"] div {
   text-decoration: underline;
}
section[role="dateCreationNode"] div + div {
   display:flex;
flex-direction: row;
text-decoration: aliceblue;
}
section[role="dateCreationNode"] span {
font-size: 4em;
   font-family: 'oswaldregular';
text-align: center;
line-height: 1.2;   
}
section[role="dateCreationNode"] span + span {
   text-transform: uppercase;
   font-size: 1.2em;
   padding: 12px 5px 1px 1px;
}

 

J'ai procédé à l'identique pour le bloc "dernière MAJ" créé à partir de "modifié" disponible dans les champs de contenu et du template "field--node--changed.html.twig