Spécifier pour Drupal : templates

Drupal et sa communauté fournissent de nombreux systèmes de templates plus ou moins complexes et plus ou moins imbriqués les uns aux autres. Le but de cet article n'est pas de les décrire mais d'expliquer comment spécifier fonctionnellement les templates d'un projet Drupal.

Cet article est certainement le plus discutable de la série dans la mesure où les précédents articles évoquent des pratiques et habitudes qui n'ont jamais posées problème sur aucun projet (plus d'une centaine de spécifications Drupal, notamment sur de gros projets internationaux).

En revanche, ma technique de description des templates est souvent critiquée. En général, les développeurs ne se plaignent pas trop ou adhèrent carrément. En revanche, certains chefs de projet (fonctionnels, d'agence, etc.) considèrent que je rentre trop dans le détail ou utilise une notation incompréhensible.

A vous de juger. Et si vous estimez avoir une meilleure solution, je suis preneur !

Le principe

Le principe est assez simple. En début de projet, vous avez identifié une liste exaustive de templates. Certains templates correspondent à des types de contenu (article, fiche produit par exemple), d'autres sont plus complexes et mixent plusieurs types de contenus, asset, etc. C'est en général le cas de la page d'acceuil et des autres pages intermédiaires.

Le but est de décrire les wireframes ou les PSDs validés par le client en utilisant soit les labels (pas idéal) soit les champs machines (idéal) spécifiés lors des précédentes étapes.

Mais avant de rentrer à ce niveau de détail, l'idéal est d'identifier tous les composants du template. Cela revient un peu à lister tous les panes d'un Panel.

Découpage du template

Par exemple, pour ce template, nous avons les composants suivants :

• Header
• Menu
• Folder
• Search
• Ads 1
• Popular
• Ads 2
• Footer

L'idée est maintenant de décrire chaque composant ou composant de composant spécifique au template.

Les éléments récurrents tels que header, menu, footer... sont décrits une fois pour toute et on s'y réfère via une cross-reference.

Notation des champs

Ma notation se base plus ou moins sur les tokens de Drupal. Par exemple, pour décrire le champ titre du type de contenu article :

[article:title]

Prenons un cas plus complexe pour pousser un peu la logique. Par exemple, pour décrire l'image d'un article listé dans un dossier cela donne :

[folder:articles:article:article_image:image:asset_image_file]

Où :

• folder : le type de contenu en cours de description
• articles : le champ référençant les articles du dossier
• article:article_image : le champ image de l'article qui est en fait un champ référenceant une asset
• image:asset_image_file : le champ de l'asset utilisé dans l'article

Je l'avoue, ça peut paraître compliqué de prime abord. Mais si vous connaissez Drupal, cela devrait vous parler.

Notation des vues

Comme vous le savez, Drupal utilise le module Views pour créer les listes, les blocs, les panes... bref tout ce que l'on voit en front office.

Pour décrire les vues, l'idéal est d'utiliser une pseudo requête (je ne sais pas quel nom donner à mon charabia).

Par exemple, pour décrire la liste d'articles du dossier :

List of articles filtered by [article:published] == Yes && [folder:articles], sorted by [folder:articles].

Imaginons un site en plusieurs langues qui proposerait une liste d'articles classés par tags :

List of articles filtered by [article:published] == Yes && [article:language] == Current && [article:article_tags] == Current, sort by [article:post_date] == DESC, limit 10, with pager (full).

Exemple complet

Dans cet exemple, nous avons :

• Header
• Menu
• Folder
• Search
• Ads 1
• Popular
• Ads 2
• Footer

Dans folder, nous avons les éléments propres au dossier et une liste d'articles.

Folder

• [folder:title]
• [folder:media:image:asset_image_file]
• [folder:body]
• [folder:articles]

Media behavior: On hover, change opacity from 100% to 50%. On click, open media in a lightbox.

Articles behavior: On hover, change opacity of the image from 100% to 50% + underline title. On click, open the article (target = self)

• List of articles filtered by [article:published] == Yes && [folder:articles], sorted by [folder:articles].

For each article:

• [folder:articles:article:article_image:image:asset_image_file]
• [folder:articles:article:title]

Search

See Templates > Sidebar > Pans

Ads 1

See Templates > Sidebar > Pans

Popular

See Templates > Sidebar > Pans

Ads 2

See Templates > Sidebar > Pans

Ressources

• User interface standards
• How the Drupal theme system works