Dans une de mes galeries organisée par événements, j’ai voulu identifier par un signe distinctif les vidéos, un peu « noyées » parmi toutes les photos d’une sortie. J’ai donc imaginé d’ajouter une icône pour les repérer dans la page de vignettes :

L’opération est assez simple, et repose sur le fait que toutes mes vidéos sont physiquement regroupées¹ dans un sous-répertoire /galleries/videos ; il est donc possible de tester la présence de la chaîne de caractères video dans le nom du fichier, et de faire un traitement spécifique en conséquence.

La modification comprend 2 éléments :

• une fonction jQuery, qui identifie chaque vignette correspondant à une vidéo, et lui ajoute un élément HTML correspondant à l’icône
• des nouvelles règles CSS pour que ce nouvel élément affiche l’icône sur la vignette de la vidéo.

1. Ajout d’une fonction jQuery

La fonction qui permet d’ajouter à chaque vignette un élément supplémentaire est celle-ci :

jQuery(document).ready(
function($) {
$("img[src*=video]").closest('span').after('<span class="video"></span>');
}
);

avec :

• jQuery(document).ready(function($) { … }); : définition d’une fonction jQuery qui s’exécutera une fois la page web chargée
• $("img[src*=video]") : recherche des éléments img de la page qui contiennent la chaîne de caractères video
• .closest('span') : sélection de la balise <span> parente la plus proche
• .after('<span class="video"></span>') : ajout après cette balise d’un élément span porteur du nom de classe video

Cette fonction peut être ajoutée dans n’importe quel template-extension à condition de l’encadrer ainsi :

{known_script id="jquery" src=$ROOT_URL|@cat:"themes/default/js/jquery.packed.js"}
{html_head}
{literal}
<script type="text/javascript">
… votre fonction est ici …
</script>
{/literal}
{/html_head}

avec :

• {known_script id="jquery" src=$ROOT_URL|@cat:"themes/default/js/jquery.packed.js" : indique que la bibliothèque jQuery est déjà définie par ailleurs,
• {html_head} … {/html_head} : déplace dans la partie head du code HTML tout le code encadré par les balises²,
• {literal} … {/literal} : indique à Smarty que le code entre ces balises ne le concerne pas,
• <script type="text/javascript"> … votre fonction est ici … </script> : votre fonction jQuery est du javascript, ce qu’indiquent les balises qui l’encadrent.

Je vous suggère d’ajouter ce script à la fin d’un de vos template-extensions existants, si vous en avez déjà³ ; à défaut, vous trouverez un exemple de création et d’activation de template-extension sur cette page.

2. Nouvelles règles de style

La mise en forme de l’élément span ajouté par le script jQuery requiert l’ajout de 2 nouvelles règles CSS :

.content ul.thumbnails span.wrap1 {
position:relative;
}


.thumbnails .video{
background: url('../img/video.png') no-repeat;
position: absolute;
top: 90px;
left: 100px;
z-index:99;
width: 45px;
height:45px;
}

avec :

• .content ul.thumbnails span.wrap1 {position:relative;} : définit un positionnement relatif pour l’élément parent de notre nouvel élément
• .thumbnails .video{ … } : ensemble de la règle concernant notre nouvel élément, qui a pour nom de classe video
• background: url('../img/video.png') no-repeat; : définition de l’icône qui sert de fond au nouvel élément
• position: absolute; top: 90px; left: 100px; : positionnement absolu du nouvel élément, à 90 pixels du haut et 100 pixels de la gauche de l’élément parent
• z-index:99; : provoque la superposition de l’icône par rapport à l’élément parent
• width: 45px; height:45px; dimensions de l’icône affichée

Cette règle est à ajouter dans l’un de vos fichiers personnels de styles, par exemple /local/rules.css. Vous trouverez sur cette page un exemple détaillé de mise à jour de ce fichier.

Reste à charger l’icône video.png, définie avec une taille de 45 x 45 pixels. Je vous propose de copier celle-ci  par un simple clic droit ; il s’agit d’une adaptation personnelle à partir d’une image trouvée sur cette page, qui en comportent beaucoup d’autres. Il vous suffit ensuite d’utiliser votre client FTP pour la charger dans le répertoire /local/img de votre galerie.

3. Pour aller plus loin

Vous pouvez adopter le même principe pour d’autres types de fichiers. Dans la même galerie, j’ai par exemple identifié les articles de presse par une autre icône du même style, comme vous pouvez le voir ici :

1. Rappel : bien que les vidéos soient physiquement stockées dans une même sous-arborescence elles peuvent apparaître individuellement dans n’importe quelle catégorie virtuelle de la galerie. [↩]
2. C’est pour cette raison que la fonction peut être mise dans n’importe quel fichier template. [↩]
3. Personnellement, j’ai pour habitude de regrouper mes scripts dans un même template-extension ; je les retrouve ainsi beaucoup plus facilement. [↩]