NextGen Gallery dispose d’une traduction excellente en français, téléchargeable sur le site de Lise. Comme avec l’ensemble des modules d’extension francisés, la méthode la plus simple consiste à télécharger, décompresser et ajouter les fichiers en français dans le répertoire lang du Plugin, lui-même téléchargé et décompressé. Ensuite, on envoie l’unique répertoire converti sur le serveur. En principe, dès l’activation du plugiciel, le français est alors disponible.

NextGen Gallery ne dispose pas encore de documentation, mais les forums d’Alex Rabe sont actifs.

NextGen Gallery installe automatiquement un deuxième Plugin NextGen Gallery Widget que nous n’avons pas encore utilisé.

Nous n’allons pas détailler ici l’installation, car elle est simple. Par contre, comme avec l’ensemble de ces outils, l’installation du module d’extension crée épertoire nommé Gallery dans wp-content dont il faut changer, grâce à son logiciel Ftp comme l’excellent FileZilla, les attributs en lecture, écriture, exécution du propriétaire, du groupe et permissions publiques, c’est-à-dire en d’autres termes appliquer un change mod (chmod) de 777.

L’installation provoque l’ajout d’un bouton Galerie à côté du Tableau de bord dans l’interface d’administration, qui permet de gérer les images et les options. Trop nombreuses, nous ne les décrirons pas ici in extenso.

À la première utilisation, nous avons été perplexe… Quelle était la différence entre une galerie et un album ? Nous ne parvenions pas non plus à afficher une page comprenant une simple galerie d’images : à chaque fois, il était demandé de cliquer sur un lien pour les afficher.

En fait, comme l’explique Alex Rabe, une galerie est une collection d’images ; un album est une collection de galeries.

À ce propos, la gestion des albums est étonnante : elle s’effectue par glisser-déplacer comme les widgets des thèmes de WordPress

Attention à la dénomination trompeuse de l’onglet Ajouter une nouvelle galerie ! Il permet aussi d’ajouter des images (sous forme d’un fichier compressé, d’un répertoire, ou d’une image) à une galerie existante… À la fin du téléchargement, est choisie la galerie de destination.

Pour afficher une page contenant les images, il faut noter l’identifiant de la galerie dans la page principale Gérer les galeries de l’interface de NextGen Gallery.

Ensuite, est écrite la page, qu’on nommera Photographies par exemple, contenant l’identifiant de la galerie à afficher, qui est de la forme suivante :

[gallery=id]

Enfin, on retourne dans la page de la galerie spécifiée via Gérer les galeries de l’interface de NextGen Gallery. Si l’identifiant a été saisi correctement, on doit voir notre page Photographies dans le menu déroulant Lier la page à. Sélectionner Photographies. Dans Créer une nouvelle page, laisser page principale (pas de parent), puis cliquer sur le bouton Sauvegarder les modifications.

La galerie s’affiche désormais (!) dans notre page Photographies sous forme de vignettes cliquables.

Dans la page de la galerie spécifiée, on peut empêcher l’affichage d’une image, y ajouter une description et modifier le contenu des champs alt et title. Attention, l’apostrophe, même échappée, ne fonctionne pas dans ces balises : il faut recourir à son équivalent numérique. Les modifications des images sont automatiquement répercutées dans la page Photographies.

Dans Galerie > Options > Images, on peut vouloir intégrer un diaporama (et d’en modifier l’invite), mais cette option n’a pas fonctionné durant mes tests. On peut aussi créer un diaporama en Flash avec Jw Image Rotator version 3.9. Après décompression de l’archive, il suffit d’ajouter le fichier swf à la racine du Plugin.

Dans Galerie > Options > Effets, il est possible de configurer l’effet JavaScript. Si Thickbox est présent par défaut, on peut choisir Lightbox et NextGen Gallery génèrera le code adéquat.

Pour ma part, nous avons choisi de conserver la Slimbox, car nous n’avons pas su comment franciser l’affichage des images avec Thickbox !

Watermark permet de signer ses images, en choisissant le contenu du texte, sa couleur et même la… police ! si elle est disponible dans le répertoire fonts du Plugin.

Nous ne sommes plus certain que la trace de séchage chère aux québécois soit fonctionnelle ! Pour autant, nous déconseillons formellement l’emploi de Mareki’s Watermark, lourd à mettre en œuvre, qui peut déstabiliser le fonctionnement de WordPress. Il vaut mieux ajouter une watermak à la main, via un calque sur son image.

Dans l’éditeur visuel de TinyMce, une icône $lang_NextGEN_desc est ajoutée, qui permet de gérer une galerie, un album ou une image pendant la rédaction d’un article ou d’une page. De même, un onglet Gallery, disposant des mêmes fonctionnalités, est disponible sous la fenêtre d’édition.

