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 :

• jqPhotoSwipe de Ergec
• photoswipe.com
• Masonry

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. le 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

Nouveauté version 3.0

L'humanisation des noms de fichiers a été repensée. 

Survolez-moi

Un fichier nommé 002-Les-remparts-de-Saint--Malo---Lomart.jpg
anciennement affiché : Les remparts de Saint-Malo-Lomart
le sera sous la forme : Les remparts de Saint-Malo -- Lomart

• Les underscores sont convertis en tirets
• les tirets simples sont remplacés par des espaces.
• Les tirets doubles deviennent des tirets simples.
• 3 tirets ou plus seront convertis en " -- "

{up image-gallery=images/actions-demo/gallery/humanize
| legend-template=[span style="color:yellow;font-weight:bold"]##1##[/span][span style="display:block"]photo: ##2##[/span]}

En utilisant la nouvelle option legend-template, il est possible de styler les parties avant et après le triple tirets.
Le modèle HTML est saisi en bbcode avec les mots-clés ##1## et ##2## qui seront remplacés par les 2 parties du nom.
Un nom de fichier non conçu pour cet usage sera simplement affiché sans les styles

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>

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>

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

pixel-ratio=0 (défaut)

pixel-ratio=2

pixel-ratio=3

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.

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 🆙 fichier custom/prefs.ini

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

<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>

un-elephant-bien-taquin.jpg="Un éléphant bien taquin &#x2764;Un éléphant bien taquin &#x2764;&nbsp; <a href='https://fr.wikipedia.org/wiki/elephant' target='blank' style='color:yellow !important'>voir wikipedia</a>"
une-belle-prise-de-tete.jpg="Une belle prise de tête &#x2639;"

Galerie à partir des images entre les shortcodes

Version 1.9.5   Suite à une suggestion de Marc sur le forum

Pour faciliter la mise en place d'une galerie d'images avec un éditeur wysiwyg, il est possible d'ajouter les images dans l'ordre désiré avec le bouton image de l'éditeur. La seule obligation est de forcer l'affichage sous forme d'une galerie avec l'option gallery

Par défaut, la légende sera le nom "humanisé" du fichier sauf si l'attribut alt est indiqué.

Saisie avec éditeur wysiwyg

Equivalent en mode code

{up image-gallery | gallery}
<img src="/images/actions-demo/gallery/lions/002-petit-lion-deviendra-grand.jpg" alt="Légénde dans attribut alt"/>
<img src="/images/actions-demo/gallery/lions/001-le-fascinant-regard-du-lion.jpg">
<img src="/images/actions-demo/gallery/lions/010-un-adorable-lionceau.jpg" >
{/up image-gallery}

Le résultat

img{max-width: 100px;height: auto;}

GALLERY : toutes les images du dossier

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 | random}

pour avoir ce résultat :

Les images sont toujours affichées selon l'ordre alphabétique de leur nom de fichier. Depuis la version 3.0, Il est possible d'utiliser l'option random pour avoir un ordre aléatoire.

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.

grid : grille de taille fixe

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.

J'utilise également la nouvelle option (v3.1) grid-ratio qui permet d'avoir des images de même hauteur. Il suffit d'indiquer comme agument le rapport hauteur/largeur d'une image pour que l'action recadre au plus proche toutes les images. Une valeur de 1 pour obtenir des photos carrées, inférieur à un 1 pour un format horizontal ou supérieur à 1 pour des vues verticales. Par défaut, le recadrage est réalisé à partir du centre de l'image. Vous pouvez modifier l'origine en ajoutant une règle CSS avec l'option css-head

