Galeries

Le shortcode galerie permet d'ajouter simplement plusieurs images cliquables à vos pages.
Les images sont cliquables et peuvent être agrandies.

Afficher avec toutes les images dans un dossier

On peut avec ce shortcode afficher toutes les images dans un dossier.
Par exemple, pour afficher toutes les images du dossier media/img/cat :

input

[gallery folder="cat"]

output

Galeries avec des structures de données

Disons que j'ai les données suivantes dans le fichier de configuration data.ini :

[data]

sites : [
{
title: "Qwwwest.com",
thumb: "sites/qwwwest.com.jpg",
img: "sites/qwwwest.com.jpg",
link: "https://qwwwest.com"
}, {
title: "Synanthropia.fr",
thumb: "sites/synanthropia.fr.jpg",
img: "sites/synanthropia.fr.jpg",
link: "https://synanthropia.fr"
}, {
title: "Anakunda.fr",
thumb: "sites/anakunda.fr.jpg",
img: "sites/anakunda.fr.jpg",
link: "https://anakunda.fr"
}, {
title: "Namaskar.fr",
thumb: "sites/namaskar.fr.jpg",
img: "sites/namaskar.fr.jpg",
link: "https://namaskar.fr"
}
]

backoffice: [
{
title: "Login",
thumb: "doc/login.jpg",
img: "doc/login.jpg"
}, {
title: "Backoffice",
thumb: "doc/backoffice.jpg",
img: "doc/backoffice.jpg"
}, {
title: "MediaManager",
thumb: "doc/ifm.jpg",
img: "doc/ifm.jpg"
}
]

Je peux simplement transformer ces données en galeries dynamiques.

Exemple avec des images de sites

input

### Exemple avec des images de sites

[gallery items="data.sites" md=2]

output

Exemple avec des images de sites

Exemple avec des images du backoffice

input

`md=3` signifie qu'il y aura 3 colonnes.

[gallery items="data.backoffice" md=3]

output

md=3 signifie qu'il y aura 3 colonnes.

Galeries avec des colonnes responsives

Les colonnes sont responsives.

Pour définir rapidement le nombre de colonnes qui rendent le mieux vos galeries, utilisez les paramètres xs, md, lg.

[gallery items="data.sites" xs=2 md=3 lg=4]

xs=2 signifie qu'il y aura 2 colonnes à partir des écrans mobiles et plus (1 est la valeur par défaut).
md=3 signifie qu'il y aura 3 colonnes à partir des écrans moyens et plus (2 est la valeur par défaut).
lg=4 signifie qu'il y aura 4 colonnes à partir des grands écrans et plus (la valeur par défaut est celle de md).

Exemple :

input

[gallery items="data.sites" xs=2 md=3 lg=4]

output

input

[gallery folder="cat" xs=1 md=2 lg=3]

output

Généralement, de mon point de vue, définir md est suffisant :

input

[gallery folder="cat" md=3]

output

input

[gallery folder="cat" md=2]

output