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 à celle de l'appareil et légendes
syntaxe 1 {up image-gallery=chemin_image | alt=texte}
syntaxe 2 {up image-gallery=chemin_dossier}
syntaxe 3 {up image-gallery}contenu avec des images{/up image-gallery}
@author: LOMART @version: UP-1.4 @license: GNU/GPLv3 @credit: jqPhotoSwipe de Ergec - photoswipe.com - Masonry - Shuffle.js @tags: image
  • 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, shuffle-x-x-x
  • grid-ratio: pour layout grid, rapport hauteur/largeur. 1:carré, 0.7:horizontal, 1.4:vertical
  • nb-img: nombre de vignettes affiché pour la galerie d'un dossier, 0 = toutes
  • gallery = 1: affiche la galerie dans une lightbox. Saisie obligée pour faire une galerie des images du contenu
  • random: tri aléatoire des images pour gallerie depuis un dossier
  • sort-desc: tri alphanumérique descendant

configuration de la legende (type et style)

  • legend: label pour image unique
  • legend-type = 2: 0:aucune, 1:hover-top, 2:hover-bottom, 3:sous l'image
  • legend-class: classe(s) pour la légende vignette
  • legend-style: style pour la légende vignette
  • legend-template: modèle pour légende séparée par 3 tirets. ex: [span style=""]##1##[/span][span style=""]##after@##[/span]

pour proposer le téléchargement haute-définition de l'image

  • download-label: texte ajouté à la légende . Ex: lang[en=Download; fr=Télécharger] ou 📥
  • download-title: texte de la bulle d'aide
  • download-style: classe ou style pour le lien de téléchargement. Ex: color:#FFF;bg-white

style des images

  • img-class: classe(s) pour bloc figure avec image et legende
  • img-style: style inline pour bloc avec image et legende

style du bloc principal

  • id: identifiant
  • class: classe(s) pour bloc principal
  • style: style inline pour bloc principal
  • css-head (base-css): style CSS inséré dans le HEAD

options pour layout=masonry uniquement (recherche et classement par sous-dossiers)

  • search: afficher un champ de recherche
  • shuffle-reverse: inverser l'ordre d'affichage des sous-dossiers

mode chargement progressif (layout=masonry uniquement)

  • infinite-scroll: 0 ou le nombre d'images affichées pour activer infinite scroll

gestion responsive. paramétres des images adaptées (srcset)

  • img-sizes: largeur image en pourcentage de wmax-page en mode desktop, tablette et mobile. 100,100,100 par défaut
  • wmin-image = 250: 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 désactiver. Multiplié par pixel-ratio
  • pixel-ratio: 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 inférieure a 80%, la plus petite n'est pas cree
  • bp-tablet = 768: point de rupture tablette
  • bp-mobile = 480: point de rupture smartphone

gestion du dossier de stockage des variantes de tailles pour les images (a mettre dans custom/prefset.ini)

  • srcset-dir: par défaut, dans le dossier de l'image. 'tmp/subdir' = non sauvegardé par Akeeba-backup
  • srcset-raz: 1 pour supprimer tous les sous-dossiers srcset du dossier passé comme option principale
Version 1.8
  • ajout photos dans sous-dossier et tri shuffle par Pascal
Version 1.9.5
  • création d'une galerie à partir d'images insérées entre les shortcodes (merci Marc)
  • suppression automatique des images (srcset) obsolètes (merci Marc)
  • ajout option shuffle-reverse pour inverser ordre des dossiers
Version 2.9
  • création des vignettes (srcset) dans le dossier tmp pour éviter la sauvegarde par Akeeba Backup
  • ajout d'une fonction de chargement progressif des images par Pascal
Version 3.0
  • l'option random est utilisable pour toutes les images lues dans un dossier
  • options download-xxx pour proposer le téléchargement de l'image haute définition
  • nouvelle présentation des légendes à partir du nom du fichier. Ajout option legend-template
Version 3.1
  • ajout option grid-ratio pour forcer un recadrage en mode grid
  • ajout option sort-desc pour tri alphanumérique naturel descendant

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.

Le soir sur Saint-Malo
Le soir sur Saint-Malo

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
légende saisie dans shortcode
légende saisie dans shortcode
2 = légende au survol en bas
Le soir sur Saint-Malo
Le soir sur Saint-Malo
1 = légende au dessous de la photo
Le soir sur Saint-Malo
Le soir sur Saint-Malo

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. 

Les remparts de Saint-Malophoto: Lomart
Les remparts de Saint-Malophoto: Lomart
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

