Habiller la page "Chronique" (node)

Traduction de l'article de David Newkerk : Theming the full Article pages (nodes)


Bien que le fichier page.tpl.php de votre thème soit le gabarit de « plus haut niveau » qui assure la mise en page globale de tout votre site et reste cohérent, par défaut, pour toutes ses pages, il existe plusieurs fichiers gabarits spécifiques (templates) qui s'occupent chacun de la mise en page de sous-ensembles qui se trouvent « à l'intérieur » de page.tpl.php, ces sous-ensembles étant les différents contenus qui apparaissent sur chaque page du site. Pour ce qui est du sous-ensemble contenus, le fichier gabarit chargé de leur mise en page des contenus s'appelle node.tpl.php.

Créer un fichier node.tpl.php pour le contenu Chronique

Ce guide utilise le thème Garland à titre de démonstration, mais vous pouvez tout à fait utiliser votre propre thème si vous le préférez.

Une des forces du système de thèmes de Drupal est de pouvoir créer des versions de gabarits différentes qui ne s'appliqueront qu'à un Type de Contenu et pas à d'autres. Puisque le but de ce guide est d'habiller les pages "Chronique" différemment des autres pages du site, cette caractéristique est assurément une fonctionnalité utile.

  1. Pour réaliser cela, rendez-vous dans le dossier de votre thème... Dans cet exemple il s'agit du dossier themes/Garland (si vous utilisez votre propre thème, il se trouvera sans doute dans sites/all/themes/votre-theme)

  2. Trouvez le fichier node.tpl.php, copiez-le et renommez-le en node-chronique.tpl.php.

    Remarque : en procédant ainsi,vous pouvez réaliser un gabarit de mise en page personnalisé pour chaque Type de Contenu que vous aurez créé. Copiez simplement le fichier node.tpl.php et renommez-le en ajoutant dans le nom de fichier le -nom_du_type_de_contenu après le mot node. Pour les Types de contenus dont le nom est composé de plusieurs mots, séparez chaque mot par un underscore _ .

  3. Tapez un petit bout de texte n'importe où dans votre nouveau gabarit personnalisé, sauvegardez le fichier et visitez la page Chronique - Drupal détecte immédiatement le nouveau gabarit et l'utilise pour le contenu Chronique en lieu et place du gabarit par défaut (vous devriez voir s'afficher votre petit bout de texte).

    Si votre petit bout de texte ne s'affiche pas bien que vous ayez fidèlement suivi les étapes précédentes, essayez d'aller dans Administrer > Configuration du site > Performance (admin/settings/performance) et cliquez sur le bouton "Supprimer les données du cache" pour vider le registre de thèmes.

Personnaliser la mise en page de node-chronique.tpl.php

Voici une copie d'écran avant/après la personnalisation pour illustrer à quoi ressemblait la page Chronique et à quoi elle ressemble une fois sa mise en page effectuée.

[insert screenshot image]

Eh non ! Il n'y a pas d'image dans l'article de David Newkerk !

Ouvrez le fichier node-chronique.tpl.php que vous venez de créer et localisez <?php print $content ?> dans le code. C'est cette variable qui afficher presque tous les champs de contenu dans la page (l'exception étant le Titre du node qui est habituellement affiché par le gabarit de mise en page page.tpl.php).

<?php print $content ?> affiche la combinaison du champ Body du node et de tous vos champs CCK ajoutés.

Puisque notre but consiste à obtenir plus de souplesse dans l'affichage HTML des champs CCK du type de contenu Chronique, nous devons « éclater » la variable $content pour obtenir chacun des champs qui la compose, au lieu d'avoir une variable globale sur laquelle on ne peut pas agir.

Si vous le souhaitez, le module Contemplate sera un outil pratique pour regarder « l'intérieur » de la variable $content et prélever le code des champs que vous voudrez copier-coller dans votre fichier gabarit de mise en page. Pour utiliser Contemplate, reportez-vous au guide Contemplate (guide en anglais).

Cependant, l'utilisation de Contemplate n'est pas toujours nécessaire (et elle est de plus assez pesante). Copiez simplement les bouts de code qui suivent et vous pourrez ainsi, dans la plupart des cas, les utiliser dans d'autres gabarits de Type de contenus en changeant uniquement leur nom. Bien entendu, il n'est pas gênant de disposer de Contemplate pour les cas où certains types de champs utiliseraient un code différent de celui qui suit.

Ajouter des champs individuellement dans node-chronique.tpl.php

