Je trouve un peu dommage d’encombrer l’écran de métadonnées qui n’intéressent qu’un petit nombre de visiteurs, alors qu’elles peuvent être affichées à la demande, au simple survol d’un bouton. Comme ici, par exemple :

La solution proposée utilise les données fournies par l’extension Advanced Metadata et requiert :

• un template-extension, pour déplacer l’affichage des métadonnées à proximité du bouton
• et un peu de CSS, pour cacher / révéler / mettre en forme ces données.

1. Création du template-extension

L’affichage de la page image étant pilotée par le fichier picture.tpl, commencez par créer un template-extension basé sur ce fichier à l’aide du plugin Local Files Editor :

Repérez les lignes correspondant au bouton d’affichage des métadonnées dans la barre d’outil, matérialisées en jaune ci-dessous ; dans mon fichier, elles occupent les lignes 44 à 46.

Ces lignes vont être modifiées pour  :

• changer le comportement au survol du bouton (en standard, le visiteur doit cliquer sur le bouton pour afficher les métadonnées)
• incorporer l’affichage du tableau de métadonnées, qui se trouve normalement sous l’image.

Remplacez d’abord <a href="{$U_METADATA}" par <a href="#" id="show_metadata", ce qui permettra :

• de ne pas changer de page en cas de clic sur le bouton : href="#"
• d’identifier précisément le bouton d’affichage des métadonnées, pour pouvoir y faire référence dans la feuille de style : id="show_metadata" .

Cherchez ensuite les lignes correspondant à l’affichage des métadonnées, qui se trouvent beaucoup plus bas. Chez moi, il s’agit des lignes 251 à 265.

Coupez ces lignes, en commençant par {if isset($metadata)} et terminant par {/if}, et collez-les dans le code de définition du bouton, juste après <img ... alt="metadata">. Puis modifiez le code se trouvant entre les balises <tr> et </tr> de manière à obtenir :

<td colspan="2"><span class="label">{$label} : </span><span class="value">{$value}</span></td>

Au final, vous devriez obtenir ceci :

les zones surlignées en vert correspondant à ce qui a été effectivement modifié.

Sauvegardez le fichier, puis rendez-vous à Configuration -> Templates (modèles) pour activer votre nouveau template-extension ; en face du nom de votre fichier, sélectionnez picture.tpl puis validez.

La structure de base est en place, mais il manque encore les règles CSS qui vont permettre d’afficher ou non les métadonnées en fonction de la position du curseur.

2. Ajout des règles CSS

Utilisez une nouvelle fois Local Files Editor en sélectionnant cette fois l’onglet CSS. Choisissez le fichier rules.css pour activer les règles sur tous les thèmes de la galerie.

Et ajoutez les lignes suivantes :

#show_metadata #Metadata {
position: absolute;
width:160px;
text-align:left;
border: 2px solid #ffffff;
color:#ffffff;
font-size:0.95em;
display: none;
}
#show_metadata:hover #Metadata {
display: block;
cursor: default;
}

où :

• #show_metadata #Metadata{ ... } identifie le tableau de métadonnées, et #show_metadata:hover #Metadata{ ... } son état particulier lors du survol du bouton
• position: absolute; permet d’afficher les métadonnées « en dehors du flux », c’est-à-dire qu’elles viendront se superposer à ce qui est déjà affiché¹
• width: 160px; détermine la largeur du tableau des métadonnées
• text-align: left; aligne à gauche le contenu du tableau
• border: 2px solid #ffffff; entoure le tableau d’un bordure pleine, blanche, de 2 pixels d’épaisseur
• color: #ffffff; force à blanc la couleur du texte²
• font-size: 0.95em; réduit un peu la taille du texte
• display: none; supprime totalement l’affichage du tableau lorsque le bouton n’est pas survolé
• display: block; réactive l’affichage du tableau au survol du bouton
• cursor: default; restaure le curseur au survol du bouton, pour ne pas inciter à cliquer sur le lien.

N’oubliez pas d’enregistrer votre fichier .css avant d’aller vérifier le résultat. Et pour voir un exemple « life », je vous invite à consulter ma galerie de test ou une réalisation un peu différente sur cette autre galerie.

1. à défaut, le tableau viendrait s’insérer dans les informations déjà affichées sur la page, en décalant tout ce qui se trouve derrière ou en dessous. [↩]
2. à défaut, la couleur du contenu du tableau serait celle des autres liens de la page. [↩]