{/up div}

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
Le soir sur Saint-Malo
Le soir sur Saint-Malo
img-sizes=50,50,100
Le soir sur Saint-Malo
Le soir sur Saint-Malo
img-sizes=75,75,100
Le soir sur Saint-Malo
Le soir sur Saint-Malo
<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)
Le soir sur Saint-Malo
Le soir sur Saint-Malo
pixel-ratio=2
Le soir sur Saint-Malo
Le soir sur Saint-Malo
pixel-ratio=3
Le soir sur Saint-Malo
Le soir sur Saint-Malo

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

Dans le cerveau d'un robot, on y trouve ...
Dans le cerveau d'un robot, on y trouve ...
Un éléphant bien taquin ❤  voir wikipedia
Un éléphant bien taquin ❤  voir wikipedia

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
Une belle prise de tête ☹
Une belle prise de tête ☹
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;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
Petit lion deviendra grand
Petit lion deviendra grand
Le fascinant regard du lion
Le fascinant regard du lion
Un adorable lionceau
Un adorable lionceau

Pour éviter que les photos occupent trop d'espace dans votre éditeur (TinyMCE, JCE), il suffit d'ajouter une petite règle dans le fichier CSS de l'éditeur.

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

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 :

La force du couple
La force du couple
Les lions en PNG sont aussi pris en charge
Les lions en PNG sont aussi pris en charge
Lion
Lion
Lionne perchée
Lionne perchée
Le fascinant regard du lion
Le fascinant regard du lion
Un lion attentif
Un lion attentif
Un lion majestueux
Un lion majestueux
Un coucou de la girafe
Un coucou de la girafe
Un adorable lionceau
Un adorable lionceau
Le bain de soleil
Le bain de soleil
Un lion très discret
Un lion très discret
Petit lion deviendra grand
Petit lion deviendra grand
La grosse peluche
La grosse peluche

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%}
Le fascinant regard du lion
Le fascinant regard du lion
Petit lion deviendra grand
Petit lion deviendra grand
La grosse peluche
La grosse peluche
Un coucou de la girafe
Un coucou de la girafe
Un lion très discret
Un lion très discret
Les lions en PNG sont aussi pris en charge
Les lions en PNG sont aussi pris en charge
Un lion attentif
Un lion attentif
Un lion majestueux
Un lion majestueux
Le bain de soleil
Le bain de soleil
Lionne perchée
Lionne perchée
La force du couple
La force du couple
Un adorable lionceau
Un adorable lionceau
Lion
Lion

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
Portrait zebre
Portrait zebre
Zebres
Zebres
Le fascinant regard du lion
Le fascinant regard du lion
Un lion majestueux
Un lion majestueux
Girafe
Girafe
Girafe au biberon
Girafe au biberon
Un coucou de la girafe
Un coucou de la girafe
Baby elephant
Baby elephant
Elephant baignade
Elephant baignade
Elephant savane
Elephant savane

Modification du style

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

Le fascinant regard du lion
Le fascinant regard du lion
Petit lion deviendra grand
Petit lion deviendra grand
La grosse peluche
La grosse peluche
Un coucou de la girafe
Un coucou de la girafe
Un lion très discret
Un lion très discret
Les lions en PNG sont aussi pris en charge
Les lions en PNG sont aussi pris en charge
Un lion attentif
Un lion attentif
Un lion majestueux
Un lion majestueux
Le bain de soleil
Le bain de soleil
Lionne perchée
Lionne perchée
La force du couple
La force du couple
Un adorable lionceau
Un adorable lionceau
Lion
Lion
{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é".

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 &#x1f4e5; 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=&#x1f4e5;
 | 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.

Le fascinant regard du lion
Le fascinant regard du lion 📥

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.

Le fascinant regard du lion
Le fascinant regard du lion

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.
  • random prend une image au hasard dans le dossier (nouveauté version 3.0)
  • 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 | 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}

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

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.

Attention, cette option a quelques contraintes :

  • un article doit contenir une seule action image-gallery avec l'option infinite-scroll
  • la progression est un paramétre de l'URL (?infinite=x).
    Cela interdit de rafraichir la page (F5) ou de transmettre une URL

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

Option F C G Adm Infos
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, à 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.

Option F C G Adm Infos
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 Infos
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 Infos
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

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 !

Pour info, cette page utilise 54 action(s) :
upactionslist (1) readmore (7) csv2def (2) listup (5) tabslide (1) toc (1) image-gallery (21) flexbox (3) span (2) modal (2) flexauto (1) div (2) table-par-lignes (4) addscript (1) jcontent-info (1)