On utilisera plusieurs bouts de code pour remplacer la variable $content. Ils produiront pratiquemment le même affichage avec en plus la possibilité de pouvoir contrôler directement l'apparence de chaque champ.

  1. Commencez par copier-coller la ligne suivante dans votre fichier node-chronique.tpl.php, en remplacement de la ligne . La nouvelle ligne affichera seulement le champ Body (vous remarquerez que le code pour afficher le champ Body est légèrement différent de celui pour afficher les champs CCK)

    <?php
    print $node->content['body']['#value'
    ?>

    Attention : bien que ['#value'] soit utilisé ici, il ne doit jamais l'être avec d'autres champs, à moins que vous ne sachiez sécuriser cet usage (par exemple, en utilisant la fonction check_plain(). Les autres champs doivent toujours utiliser ['view']

  2. Ajoutez ensuite le champ Sous-titre Chronique (field_chronique_subtitle), juste au-dessus de la ligne (vous remarquerez qu'une balise div encadre le champ field_chronique_subtitle, cela facilitera plus tard sa personnalisation avec des CSS) :

    <div id="article-subtitle">
      <?php print $node->field_article_subtitle[0]['view'] ?>
    </div>
  3. Vous pouvez ajouter d'autres champs CCK de la même façon qu'à l'étape 2. Copiez-collez simplement le code précédent en changeant le nom du champ (vous utiliserez toujours le nom-machine du champ, vous pouvez le retrouver en allant dans Administrer > Gestion du contenu > Types de contenus et en cliquant sur le lien Gérer les champs de la ligne Chronique (deux autres chemins directs pour y accéder : admin/content/types/fields, cela affiche tous les champs. Et admin/content/node-type/chronique/fields, cela n'affiche que les champs du type Chronique). Les noms des champs sont indiqués dans la colonne Nom ou Nom du champ, selon le mode d'accès que vous aurez choisi.

    Lorsque vous créez un champ, le préfixe field_ est automatiquement ajouté au nom que vous lui donnez. N'utilisez pas le nom figurant dans la colonne "Étiquette"

    Par exemple, si dans votre type de contenu vous avez un champ appelé field_drupal_rules, vous changerez field_chronique_subtitle en field_drupal_rules. C'est souvent suffisant mais il y aura des cas où vous aurez sans doute besoin de Contemplate pour trouver le code (ou de Devel le cas échéant, si vous le préférez). Veillez à doter chaque champ d'un ID CSS unique, ou d'une classe CSS, placés dans une balise div ou span, puisque cela vous facilitera ensuite leur personnalisation.

    Champs à valeurs multiples

    Si vous devez ajouter un champ CCK qui a des valeurs multiples, vous pouvez utiliser le bout de code suivant, en modifiant juste le nom du champ (n'hésitez pas à personnaliser ou à enlever la balise div) :

    <?php foreach ((array)$field_drupal_rules as $item) { ?>
      <div class="field-item"><?php print $item['view'] ?></div>
    <?php } ?>

    Ajouter l'étiquette d'un champ

    Lorsque vous disposez manuellement un champ CCK dans votre gabarit, son étiquette n'est pas affichée par défaut (il n'y a que le contenu du champ lui-même qui est affiché). Voici un exemple pour afficher l'étiquette :

    <?php print $node->content['field_drupal_rules']['field']['#title'] ?>

Personnaliser "Soumis par..."

Dans votre fichier node-chronique.tpl.php, la ligne contient produit l'affichage de "Soumis par...". Par défaut, ce texte ressemble à quelque chose comme :

Soumis par kolossaldrupal le mar, 14/07/2009 - 14:00

(le format de la date dépend des paramètres de admin/settings/date-time)

Si vous souhaitez seulement enlever l'heure de cette ligne, allez jeter un œil à cet excellent article qui concerne aussi bien Drupal 5 que Drupal 6 : No time of day in node date (descendez jusqu'à la ligne To modify the medium-size format for dates… qui se trouve avant la première copie d'écran). Dans Drupal 6 vous pouvez allez dans Administrer > Configuration du site > Date et heure (admin/settings/date-time), alors qu'avec Drupal 5 vous aurez besoin de copier-coller du code dans votre thème.

Si vous voulez une personnalisation plus poussée de $submitted, vous devrez placer un peu de code. Si vous voulez que $submitted ressemble plutôt à ceci : Publié le 14 Juillet 2009 par Username, remplacez avec le code suivant :

<?php
<span class="submitted"><?php print t('Publié le ') . format_date($node->created'custom'"jS F Y") . t(' par ') . theme('username'$node); ?></span>
?>

Avec des connaissances élémentaires sur la concaténation de chaînes en PHP (c'est plus compliqué à lire qu'à faire) vous pourrez réorganiser le code et les termes pour arriver à vos fins. La clé de tout cela réside dans le point ( . ) qui s'intercale entre chaque partie du code.

La méthode précédente marche aussi dans Drupal 6 mais vous pouvez aboutir au même résultat pour chacun de vos types de contenus, en une seule étape et pour tout le site, en collant le code suivant dans le fichier template.php de votre thème (ou en modifiant la fonction si elle existe déjà dans votre thème - Garland en a une - car il ne peut pas y avoir deux fois la même fonction) :

<?php
function phptemplate_node_submitted($node) {
  return 
t('Soumis par !username le @datetime',
    array(
      
'!username' => theme('username'$node),
      
'@datetime' => format_date($node->created),
    ));
}
?>

Dans la ligne return t('Soumis par !username le @datetime', réorganisez !username et @datetime comme vous le souhaitez. Vous pouvez aussi personnaliser le format de la date en substituant $node->created, 'custom', "jS F Y" à $node->created (vous pouvez indiquer n'importe quel autre format de date PHP.

Si vous voulez enlever complètement la ligne $submitted (dans le cas où vous n'en voudriez pas dans toute la page), vous pouvez soit effacer la ligne $submitted du fichier node-chronique.tpl.php, soit la désactiver pour le type de contenu Chronique dans admin/build/themes/settings, rubrique Afficher l'auteur et la date de la contribution pour les types.