Personnaliser une vue
Le module Views est très puissant et permet de générer toutes sortes d'affichages de données. Ce n'est pas l'objet de ce post, qui traite de la personnalisation de l'affichage.
Je vais me baser sur la personalisation d'un champ spécifique, pour une vue donnée: en gros, je souhaite afficher sur ma vue (nommons là "bloc_accueil") la date de publication des articles dans un macaron de style calendrier. Cette vue sera un bloc visible uniquement sur la page d'accueil.
1ère étape: création de la vue
Très simple, il faut créer une vue basée sur les champs. On souhaite afficher les champs Titre, Résumé et Date de publication.
La date de publication s'affiche selon le format définit dans la vue, et c'est sur ce formatage qu'on veut intervenir. Par défaut, Drupal affiche la date "en ligne", préformatée (ex: ven 29 mai 2009). Pour placer les éléments dans un macaron, il faut les séparer en blocs: dans le cas présent, je vais récupérer le jour, le mois et l'année.
2ème étape: création du template
Dans l'interface de Views, aller dans Paramètres de base> thème et cliquez sur informations. On voit toutes les suggestions de template possibles pour la vue en cours. Ce qui m'intéresse, c'est le champ Date de publication ayant pour ID "created". En parcourant les suggestions, je choisis le fichier "views-view-field--bloc-accueil--created.tpl.php". Petite explication:
* views-view-field signifie que le template affecte un champ
* bloc-accueil signifie que le template n'affecte que cette vue
* created signifie que le template n'affecte que ce champ
Il y a d'autres possibilités d'affectation qui sont très bien décrites sur http://drupal.org/node/352970
Par exemple, si on veut généraliser cet affichage à toutes les vues, on utilisera comme nom de template "views-view-field--created.tpl.php".
Le fichier sera placé à la racine du dossier du thème (ou dans un sous dossier views pour une meilleure organisation). Voici le code de base du template:
<?php
print $output;
?>Simple, non?
Rajoutons cette ligne avant "print $output" pour récupérer les variables:
drupal_set_message('
' . var_export($row, true) . '
');
Vidage de cache, rafraichissement de la page, et là on voit très bien toutes les variables apparaitre. celle qui m'intéresse est "node_created", qui correspond au timestamp unix de la date. Et avec ça, j'ai tout bon: je modifie mon template:
<?php
$created=$row->node_created;
$output=' <div class="viewcalendar"><div>
<span class="month">'.format_date($created, 'custom', 'M').'</span>
<span class="day">'.format_date($created, 'custom', 'd').'</span>
<span class="year">'.format_date($created, 'custom', 'Y').'</span>
</div></div>';
print $output;
?>Je vais modifier ma feuille de styles pour me rendre compte des changements:
.month{color:red;}
.day{color:yellow;}
.year{color:green;}
On vide le cache et on rafraichit: miracle, j'ai bien ma date qui s'affiche, le mois en rouge, le jour en jaune et l'année en vert.
3ème et dernière étape: le CSS
Tout est segmenté comme on le souhaite, il ne reste plus qu'à injecter un peu de CSS pour créer notre affichage final.
-moz-border-radius-bottomleft:0.4em; /*Arrondis pour les navigateurs basés sur le moteur gecko (toute la famille mozilla)*/
-moz-border-radius-bottomright:0.5em;
-moz-border-radius-topright:0.5em;
-webkit-border-bottom-right-radius:0.5em; /*Arrondis pour les navigateurs basés sur le moteur webkit (safari, chrome)*/
-webkit-border-top-right-radius:0.5em;
-webkit-border-bottom-left-radius:0.4em;
border-bottom:2px groove gray;
border-right:2px groove gray;
float: right;
width: 2.5em;
_margin: 0.5em 0 0 -0.5em; /* IE */
padding: 0 0 0 0;
text-align: center;
}
.viewcalendar span {
display: block;
}
.viewcalendar .day {
font-size: 1.5em;
font-weight: bold;
}
.viewcalendar .month {
font-variant:small-caps;
background-color:#53130F;
color:white;
line-height:1.2em;
-moz-border-radius-topleft:0.3em;
-moz-border-radius-topright:0.3em;
-webkit-border-top-right-radius:0.3em;
-webkit-border-top-left-radius:0.3em;
}
.viewcalendar .year {
font-size: 0.9em;
line-height:1em;
background-color:#e1e1e1;
-moz-border-radius-bottomleft:0.3em;
-moz-border-radius-bottomright:0.3em;
-webkit-border-bottom-right-radius:0.3em;
-webkit-border-bottom-left-radius:0.3em;
}
Et voilà! Les arrondis ne sont pas disponibles sur IE et Opéra (il existe un script permettant de le gérer, ça fera sûrement l'objet d'une note future...). On peut aussi incorporer des images de fond... chacun fait sa sauce comme bon lui semble!
Le résultat en image:
Liens utiles sur le module Views:
http://www.group42.ca/theming_views_2_the_basics
http://drupalsn.com/learn-drupal/drupal-tutorials/drupal-theme-function-...