Cforms II et NextGen Gallery peuvent entrer en conflit. Pour résoudre le problème, il faut essayer de désactiver les deux extensions, d’activer Cforms II puis NextGen Gallery.

<addendum>

12/08/2007.

À juste titre, Lise nous dit que l’icône ou l’onglet dans TinyMce permet de se passer de l’instruction :

[gallery=id]

Que Lise soit remerciée de sa remarque !

</addendum>

Au total, NextGen Gallery est un excellent outil qui manque d’ergonomie, mais Alex Rabe s’engage à y remédier, même si cette situation se prolonge !

04/03/2009.

Le fonctionnement d’Iptima a changé en un an et demi… ImageManager a été largement oublié… En outre, nous n’utilisons plus l’extension Slimbox ! Nous avons préféré ajouter à notre thème le code de la Slimbox en dur, comme le propose Christophe Beyls, concepteur originel de la Slimbox, avec JQuery.

Nota. L’effet Slimbox n’est pas réservé aux sites fonctionnant sous WordPress !

Pour ne pas pénaliser les lecteurs et dans un but didactique, l’article est laissé en l’état, mais sans les images. Pour autant, nous garantissons que les codes fonctionnaient lors de la rédaction de l’article… même si l’informatique est parfois capricieuse !

</addendum>

Aujourd’hui, nous nous sommes mis en quête d’un outil afin de pouvoir agrandir les photos présentes sur le weblogue.

Sans doute aurions-nous pu nous contenter de l’outil pour agrandir proposé par ImageManager que nous utilisions alors, mais il ne nous satisfaisait pas : nous trouvions la présentation des images austère et nous voulions un effet plus dynamique. Ici, nous avons longtemps hésité entre Lightbox et son fils, Slimbox. Nous avons fini par adopter le dernier pour plusieurs raisons… Nous apprécions son installation, car il ne nécessite pas de modifier certains fichiers. Il permet d’ajouter une légende aux photos agrandies. Il autorise la navigation d’images en images en ajoutant un code simplissime. Enfin, il affiche correctement les caractères accentués et les apostrophes.

Passons à la pratique…

Avec une image

Il est demandé à ImageManager de créer une miniature avec lien sur l’image. ImageManager a généré le code suivant :

<a rel="lightbox" href="/wp-content/uploads/bordeaux/bordeaux_a.jpg"><img src="/wp-content/uploads/bordeaux/.thumbs/.bordeaux_a.jpg" title="le Miroir d'eau à Bordeaux" style="photos" class="photos" width="96" height="72" hspace="5" vspace="5" border="0" /></a>

Pour que la photo agrandie comporte un titre en bas à gauche, il a fallu donner un titre à la lightbox. Le code a été modifié ainsi :

rel="lightbox" title="le Miroir d'eau à Bordeaux"

La photo agrandie comporte alors une image et, sur le côté inférieur, une légende et un bouton fermer.

Avec une galerie d’images

À présent, nous allons voir que Slimbox permet de naviguer entre les images agrandies avec l’instruction rel=lightbox[roundtrip].

Le code généré par ImageManager ne change évidemment pas.

En revanche, l’appel à la lightbox sur chaque image est rédigé comme suit :

rel="lightbox[roadtrip]"

Là encore, il convient de ne pas oublier l’attribut title à la lightbox si l’on veut une légende en bas à gauche de l’image agrandie.

Lorsque l’image est agrandie, la légende de l’image et le bouton fermer sont toujours présents. De plus, il suffit de diriger la souris vers l’un des côtés de l’image pour que les boutons précédent ou suivant apparaissent.

Certes, ces boutons de navigation ne sont guère accessibles… Voilà pourquoi, aucun texte n’invite l’utilisateur à agrandir l’image ! Si l’internaute est novice ou handicapé, il n’utilisera pas le JavaScript, et sa navigation n’en sera pas affectée. Quand au visiteur confirmé, il cliquera sur l’image, mais son expérience lui permettra de naviguer sans difficultés.

Dans la version originale de Slimbox, les boutons étaient en anglais. Nous avons donc voulu les changer. Faute d’avoir réussi à produire un texte net avec nos outils de dessin, nous nous sommes contenté des symboles. Nous avons aussi francisé un terme dans le code JavaScript à la ligne no 144 du fichier slimbox.js afin que le mot of soit remplacé par de. Ainsi peut-on lire Image 1 sur 3 au lieu de Image 1 of 3. Enfin, nous avons modifié la feuille de style afin d’assortir le couleur de fond au reste de notre weblogue.