Une galerie photo que le client remplit
fld-gallery="Nom de la galerie" Un champ galerie dans l’administration : le client ajoute des photos depuis la médiathèque, les retire et les fait glisser pour les mettre dans l’ordre.
Où le placer
Sur le bloc qui contient les photos. La première photo sert de modèle : la génération la répète pour chaque image, avec le src et le alt propres à l’image.
Une photo peut avoir son propre conteneur (<div><img></div>), comme dans l’exemple, ou venir en balises <img> nues à la suite, telles que Webflow les exporte.
Le champ n’apparaît dans l’administration que si la page a un nom de groupe : wp-fields-group sur son <body>.
Exemple : les photos du café
<div class="interior" fld-gallery="Interior photos">
<div class="interior__item">
<img src="images/room-1.jpg" alt="Window seats">
</div>
<div class="interior__item">
<img src="images/room-2.jpg" alt="The bar">
</div>
</div>Les photos sont choisies dans l’administration.
À retenir
- « Charger les données » n’importe pas de photos dans une galerie : le client les ajoute dans l’administration.
- Les galeries sont aussi protégées de « Charger les données » : il n’efface jamais les photos choisies par le client (l’option « Protect gallery fields on data import » des réglages du thème, activée par défaut).
- Pour une seule image, utilisez fld-image.
Erreurs fréquentes
Le journal de génération est l’onglet « Journaux » de votre projet sur themeforge.pro ; la vérification gratuite du balisage affiche les mêmes remarques.
<img src="images/room-1.jpg" alt="Window seats"
fld-gallery="Interior photos">Sur un <img>, la galerie ne fonctionne pas : la génération signale l’attribut dans le journal, et l’image reste figée.
<div fld-gallery="Interior photos">
<div><img src="images/room-1.jpg" alt="Window seats"></div>
</div>Sur le bloc qui contient les photos.
Le même dans les réglages du site ou sur une catégorie
fld-gallery | sur une page ou un article |
|---|---|
tax-gallery | sur une catégorie ou une étiquette |
Format alternatif
f_gallery, t_gallery fonctionne de la même façon : la génération donne un thème identique.