Il m’arrive parfois de publier des photos dans des galeries autres que la mienne, notamment lorsque je participe à des activités de groupes qui disposent de leur propre galerie Piwigo. Mais comme je veux que l’ensemble des photos soit accessible à partir de ma galerie personnelle, j’ai créé des catégories « externes », dont je me propose de vous expliquer la mise en oeuvre. Pour bien comprendre de quoi il s’agit, je vous invite à en voir d’abord le fonctionnement.

1. Mode de fonctionnement

Par exemple, sur cette page de ma galerie photos, vous voyez 3 catégories pour lesquelles le nombre d’images n’est pas indiqué, mais remplacé par le libellé Catégorie externe suivie d’une icône , icône qui apparaît également à la suite de ces catégories, dans le menu de la colonne de gauche.

Si vous cliquez sur la vignette (ou le lien du menu) intitulée Lac du Salagou, vous arrivez directement dans autre galerie, Kayak en Liberté, sur la page regroupant les photos que j’ai prises lors d’un rassemblement de kayakistes au bord de ce lac.

L’utilisation d’une catégorie externe a donc permis de « sortir » de la galerie d’origine pour aller consulter directement le contenu d’une autre galerie.

Ce petit tour de passe-passe n’est pas très compliqué à réaliser, mais sa mise en oeuvre fait appel à des éléments de personnalisation variés, que nous allons passer en revue :

• le paramétrage de la catégorie externe proprement dite,
• la modification de fichiers templates concernés,
• l’adaptation de la mise en forme.

Le plugin Extended Description doit être installé et activé sur la galerie, pour que les paramétrages décrits puissent fonctionner.

2. Configuration de la catégorie externe

Le paramétrage de la catégorie externe repose sur deux éléments :

• une mention spéciale dans le Nom de la catégorie, qui permet de la repérer pour lui assurer le traitement adéquat sur les pages concernées. J’ai utilisé le libellé <!--external-cat--> ; les balises <!-- ... --> bloquent l’affichage du libellé qu’elles encadrent¹, le nom de la catégorie sera donc affiché normalement, sans être « pollué » par cette mention additionnelle
• dans le champ Description, la commande de redirection vers la galerie externe ainsi rédigé :
  <!--more-->
<script type="text/javascript">self.location.href="http://www.kayak-en-liberte.org/index.php?/search/11";</script>, avec
  • <!--more--> : commande permettant de gérer deux niveaux de libellés pour une catégorie, comme vu dans cet article ; ce qui suit ne sera donc « affiché » que sur la page de la catégorie, et pas dans le menu, ni dans la page de vignettes de catégories
  • <script type="text/javascript"> ... </script> : balises délimitant un script en javascript ; ce script sera interprété lors de l’affichage de la description complète
  • self.location.href=" ... "; : commande de redirection vers la page internet indiquée
  • http://www.kayak-en-liberte.org/index.php?/search/11 : URL d’une page de la galerie Kayak en liberté²

Pour que la catégorie soit affichée, elle ne doit pas être vide³. Nous allons donc y mettre une image, qui servira en outre de représentante de la catégorie, donc sa vignette s’affichera sur la page index des catégories ; mais comme elle ne doit pas être visible dans la catégorie elle-même, nous allons la déclarer cachée en utilisant une autre propriété d’Extended Description que nous n’avions pas encore vue, la commande <--hidden-->.

Le paramétrage de base est désormais en place, voyons maintenant comment l’exploiter sur les différentes pages.

3. Adaptation des templates

Le traitement d’affichage de la catégorie externe doit être adapté en deux endroits :

• dans le menu : suppression du nombre d’images de la catégorie⁴, et affichage d’une icône indiquant qu’il s’agit d’une catégorie externe ;
• dans la partie index des catégories : remplacement du nombre d’images/sous-catégories par la mention « Catégorie externe » et l’icône associée.

Il nous faut donc créer deux fichiers templates-extensions, pour remplacer menubar_categories.tpl et mainpage_categories.tpl. Via le plugin LocalFiles Editor, créez d’abord un nouveau fichier basé sur default/menubar_categories.tpl …

… et repérez les lignes correspondant à l’affichage du nombre d’images :

Ajoutez avant ces lignes :

{if (strpos($cat.NAME,'<!--external-cat-->') == 0)}

et après :

{else}
<span>(cat.externe)</span>
{/if}

De la sorte, l’affichage « normal » sera remplacé par <span>(cat.externe)</span> si le nom de la catégorie contient la mention <!--external-cat--> ; mais il ne sera pas modifié s’il s’agit d’une catégorie ordinaire.

De la même manière, créez un nouveau fichier basé sur default/mainpage_categories.tpl, puis recherchez la ligne correspondant à l’affichage du nombre d’images :

Insérez d’abord :

{if (strpos($cat.NAME,'<!--external-cat-->') == 0)}

puis :

{else}
Catégorie externe<span>(cat.externe)</span>
{/if}

exactement comme indiqué ci-dessous :

Ainsi, Catégorie externe <span>(cat.externe)</span> sera substitué à l’affichage ordinaire dans le cas d’une catégorie externe.

Il faut ensuite penser à activer les nouveaux templates-extensions, via Configuration -> Templates (modèles), afin qu’ils remplacent les fichiers templates d’origine.

Le fonctionnement est désormais opérationnel ; il reste à ajouter l’affichage de l’icône.

4. Mise en forme

Téléchargez l’icône proposée sur votre ordinateur en faisant dessus un Clic-droit, et Enregistrer l’image sous ; puis chargez la dans le sous-répertoire /local/css/img de votre galerie, sous le nom internet.png.

A l’aide du plugin LocalFiles Editor, rendez-vous sur la feuille de style rules.css …

… et ajoutez la règle suivante :

#menubar .external_cat, #content .external_cat {
background:url("img/internet.png") no-repeat left center transparent;
color:transparent;
}

De la sorte, les éléments porteurs de la classe .external_cat, que ce soit dans le menu #menubar, ou dans la partie principale #content seront invisibles (color:transparent;) sur un fond matérialisé par l’icône (background:url("img/internet.png") no-repeat left center transparent;).

1. Pour mémoire, <!-- ... --> sont les balises de commentaire en HTML. [↩]
2. La page en question affiche les résultats d’une recherche précédement enregistrée, mais ça pourrait simplement être une page de catégorie ou de tag, par exemple. [↩]
3. Il s’agit d’une contrainte de la version actuelle (2.1) de Piwigo. [↩]
4. Dans la galerie locale, il n’y a qu’une seule image, qui est cachée ; et l’on ne connaît pas le nombre d’images qui seront visibles dans la galerie externe. [↩]