Il y a quelques jours, je discutais avec EclipseGC de son module imagefield gallery et des fonctions à venir pour la sortie de la version Drupal 6. Évidemment, deux accros de Drupal comme nous ne peuvent pas parler plus de 2 minutes sans que Views 2 soit mentionné à un moment donné. Mais cette fois, Kris a décrit une technique pour créer un système de galerie d'images Ajax avec Views, d'une façon assez simple et géniale. Je pense qu'il tient ce truc de Quicksketch, qui lui-même a dû le recevoir directement de Dieu, tellement c'est simple et beau.
[Captures d'écran incluses à l'origine tout au long de ce tutoriel.]
Je me suis senti vraiment bête de ne jamais y avoir pensé avant, et maintenant c'est votre tour de vous sentir bête... voici comment ça fonctionne :
Pour ce système de galerie, il vous faut :
- Drupal 6
- Views 2
- CCK
- Imagefield
- Imagecache (facultatif... mais Imagecache est-il vraiment facultatif?), qui nécessite aussi le module ImageAPI
Le concept est le suivant : un type de contenu doté d'un champ image à valeurs multiples, masquées dans le nœud et listées dans un bloc de vue que vous pouvez afficher où vous voulez.
CCK
Donc, d'abord, bien sûr, installez tous les modules requis. Une fois qu'ils sont tous installés et activés, allez à /admin/content/types et créez un nouveau type de contenu que vous pouvez appeler « galerie » ou « album »... ou vraiment comme vous voulez!
Ensuite, dans « manage field », ajoutez un nouveau champ de type « image ». Ce champ image doit avoir un nombre de valeurs réglé soit à « unlimited », soit à au moins « 2 »... évidemment... La plupart des autres réglages sont à votre choix. Il serait logique de rendre ce champ obligatoire, mais il semble que je l'aie oublié quand j'ai fait cette capture d'écran...
Puis, dans l'onglet « Display fields », assurez-vous de régler l'affichage « full node » à <hidden>. Nous masquons ce champ par défaut parce que nous allons afficher les images dans un bloc de vue que nous placerons juste à côté du nœud.
Une fois cela fait, votre type de contenu est à peu près prêt; il faut maintenant créer la Vue magique. Évidemment, en utilisant un type de contenu personnalisé, vous ouvrez votre galerie à toute la souplesse qu'offre le module CCK!
ImageCache
Imagecache s'assurera que vos images sont redimensionnées aux bonnes tailles pour la galerie. Vous devez créer deux profils Imagecache : un pour redimensionner les images quand on les regarde dans la galerie, et un pour créer la vignette de la galerie. Allez d'abord à /admin/build/imagecache, et cliquez sur « add a new preset ». Choisissez un nom, puis ajoutez l'action à effectuer. Pour le profil d'affichage, j'ai choisi l'action « Scale » réglée à une largeur de 600 px et une hauteur de 300 px, et vous pouvez, si vous le voulez, permettre l'agrandissement.
Pour la vignette de la galerie, j'ai choisi l'action « Scale and Crop », réglée à 200 px sur 200 px. Bien sûr, vous pouvez adapter ces réglages à vos besoins, mais il vous faut au moins ces deux profils avant de passer aux réglages de la vue.
Views
Vous devez maintenant créer une nouvelle vue avec le module Views 2. Allez à /admin/build/views/add, choisissez un nom et une description pour votre vue, et assurez-vous de sélectionner « Node » comme type de vue. Cliquez ensuite sur « next » pour configurer la vue. Les réglages de base importants dont vous avez besoin sont les suivants :
- Style : Unformatted (simplement pour que la sortie soit simple)
- Row style : Fields
- Use Ajax : Et comment!
- Use pager : Mini (ou complet, mais il vous faut un pagineur)
- Items per page : 1
Ça devrait donc ressembler à ceci :
[Capture d'écran des réglages de la vue affichée à l'origine ici.]
Ensuite, vous devez sélectionner un champ à afficher : dans la section des filtres, cliquez sur l'icône « + », puis sélectionnez le groupe « content ». Vous devriez y voir le champ image que vous avez créé pour le type de contenu galerie. Sélectionnez-le, puis cliquez sur « Add ». Je masque habituellement l'étiquette du champ. Assurez-vous de sélectionner le bon profil Imagecache pour afficher l'image. Ce devrait être le profil d'affichage que vous avez réglé plus tôt. Assurez-vous aussi que l'image n'est pas un lien, mais simplement une image.
Vous devrez aussi définir des filtres : dans la section « filters », cliquez sur le lien +, et dans le groupe node, ajoutez Node: published (réglé à YES) et Node: Type (réglé à votre type de contenu galerie).
Une fois que c'est fait, il reste une dernière chose à faire : définir un ARGUMENT. Comme la vue n'est pas le nœud, elle ne sait pas quel nœud vous êtes en train de consulter. L'idée est donc essentiellement de demander à la vue de vérifier quel nœud nous consultons en regardant l'URL de la page. Par exemple, si nous consultons le nœud numéro 198, l'URL devrait ressembler à ceci : /node/198 . Si la vue sait quel nœud nous consultons, elle sait aussi quelles images ont été jointes au nœud. Ce qui est beau, c'est que cela fonctionne même si vous utilisez le module Pathauto, car la vue sait si l'URL est un alias du nœud ou non.
Cliquez donc sur le lien « + » de la section des arguments, et sélectionnez l'argument Node: Nid (identifiant du nœud). Grâce au travail acharné de Merlinofchaos, les arguments sont maintenant très faciles à configurer. Vous allez dire à la vue de trouver l'identifiant du nœud dans l'URL, ce qui signifie que vous allez fournir l'argument par défaut; sélectionnez donc « provide the default argument ». Une fois cette option sélectionnée, une nouvelle liste devrait apparaître. Dans cette liste, sélectionnez la valeur « Node ID from URL ». Cela fait, il vous suffit de cocher le type de nœud visé : si votre type de contenu s'appelle « gallery », cochez la case devant « gallery ».
Ce devrait être le dernier réglage par défaut à faire; vous devez maintenant ajouter un affichage « block ». Le bloc devrait reprendre tous les réglages par défaut que vous avez déjà définis. Enregistrez la vue.
Bloc et région
Vous avez maintenant un type de contenu galerie et un bloc de vue pour afficher les images, mais vous devez aussi placer le bloc de vue dans la région appropriée de la page. J'ai créé une région juste au-dessus du contenu de la page, et j'y ai déposé le bloc. Si vous ne savez pas comment créer une région personnalisée, lisez ceci : http://drupal.org/node/292028#comment-1027837
Essai
Il vous suffit maintenant de créer une nouvelle galerie; quand vous afficherez le nœud complet, le bloc de vue devrait montrer chaque image une par une, aux dimensions réglées dans Imagecache, avec un joli petit pagineur Ajax pour les parcourir. Vous pouvez maintenant profiter de toutes les possibilités de thématisation de Views 2 pour styliser votre galerie.
Une page de galeries
Si vous avez besoin d'une page qui liste toutes les galeries, il suffit de créer un affichage de type page dans la vue et de vous assurer de remplacer les réglages par défaut de la vue, pour que l'affichage de page n'ait aucun argument et qu'il liste plus d'un élément, bien sûr :) . Vous préférerez peut-être aussi utiliser un style « grid » pour afficher les albums.
Intégrer la vue dans le gabarit du nœud
Un autre petit truc intéressant consiste à intégrer la vue directement dans le gabarit du nœud. De cette façon, vous n'avez pas à créer une région juste pour le système de galerie, et c'est si simple que ce serait dommage de ne pas le faire ainsi! Il suffit de modifier le gabarit de nœud de votre thème et d'y coller un petit bout de code qui indiquera à Drupal quelle vue et quel affichage intégrer. Le code ressemble à ceci :
<?php print views_embed_view('view_name', $display_id = 'display_id');?>
Remplacez simplement view_name par le nom de votre vue (le nom de votre vue s'affiche en italique dans le titre de la page quand vous la modifiez), et remplacez display_id par l'identifiant de votre affichage. Par exemple, si votre affichage est le premier bloc de la vue, son identifiant est block_1 .
Pour ma vue, voici donc le bout de code que j'ai dû coller dans le fichier node.tpl.php de mon thème :
<?php print views_embed_view('gallery', $display_id = 'block_1');?>
Et voilà, vous avez maintenant sur votre site un système de galerie Ajax facile à thématiser! Je ne dirais pas que c'est la solution parfaite, car je préférerais que chaque image soit un nœud, mais cela exigerait du développement de module, et ce n'est pas une option quand on est un simple designer comme moi!