image-gallery ~ galerie d'images responsives

Cette action affiche une ou plusieurs images dans une lightbobx avec Photoswipe.
Elle génère plusieurs tailles des images pour utiliser la plus adaptée aux dimensions du navigateur et au type d'appareil.
Un mécanisme de lazyload optimise le chargement des images.

Cette action utilise les scripts :

➠ image_gallery : Affiche une ou plusieurs images dans une lightbox

Cliquer pour lire la documentation

avec adaptation de la taille image au device et legendes
syntaxe 1 {up photoswipe=chemin_image | alt=texte}
syntaxe 2 {up photoswipe=chemin_dossier}
syntaxe 3 {up photoswipe}contenu avec des images{/up photoswipe}
author LOMART version 1.0 license GNU/GPLv3 credit jqPhotoSwipe de Ergec - photoswipe.com - Masonry
  • image_gallery: fichier image, dossier pour galerie ou largeurs des images contenues
  • layout=masonry-3-2-1: layout pour galerie : grid-x-x-x, none-x-x-x
  • nb-img=0: nombre de vignette affiché pour la galerie d'un dossier, 0 = toutes
  • gallery=1: affiche la galerie dans une lightbox
  • legend: label pour image unique
  • legend-type=2: 0:aucune, 1:hover-top, 2:hover-bottom, 3:sous l'image
  • class: classe(s) pour bloc principal
  • style: style inline pour bloc principal
  • img-class: classe(s) pour bloc figure avec image et legende
  • img-style: style inline pour bloc avec image et legende
  • legend-class: classe(s) pour la légende vignette
  • legend-style: style pour la légende vignette
  • img-sizes: largeur image en pourcentage de wmax-page en mode desktop, tablette et mobile. 100,100,100 par defaut
  • wmin-image=600: largeur mini de l'image pour prise en charge
  • wmax-page=1200: largeur maxi du conteneur contenu de la page
  • wmax-lightbox=1200: largeur image dans lightbox
  • wmax-lightbox-mobile=768: largeur image dans lightboox sur mobile ou 0 pour desactiver. Multiplié par pixel-ratio
  • pixel-ratio=0: facteur DPR. ex: 0:sans, vide, 1 ou 2: 2, 3:3
  • quality=70: taux compression jpeg
  • similarity=80: taux minimal. Si la largeur entre 2 images alternatives est inferieure a 80%, la plus petite n'est pas cree
  • bp-tablet=768: point de rupture tablette
  • bp-mobile=480: point de rupture smartphone

    Cette action accepte 3 types de shortcode :

    • SIMPLE : {up image-gallery=image.jpg}
      affiche l'image indiquée dans la page et dans une lightbox.
    • CONTENU : {up image-gallery=largeurs images}contenu HTML{/up image-gallery}
      prise en charge de toutes les images du contenu pour ajouter un affichage dans lightbox et une gestion responsive avancée.
    • GALLERY : {up image-gallery=dossier}
      affiche toutes les images du dossier dans une grille flexbox ou masonry et dans une lightbox avec gestion avancée du responsive

    SIMPLE : une image

    Même si la fonction première de cette action est d'afficher des galeries d'images, il est possible d'utiliser ses fonctionnalités pour une ou des images isolées.

    L'image ci-dessus est affichée à l'aide de ce shortcode

    {up image-gallery=images/actions-demo/gallery/simple/001-le-soir-sur-Saint--Malo.jpg}

    On indique uniquement le nom de l'image avec son chemin.

    Avec ce simple shortcode, nous pouvons constater :

    • l'image est différente selon la taille du navigateur. Le texte inclus dans l'image indique sa largeur
    • une légende apparaît au survol de l'image. Ce texte est également utilisé pour argumenter l'attribut alt pour le référencement
    • sans autres informations, le texte est déduit du nom du fichier. "001-le-soir-sur-Saint--Malo.jpg" = "Le soir sur Saint-Malo"
    • un clic affiche l'image dans une lightbox avec possibilité de zoom, d'affichage plein écran, de partage sur les réseaux sociaux, de téléchargement. La légende est affichée au-dessous de l'image.
    • si vous regardez la lightbox sur un smartphone, la taille d'image est différente de celle sur un ordinateur de bureau.
    • la lightbox photoswipe permet d'utiliser la souris, le clavier et les gestes sur un mobile

    Nous pouvons bien sûr personnaliser ces comportements.

    La légende

    A l'aide de l'option legend-type, il est possible de définir le mode d'affichage de la légende.

    0 = pas de légende
    1 = légende au survol en haut
    2 = légende au survol en bas
    1 = légende au dessous de la photo

    La légende et le contenu pour l'attribut alt peut être défini (dans l'ordre de priorité) à partir de :

    1. l'option legend - uniquement en mode simple
    2. l'e contenu 'attribut alt - uniquement en mode contenu
    3. un fichier legend.ini dans le même dossier que l'image - tous les modes
    4. une conversion "humanisée" du nom de fichier

    Voir les détails dans Gestion des légendes (titre et balise alt)

    <div>
      0 = pas de légende
      {up image-gallery=images/actions-demo/gallery/simple/001-le-soir-sur-Saint--Malo.jpg | legend-type=0}
    </div>
    <div>
      1 = légende au survol en haut
      {up image-gallery=images/actions-demo/gallery/simple/001-le-soir-sur-Saint--Malo.jpg | legend-type=1 | legend=légende saisie dans shortcode}
    </div>
    <div>
      2 = légende au survol en bas
      {up image-gallery=images/actions-demo/gallery/simple/001-le-soir-sur-Saint--Malo.jpg | legend-type=2 | legend-class=t-rouge b}
    </div>
    <div>
      1 = légende au dessous de la photo
      {up image-gallery=images/actions-demo/gallery/simple/001-le-soir-sur-Saint--Malo.jpg | legend-type=3 | legend-style=font-weight:bold}
    </div>
    

    Pour les 4 exemples, l'option legend-type indique la position de la légende. Un moyen mnémotechnique : 0=sans et ensuite de haut en bas : 1=haut, 2=bas, 3=au-dessous

    Pour le 2e exemple, l'option legend contient le texte

    Pour le 3e exemple, nous avons enrichi le titre avec 2 classes dans l'option legend-class. Pour le 4e, nous avons utilisé un style inline avec legend-style

    Les tailles d'images alternatives

    Nous avons vu que l'image chargée par le navigateur est fonction de sa taille et de l'appareil utilisé. Mais nous pouvons faire encore mieux !

    Dans les exemples précédents, nous considérions que l'image occupait la largeur totale de la page. C'est pour cela que l'image fait 1200px de large sur grand écran alors qu'elle en occupe le tiers. A l'aide de l'option img-sizes nous pouvons indiquer la largeur occupée dans les 3 modes (desktop, tablette et mobile) sous la forme 33-50-100.

    img-sizes=33,50,100
    img-sizes=50,50,100
    img-sizes=75,75,100
    <div class="fg-row fg-auto-3 fg-auto-s1 fg-gap">
    <div>{up image-gallery=images/actions-demo/gallery/simple/001-le-soir-sur-Saint--Malo.jpg | img-sizes=33,50,100}</div>
    <div>{up image-gallery=images/actions-demo/gallery/simple/001-le-soir-sur-Saint--Malo.jpg | img-sizes=50,50,100}</div>
    <div>{up image-gallery=images/actions-demo/gallery/simple/001-le-soir-sur-Saint--Malo.jpg | img-sizes=75,75,100}</div>
    </div>
    

    L'option img-size contient les largeurs relatives en mode desktop, tablette et mobile.
    La valeur par défaut est de 100. La dernière valeur indiquée sera utilisée pour les valeurs non définies. Exemple : vide = 100-100-100, 33 = 33-33-33, 33-50 = 33-50-50
    Le séparateur peut-être un virgule ou un tiret.

    Pour la lightbox, on utilise une version de l'image de la largeur indiquée par wmax-lightbox.
    Si UP détecte l'utilisation d'un smartphone (propriété JFactory::getApplication()->client->mobile), il chargera une image de largeurwmax-lightbox-mobile.

    La prise en charge du ratio pixel (retina) sur mobile

    Connue sous le nom de Retina, cette technique est présente sur la majorité des tablettes et smartphones sous le terme Pixel-ratio ou DPR (Digit Pixel ratio).

    Il s'agit du nombre de pixels "physiques" utilisé pour un pixel "logique". Plus ce nombre est élevé, plus l'image donne une impression de finesse.

    Vous pouvez consulter les caractéristiques de votre appareil ci-dessous.

    Dimension (LxH): x px
    PixelRatio (DPR):

    pixel-ratio=0 (défaut)

    Pour la lightbox, UP chargera une image de largeur wmax-lightbox-mobile X pixel-ratio.
    Le coefficient DPR est appliqué uniquement en mode mobile.

    Je vous laisse faire des tests sur différents appareils ou utiliser le simulateur de l'inspecteur de code pour juger de l'effet et de la pertinence.


    La méthode la plus facile pour afficher le simulateur responsive est d'appuyer simultanément sur les touches Shift+Ctrl+M (Firefox & Chrome).

    simulateur-rwd-firefox

    1. la taille de la fenêtre peut être modifiée avec la souris ou en choisissant un appareil dans la liste

    2. DPR correspond à PixelRatio (exemple : 2 pour un écran Retina)

    3. cet article calcule et affiche la taille actuelle de la fenêtre. Pour actualiser le PixelRatio, il est necéssaire de recharger la page.

    Cette technique très gourmande en place disque sur le serveur n'est pas activée par défaut par UP. Pour l'utiliser, il faut ajouter l'option pixel-ratio=2 ou 3 selon le type d'appareil ciblé. A mon avis, 2 est une bonne valeur.

    Cette indication va dupliquer toutes les images alternatives par une image dont la largeur sera multipliée par ce coefficient. Des mécanismes sont mis en place pour minimiser l'impact sur le disque serveur et les sauvegardes. Les images ne seront pas créées s'il est possible d'utiliser légèrement plus grande. C'est l'option similarity qui fixe par défaut à 20% cette tolérance. Pour cette démonstration, nous n'utilisons pas cette possibilité pour faciliter les calculs de contrôle de mise en oeuvre.

    Note: la largeur maximale d'une image est celle de son original. UP ne rééchantillonne jamais à la hausse. Le navigateur sait le faire si nécessaire.

    Nouveauté version 1.4 : Vous pouvez adapter le comportement de l'action aux impératifs de votre site en définissant vos valeurs par défaut pour les options. Voir Programmation : personnaliser une action

    CONTENU : toutes les images entre les shortcodes

    L'action image-gallery permet de traiter toutes les images d'un article.
    Il suffit d'entourer la partie concernée par les shortcodes {up image-gallery} et {/up image-gallery}

    L'argument principal est le pourcentage d'occupation de l'image dans la page dans les modes desktop, tablette et mobile.
    Exemple : {up image-gallery=50-75-100}

    Toutes les images sont prises en charge, sauf :

    • celles dont la largeur est inférieure à l'option wmin-image. Sa valeur par défaut est de 600px.
    • celles dont l'attribut class contient nogallery

    Démonstration pour contenu

    Ceci est un test de contenu avec :

    • 1 grande image au-dessus
    • 2 petites images
    • une petite image (puce violette) non prise en charge car trop petite
    • une image ignorée (logo Joomla) car elle a la classe nogallery
    Separateur Joomla
    <div style="padding:10px 10px 0; border:RoyalBlue 2px solid;background:Azure;">
    	<h3 style="margin:0">Démontration pour contenu</h3>
    	<!-- l'image en pleine largeur -->
    	{up image-gallery | id=demo-contenu}
    		<img src="/images/actions-demo/gallery/content/bando-dans-le-cerveau-du-robot.jpg" alt="Dans le cerveau d'un robot, on y trouve ...">
    	{/up image-gallery}
    	<!-- le bloc avec les 2 petites images et le texte -->
    	{up image-gallery=33,33,100 | id=demo-contenu}
    	<div class="fg-row fg-gap">
    		<div class="fg-c4 fg-cs12"><img src="/images/actions-demo/gallery/content/un-elephant-bien-taquin.jpg"></div>
    		<div class="fg-c4 fg-cs12">
    			<p><img src="/images/actions-demo/gallery/content/bulle-purple.png" class="fl"> Ceci est un test de contenu avec :</p>
    			<ul>
    				<li>1 grande image au-dessus</li>
    				<li>2 petites images</li> 
    				<li>une petite image (puce violette) non prise en charge car trop petite</li>
    				<li>une image ignorée (logo Joomla) car elle a la classe <b>nogallery</b></li>
    			</ul>
    		</div>
    		<div class="fg-c4 fg-cs12"><img src="/images/actions-demo/gallery/content/une-belle-prise-de-tete.jpg" alt=""/></div>
    	</div>
    	<div class="tc"><img src="/images/actions-demo/gallery/content/bar-joomla.png" alt="Separateur Joomla" class="nogallery w8"></div>
    	{/up image-gallery}
    </div>
    

    Le code (autre que les shortcodes UP) est montré ici au format HTML pour faciliter son analyse, mais peut être saisi en wysiwyg.

    Il faut éviter/proscrire d'utiliser des classes et styles sur les balises img pour éviter les conflits avec les ajouts de UP. Chaque image est considérée comme occupant la totalité de la largeur de son bloc parent.

    Pour enrichir les photos contenues dans un article, il suffit d'entourer la section concernée avec les shortcodes : {up image-gallery}...{/up image-gallery}. Aucune option n'est nécessaire, UP considère que toutes les images occupent la largeur utile de la page. Si ce n'est pas le cas, vous pouvez le spécifier comme argument principal ou avec l'option img-sizes sous la forme d'une liste avec les taux d'occupation en mode desktop, tablette et mobile. Voir le 2ème shortcode de l'exemple.

    L'option id force l'identifiant. Ce qui permet d'avoir les images des 2 galeries réunies dans une seule.

    Une image ne sera pas prise en compte dans les cas suivants :

    • sa largeur est inférieure à l'option wmin-image. 600px par défaut. C'est le cas pour la petite puce violette.
    • elle a une classe nogallery comme le bandeau de logos Joomla dans l'exemple ci-dessus.

    Pour les légendes, le titre du fichier est repris pour la grande. On utilise un fichier legend.ini pour pouvoir mettre des accents et des caractères unicode sur les petites.

    un-elephant-bien-taquin.jpg="Un éléphant bien taquin &#x2764;"
    une-belle-prise-de-tete.jpg="Une belle prise de tête &#x2639;"

    Pour afficher les images d'un dossier dans une galerie fluide, il suffit d'indiquer son chemin dans le shortcode :

    {up image-gallery=images/actions-demo/gallery/lions}

    pour avoir ce résultat :

    Les images sont toujours affichées selon l'ordre alphabétique de leur nom de fichier.

    Modification de la grille

    Par défaut, on utilise une mise en page fluide avec le script Masonry qui évite les espaces verticaux entre images de hauteur différentes.

    Si vos images ont toutes les mêmes proportions, vous pour optez pour une mise en page avec Flexbox. Il suffit de l'indiquer comme option : layout=grid-3-2-1. Grid est le type de mise en page, suivi du nombre de colonnes en mode desktop, tablette et mobile.

    Voici la même galerie d'images en mode grid sur 6 colonnes sur ordinateur, 4 sur tablette et 2 sur mobile.

    {up image-gallery=images/actions-demo/gallery/lions | layout=grid-6-4-2}

    Modification du style

    Toujours les mêmes images avec un rendu différent utilisant une grille Masonry.

    {up image-gallery=images/actions-demo/gallery/lions 
      | layout=masonry-6-4-2 
      | img-style=padding:0 10px 
      | legend-type=3 
      | style=background:tan; padding:20px 0 0 10px
    }
    • layout=masonry-6-4-2 définit la grille.
    • img-style=padding:0 10px ajoute un espace horizontal entre les images.
    • legend-type=3 affiche la description au-dessous de l'image.
    • style permet d'ajouter un fond coloré pour montrer la prise en charge de la transparence des PNG. Le padding permet d'harmoniser les marges.

    Le style des légendes

    En utilisant un fichier "legend.ini", il est possible d'ajouter des styles "inline" aux légendes.

    004-un-lion-tres-discret.jpg="Un lion très discret"
    005-lion-en-PNG.png="<b>Les lions en <span style='color:red'>PNG</span> sont aussi pris en charge</b>"
    008-une-lionne-perchée.jpg="<img src="/images/actions-demo/gallery/content/bulle-purple.png">Lionne perchée"

    note : dans le cas d'image (la puce violette pour la lionne), il faut indiquer le chemin par rapport à la racine du serveur.

    note : pour les images non renseignées dans le fichier "legend.ini", on utilise le nom du fichier "humanisé".

    Afficher uniquement les premières images d'une galerie

    C'est une option très pratique pour alléger un article. On affiche seulement la ou les premières images qui serviront de lien pour afficher la totalité des images dans la lightbox.

    Pour voir ma collection de lions, il suffit de cliquer sur ma gueule !

    Analysons le shortcode image-gallery :

    • l'option principale image-gallery contient le chemin vers le dossier contenant les images
    • nb-img permet d'indiquer le nombre d'images a afficher en vignette. Les images sont triées dans l'ordre alphabétique.
    • layout est mis sur none pour un affichage brut. Toutefois, nous précisons le nombre de colonnes (sur 12) qu'occupera la ou les vignettes en mode desktop, tablette et mobile
    • legend-style=0, évite d'afficher la légende sur la vignette. Elles sont toujours affichées dans la lightbox.
    • style permet de compenser la marge basse due au line-heigth de la balise a du template. A adapter, si besoin, à votre cas.
    {up flexbox=3-9 | mobile=12-12 | class=fg-child-center fg-child-vcenter}
      {up image-gallery=images/actions-demo/gallery/lions | layout=none-3-3-12 | nb-img=1 | legend-style=0 | style=margin-bottom:-24px}
    {=====}
      <h4 style="margin:0">Pour voir ma collection de lions, il suffit de cliquer sur ma gueule ! </h4>
    {/up flexbox}
    

    L'action crée seulement les images alternatives nécessaires. Pour cet exemple, uniquement les largeurs pour la lightbox (600 et 1200, valeurs par défaut) sont créées. Pour la première image, les largeurs de la vignette en mode desktop, tablette et mobile sont créées en plus.

    J'ai laissé le shortcode flexbox utilisé pour la mise en page des blocs enfants dans une grille flexbox. Plus d'info sur sa page de démonstration

    Informations techniques

    Ce chapitre associe les options aux fonctionnalités de l'action.
    Un tableau reprend les options pour la paramétrer. Il est composé des colonnes suivantes :

    • Option : le nom de l'option
    • F : F si l'option est utilisée en mode fichier (image simple)
    • C : C si l'option est utilisée en mode contenu
    • G : G si l'option est utilisée en mode galerie (dossier)
    • Adm : Adm si l'option est plutôt prévue pour être utilisée par l'administrateur-webdesigner dans le fichier custom/prefs.ini de l'action
    • Description : valeur par défaut et explications diverses

    Les principales options

    Option F C G Adm Description
    image_gallery F C G -

    Saisie par le rédacteur, elle définit le mode d'analyse et de rendu :

    • simple : chemin et nom d'un fichier image jpg, jpeg ou png
    • contenu : vide ou largeur des images en vue desktop, tablette et mobile
    • galerie : chemin d'un dossier contenant des fichiers images jpg, jpeg ou png
    gallery F C G - 1 par défaut, 0 pour ne pas afficher les images dans une lightbox.
    layout - - G - grille mise en page : masonry-x-x-x (défaut), grid-x-x-x, none-x-x-x
    nb-img - - G - nombre de vignettes affichées pour la galerie d'un dossier, 0 = toutes par défaut
    img-sizes S C - - largeur des images en pourcentage de la largeur de la page en mode desktop, tablette et mobile. 100,100,100 par défaut. Le séparateur peut être une virgule ou un tiret. Inutile en mode Galerie, les largeurs sont calculées à partir du nombre de colonnes.
    id S C G - Optionnel. Définir l'ID permet de regrouper les images définies par plusieurs shortcodes UP en une seule galerie lightbox.

    Gestion des légendes (titre et balise alt)

    L'action utilise le même texte pour l'attribut alt et la légende visible sur la vignette et au bas de la lightbox. Ce texte provient dans l'ordre :

    1. option legend : permet de spécifier la légende dans le shortcode, mais uniquement pour une image unique
    2. attribut alt de la balise img : saisi par le rédacteur de l'article
    3. fichier 'legend.ini' : ce fichier texte simple situé dans le dossier de l'image contient le nom du fichier, le signe égal suivi de la légende.
      Exemple : baie-du-Mont-Saint-Michel.jpg="La baie du Mont-Saint-Michel au lever du soleil."
    4. nom du fichier : uniquement le nom du fichier avec la première lettre en majuscule. Les underscores et tirets sont remplacés par un espace. les doubles tirets par un tiret simple.
      Exemple : 'baie-du-Mont--Saint--Michel.jpg' → 'Baie du Mont-Saint-Michel'

    Cette méthode laisse le dernier mot au rédacteur de l'article, mais permet d'anticiper le besoin d'une légende au moment du nommage du fichier ou par l'ajout d'un fichier de référence.

    Note : l'attribut alt est toujours renseigné, mais le title est neutralisé pour éviter l'apparition d'une bulle au survol.

    Option F C G Adm Description
    legend S - - - label pour image unique
    legend-type S C G - emplacement de la légende
    • 0 : pas de légende, mais alt est argumentée
    • 1 : en haut lors survol
    • 2 : en bas lors survol
    • 3 : permanent au-dessous de la l'image

    Styles et classes

    Ces options permettent de modifier le rendu graphique.

    Option F C G Adm Description
    class S C G - classe(s) pour bloc principal
    style S C G - style inline pour bloc principal
    img-class S C G - classe(s) pour bloc figure avec image et légende
    img-class S C G - style inline pour bloc avec image et légende
    legend-class S C G - classe(s) pour la légende vignette
    legend-style S C G - style pour la légende vignette

    Redimensionnement des images

    Cette action met en place 2 mécanismes pour adapter la taille/poids des images en fonction de la taille du navigateur et du type d'appareil.

    • images dans l'article : utilisation de la fonctionnalité srcset pour les balises img et source d'un bloc picture
    • images pour la lightbox : charge une image réduite si l'utilisation d'un appareil mobile est détecté

    Les règles pour le redimensionnement :

    Les options wmax-page, bp-tablet, bp-mobile, wmax-lightbox et wmax-lightbox-mobile servent de base pour calculer les différentes largeurs que pourraient avoir les images. Coefficientées par les options img-sizes et pixel-ratio, nous obtenons les largeurs nécessaires pour les différents cas d'affichage. Pour éviter d'avoir des images trop proches, l'option similarity définit l'écart minimal en pourcentage.

    Des images aux largeurs utilisées sont créées dans un sous-dossier srcset du dossier de l'image originale (qui n'est jamais utilisée). Une image n'est jamais redimensionnée à une taille supérieure.

    Pour prendre en charge les transparences PNG, la classe image de Joomla n'est pas utilisée.

    les images générées ne sont jamais effacées. Vous pouvez les créer vous-même, cela peut être pertinent pour avoir un cadrage plus adapté à la taille de l'écran.

    Toutes les largeurs sont exprimées en pixels. Il est inutile d'indiquer l'unité.

    Les paramètres concernés :
    Option F C G Adm Description
    wmax-page S C G ADM largeur maxi du conteneur 'contenu' de la page. Cette dimension correspond à la largeur de la plus grande image pouvant être affichée sur le site.
    bp-tablet S C G ADM Point de rupture pour tablette. 768px par défaut. Il s'agit de la largeur d'une image plein écran sur tablette.
    bp-mobile S C G ADM Point de rupture pour smartphone. 480px par défaut. Il s'agit de la largeur d'une image plein écran sur mobile.
    wmax-lightbox S C G ADM largeur de l'image pour la lightbox sur desktop. Elle peut être supérieure à la largeur de l'écran afin d'être zoomée.
    wmax-lightbox-mobile S C G ADM largeur de l'image pour la lightbox si l'utilisation d'un mobile est détectée ou zéro pour utiliser la même taille que sur desktop.
    pixel-ratio S C G ADM Coefficient DPR. ex: 0:sans (par défaut), vide, 1 ou 2: 2 (équivalent retina), 3:3
    similarity S C G ADM Si la largeur entre 2 images alternatives est inférieure à ce taux (%), la plus petite image n'est pas créee. 80 par défaut.
    quality S C G ADM taux (%) pour compression jpeg. 70 par défaut
    wmin-image S C G ADM Largeur minimale pour qu'une image soit prise en charge par le plugin