Accueil / Blog / Métier / 2015 / Développer avec Twig dans Drupal 7

Développer avec Twig dans Drupal 7

Par Sébastien Corbin publié 25/06/2015
Utiliser Twig dans Drupal 7, c'est possible ! Découvrez comment prendre de l'avance sur Drupal 8, et utiliser dès à présent le moteur de template intégré dans la future version du CMS.
Développer avec Twig dans Drupal 7

Introduction

Le système de "template engine" existe dans Drupal depuis la version 4.6, mais a été très peu utilisé car la majorité des thèmes de la communauté et des thèmes de base utilisent le moteur par défaut depuis la 4.7, PHPtemplate.

Pourtant, quelques intégrations ont vu le jour :

  • Smarty
  • PHPTal
  • XSL
  • ETS
  • Haml

Et maintenant Twig !

Quelques rappels sur la syntaxe Twig

Twig offre une syntaxe plus légère que la syntaxe PHPTemplate, il y a essentiellement 3 tags à retenir :

  • {{ }} pour afficher une variable ou une expression
  • {% %} pour les opérations logiques
  • {# #} pour les commentaires

La documentation complète est disponible sur http://twig.sensiolabs.org/doc/templates.html

Affichage de variables

Oubliez les flèches et les crochets avec guillemets dans :

<?php echo $node->field_monchamp['und'][0]['entity']->title; ?>

Vous pouvez maintenant utiliser des points sous la forme :

{{ node.field_monchamp.und.0.entity.title }}

Bien entendu, vous n'êtes pas censés afficher les valeurs brutes d'un noeud dans un template mais plutôt faire un render des render arrays retournés par les formateurs de champs. Pour faire simple, au lieu de :

<?php echo render($content['field_monchamp']; ?>

vous écrirez :

{{ content.field_monchamp }}

Structures logiques

Avec PHPTemplate, vous éviter les warning ou notice lorsqu'on essaie d'afficher une variable ou un clé d'index qui n'existe pas, on est obligé de faire :

<?php if(!empty($content['field_monchamp'])): ?>

Avec Twig, vous pouvez simplement écrire :

{% if content.field_monchamp %}

qui se ferme avec :

{% endif %}

Les boucles foreach :

<?php foreach($content['field_monchamp'] as $item): ?>

se transforment en :

{% for item in content.monchamp %}

et se finissent par :

{% endfor %}

Dans cette boucle, vous avec accès à l'index courant en affichant :

{{ loop.index }}

ou tester par exemple le premier item avec :

{% if loop.first %}

Fonctions

Des fonctions sont disponibles comme l'inclusion d'autres templates avec :

{{ include('template.html', {mavariable: 'savaleur'}) }}

Ou l'affichage d'une variable avec :

{{ dump(variable) }}

Notez que si Devel est activé, vous aurez son contenu dans un bloc Krumo.

Filtres

Les filtres s'appliquent sur des variables, les plus notables sont :

  • date qui convertit un timestamp ou une date texte selon un format spécifié :

    {{ node.created|date("m/d/Y") }}

  • length qui retourne la longueur d'un tableau ou d'une chaîne :

    {{ tableau|length }}

  • trim qui enlève les espaces en début et fin de chaîne

  • replace qui remplace des partie de chaînes.

Installation

TFD7

Le projet de theme engine est hébergé sur Github, sa documentation est sur http://tfd7.rocks/, ce thème engine a pour dépendance le module X-Autoload et Libraries API, et la librairie Twig disponible sur Github.

Une fois téléchargé, vous pouvez soit lancer le fichier post-install.php qui vous mettra les dossiers au bon endroit, ou bien déplacer engines dans sites/all/themes et renommer pour avoir le chemin sites/all/libraries/TFD/TFD

drush en libraries xautoload -y
cd sites/all/libraries
wget https://github.com/twigphp/Twig/archive/v1.18.2.tar.gz
untar v1.18.2.tar.gz
mv Twig-1.18.2 Twig
git clone https://github.com/TFD7/TFD7.git
mv TFD7 TFD
mv TFD7/engines ../themes

Mise à jour 08/12/2016:

Nous vous conseillons dorénavant d'utiliser Composer pour gérer vos paquets Drupal.

Puis vous pouvez ajouter la propriété dans le .info de votre thème

engine = twig

Vous pouvez ensuite créer les fichiers de templates '.tpl.twig' dans celui-ci.

Particularité des base theme (exemple de Bootstrap)

Actuellement il est impossible qu'un base theme ait un theme engine différent du sous-thème, c'est toujours le theme engine du thème de base qui sera pris en compte (voir ce ticket).

Pour fonctionner avec un thème de base tel que Bootstrap, il faut donc tricher en altérant le theme engine de celui-ci :

/**
 * Implements hook_system_info_alter().
 */
function monmodule_system_info_alter(&$info, $file, $type) {
  // Tweak bootstrap so it would be considered as a twig-based theme.
  if ($type == 'theme' && $info['name'] == 'Bootstrap') {
    $info['engine'] = 'twig';
  }
}

Seule problématique, les fichiers '.tpl.php' de Bootstrap ne seront plus pris en compte, mais la liste est relativement courte, surtout si vous vous destinez à faire un thème frontend

./bootstrap/theme/block/block-admin-display-form.tpl.php
./bootstrap/theme/block/block.tpl.php
./bootstrap/theme/bootstrap/bootstrap-modal.tpl.php
./bootstrap/theme/bootstrap/bootstrap-panel.tpl.php
./bootstrap/theme/search/search-block-form.tpl.php
./bootstrap/theme/system/html.tpl.php
./bootstrap/theme/system/page.tpl.php
./bootstrap/theme/system/progress-bar.tpl.php

Voici les principaux template de base convertis ou vous pouvez tester notre convertisseur PHPTemplate vers Twig, c'est gratuit :)

Attention : Bootstrap corrompt le theme registry dans la version 7.x-3.1, donc vous devrez travailler avec la version 3.0 (voir https://www.drupal.org/node/2624216).

N'hésitez pas à contribuer au projet si vous rencontrez des bugs, vous pouvez aussi approfondir le sujet en participant à nos formations Drupal theming.

ABONNEZ-VOUS À LA NEWSLETTER !
Voir aussi
Varnish et Drupal 9 : le vidage de cache ciblé Varnish et Drupal 9 : le vidage de cache ciblé 31/12/2020

La mise en place d'un cache de pages anonymes Varnish devant un Drupal 9 permet une mise en place ...

Varnish et Drupal : gérer un cache anonyme étendu Varnish et Drupal : gérer un cache anonyme étendu 14/03/2018

Le rôle d'un Reverse Proxy Cache Varnish dans une architecture Web (type Drupal).

Migration d'un site Drupal 7 en Drupal 9 Migration d'un site Drupal 7 en Drupal 9 31/12/2020

Trucs, astuces et bouts de code pour migrer votre site web de Drupal 7 à Drupal 9

Sortie de Drupal 9 : préparez-vous ! Sortie de Drupal 9 : préparez-vous ! 28/05/2020

Dans quelques jours, le 3 juin 2020, aura lieu la sortie de Drupal 9 en version stable. À quels ...

Résolution de problèmes Drupal : construction de site (2/4) Résolution de problèmes Drupal : construction de site (2/4) 09/08/2013

Dans cette série d'articles, nous tentons de vous aider à vous sortir seuls de situations ...