{up image-gallery=images/actions-demo/gallery/lions
 | layout=grid-6-4-2
 | grid-ratio=0.8
 | css-head=#id figure.upgallery img[object-position:0% 0%}

shuffle : grille fluide avec recherche et classement par sous-dossiers

Version 1.8 Cette option ajoutée par Pascal Leconte affiche dans une grille fluide des images stockées dans des sous-dossiers.

Version 1.9.5 sur une suggestion d'un utilisateur, Pascal a ajouté une option shuffle-reverse qui permet d'inverser l'ordre d'affichage des dossiers

Une recherche sur le titre ou la légende des photos est possible ainsi que la sélection d'un des sous-dossiers.

{up image-gallery=images/actions-demo/gallery/animaux
 | layout=shuffle 
 | random
 | search}

• toutes les photos des sous-dossiers de premier niveau du répertoire "animaux" seront affichées
• le choix de ce mode se fait simplement par layout=shuffle. Par défaut, la grille est de 3 sur grand écran, 2 sur tablette et 1 sur mobile.
  Vous pouvez choisir une autre présentation en l'indiquant sous la forme layout=shuffle-x-x-x
• l'option random permet d'afficher les images selon un ordre aléatoire. Le principal intérêt de cette option est d'éviter qu'elles soient regroupées par dossiers lors de l'affichage de toutes les images..
• search affiche le champ de recherche

TOUT zebres lions girafes elephants

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
}

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"

Proposer le téléchargement de l'image

Nouveauté version 3.0 Vous pouvez ajouter, à la fin de la légende, une option pour téléchager l'image dans la plus haute définition disponible.

• download-label : (obligatoire) le texte pour le lien de téléchargement.
  Exemple : télécharger ou lang[en=Download; fr=Télécharger] ou 📥 ou {up icon=Ux1f4e5}
• download-title : (optionnel) contenu du texte d'aide au survol du lien de téléchargement.
  Exemple : lang[en=Download the image in high definition; fr=Télécharger l'image en haute définition]
• download-style : (optionnel) classe ou style inline appliqué au label.
  Exemple : color:#FFF;bg-red

{up image-gallery=images/actions-demo/gallery/lions/001-le-fascinant-regard-du-lion.jpg
 | download-label=📥
 | download-style=bg-blanc
 | download-title=lang[en=Download the image in high definition; fr=Télécharger l'image en haute définition]}

L'argument de l'option download-label est un caractère Unicode symbolisant le téléchargement. Pour le rendre visible, il sera sur fond blanc à l'aide de l'option download-style. Une aide sur le rôle de ce bouton est fourni par download-title.

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 !

{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 | random | 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}

Infinite-scroll

Cette option, proposée par Pascal, est disponible depuis la version 2.9.

Elle permet d'afficher une grande galerie d'images en chargeant progressivement en mémoire.
Au fur et à mesure de la consultation de la page, les images se chargeront par tranche de X images.
Il suffit d'indiquer l'option infinite-scroll avec le nombre d'images d'une tranche.

Pour respecter ces contraintes, la démonstration est visible sur cette page : Démo image-gallery infinite-scroll

Le code de la démo est :

{up image-gallery=images/actions-demo/gallery/infinite | infinite-scroll=5}

Emplacement des images alternatives (srcset)

Par défaut, les copies de différents formats d'une image sont stockés dans un sous-dossier srcset de son dossier.

Depuis la version 2.9, il est possible de les stocker à un autre emplacement.

Par exemple, lors d'une sauvegarde, vous pouvez préférer ne pas les sauvegarder pour réduire le poids du fichier .jpa ou .zip.
Lors d'une hypothétique restauration, elle seront automatiquement recrées. Cela ne prendra qu'un peu de temps lors du premier affichage de la page.

2 options concerne les srcset :

srcset-dir

Chemin relatif à la racine du site qui contiendra les srcset.

tmp/up-img est un bon choix, puisque le dossier tmp n'est pas sauvegardé par akeeba-backup.

Je vous conseille d'ajouter cette option dans le dossier plugins/content/up/actions/image_gallery/custom/prefs.ini

srcset-raz

Appelle une routine qui va supprimer tous les dossiers srcset du dossier indiqué comme argument principal.

Cela est très utile pour nettoyer les anciens emplacements après modification de srcset-dir

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
• Infos : valeur par défaut et explications diverses

Les principales options

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, à créer avec un éditeur de texte comme notepad, est 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.

Styles et classes

Ces options permettent de modifier le rendu graphique.

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 :

Version 1.9.5  Toujours sur une suggestion de Marc

Si l'image originale est plus récente que les srcset, ils seront recréés. Cela permet de changer une image sans changer son nom. Les versions réduites seront toujours à jour !