BTS NDRC, épreuve E5B : tutoriel WordPress

Insérer et modifier une galerie d'images

Une galerie présente plusieurs photos côte à côte : la gamme d'infusions, les étapes d'une fabrication, l'ambiance d'un salon. Le client compare d'un coup d'œil et peut agrandir une photo pour voir le détail d'un produit ; pour l'entreprise, c'est une vitrine qui montre ses produits sans alourdir la page de texte.

Dans la circulaire

Famille « Contenu » de la liste WordPress : « Insérer et modifier une galerie » (annexe VI-3 de la circulaire nationale d'organisation, session 2026).

Critères de la grille d'évaluation concernés : 1. « la qualité et la pertinence des contenus publiés » ; 2. « le suivi rigoureux et l'optimisation du référencement » ; 3. « la cohérence entre les techniques, les outils mobilisés, les contenus et les moyens de diffusion ».

Où le trouver

Insérer une galerie : dans l'éditeur, bouton +, famille Média, bloc Galerie.

Modifier une galerie : clic sur la galerie, puis sa barre d'outils (« Ajouter », « Lien », « Ajouter une légende ») et ses réglages dans le panneau Bloc.

Les étapes

  1. Insérer : dans l'article ou la page, bouton « + », bloc Galerie (famille Média). Le bloc vide propose de téléverser des images ou de les choisir dans la médiathèque.
  2. Sélectionner une galerie existante : cliquer sur la galerie, ou sur « Galerie » dans le fil affiché en bas de l'éditeur (Page › Galerie) ; un clic sur une photo ne sélectionne que cette photo. La barre d'outils de la galerie apparaît au-dessus, ses réglages dans le panneau Bloc.

    Capture 1. La galerie de la page « Notre concept » sélectionnée : encadrés, le bouton « Ajouter » et les réglages de la galerie :

    Éditeur de la page Notre concept : la galerie de trois photos (mains qui trient des feuilles de thé, théière en fonte, coussin brodé) est sélectionnée ; au-dessus, sa barre d'outils avec le bouton Ajouter, encadré en rouge. À droite, le panneau du bloc Galerie, encadré en rouge : Colonnes à 3, Résolution, Recadrer les images pour les adapter activé, Ordre aléatoire désactivé et Proportion de taille réglée sur Taille d'origine.

    Voir la capture en grand

  3. Ajouter des images : bouton Ajouter de la barre d'outils, puis « Ouvrir la médiathèque » (images déjà envoyées) ou « Téléverser » (images de l'ordinateur). Dans la médiathèque, cocher les images voulues, puis cliquer sur « Ajouter à la galerie ».
  4. Réorganiser, retirer, légender : dans la fenêtre de la médiathèque ouverte par « Ajouter », le lien « Modifier la galerie » affiche les images de la galerie. On les glisse-dépose pour changer leur ordre, la croix d'une image la retire, le champ « Légende… » sous chaque image reçoit sa légende. Valider avec Mettre à jour la galerie. Dans l'éditeur aussi, une photo sélectionnée se déplace avec les flèches de sa barre d'outils.

    Capture 2. La fenêtre « Modifier la galerie » : encadrés, les liens « Modifier la galerie » et « Ajouter à la galerie », les images à réorganiser et le bouton « Mettre à jour la galerie » :

    Fenêtre Modifier la galerie de la médiathèque : à gauche, sous Actions, les liens Annuler la galerie, Modifier la galerie et Ajouter à la galerie, ces deux derniers encadrés en rouge ; au centre, encadrés en rouge, la phrase Glissez-déposez les médias pour les réorganiser et les trois images concept1, concept3 et concept4, chacune avec une croix pour la retirer et un champ Légende ; en bas à droite, le bouton bleu Mettre à jour la galerie, encadré en rouge.

    Voir la capture en grand

  5. Régler la galerie dans le panneau Bloc : « Colonnes » (de 1 à 8, sans dépasser le nombre d'images), « Résolution » (la taille des images chargées), « Recadrer les images pour les adapter » (des images de même taille sur chaque rangée), « Ordre aléatoire » (visible sur le site seulement) et « Proportion de taille ».
  6. Lien : le bouton « Lien » de la barre d'outils choisit ce que fait un clic sur une photo : « Agrandir au clic » (la photo s'ouvre en grand sur la page), « Lier les images aux fichiers média », « Lier les images aux pages de fichiers joints » ou « Aucun ».
  7. Légende : « Ajouter une légende », dans la barre d'outils de la galerie, écrit une légende pour toute la galerie ; la légende d'une seule photo s'ajoute depuis la barre d'outils de cette photo.
  8. Cliquer sur Enregistrer, puis contrôler la galerie sur le site.

    Capture 3. La galerie sur la page « Notre concept » du site : encadrée, la galerie, sans légende :

    Page Notre concept du site Alia Nature : sous la dernière phrase du texte, la galerie, encadrée en rouge, aligne trois photos carrées de même taille, des mains qui trient des feuilles de thé vert, une théière en fonte devant des lumières et un coussin brodé d'une feuille verte, sans aucune légende.

    Voir la capture en grand

Attention

« Mettre à jour la galerie » ne modifie que la galerie dans l'éditeur : le site ne change qu'après un clic sur « Enregistrer ». Pour compléter une galerie, la sélectionner et utiliser « Ajouter » ; insérer un nouveau bloc Galerie créerait une seconde galerie.

Captures réalisées sur le site modèle Alia Nature (WordPress 7.0.2, thème Astra 4.13, extension Spectra) : selon la version installée le jour de l'épreuve, un libellé peut changer.

Bien composer une galerie

Une galerie réussie raconte une seule chose en quelques images de même qualité, et chaque image peut être comprise sans la voir grâce à son texte alternatif. Exemple avec la galerie de la page « Notre concept » :

Exemple : la galerie de la page « Notre concept »
Élément Réussi À éviter
ImagesTrois à six photos nettes, de même format, sur un même thèmeDes photos de tailles et de styles différents, sans lien entre elles
Légendes« La récolte du thé vert », « L'infusion en théière » : une ligne utile au clientAucune légende, comme sur le modèle
Textes alternatifsUn texte par image, qui dit ce qu'elle montreDes images sans texte alternatif, comme sur le modèle
Lien« Agrandir au clic », pour voir le détail d'un produit« Aucun » : le client ne peut pas agrandir la photo
  • Autant de colonnes que d'images sur une rangée, au plus quatre pour garder des photos assez grandes.
  • « Recadrer les images pour les adapter » activé quand les photos n'ont pas le même format.
  • Contrôler la galerie sur ordinateur et sur mobile, où les photos s'affichent plus petites.

Sur le modèle, la galerie de la page « Notre concept » réunit trois belles photos, mais sans légende, sans texte alternatif et sans lien (capture 3) : le client ne peut pas les agrandir, et un lecteur d'écran les passe sous silence. C'est l'exemple à compléter.

À l'épreuve

Exemple de consigne

Sur la page « Notre concept », complétez la galerie : ajoutez la photo de la théière en verre, présente dans la médiathèque, placez-la en deuxième position, donnez une légende et un texte alternatif à chaque image, et permettez au client d'agrandir les photos d'un clic.

Ce que l'examinateur vérifie

  • La photo ajoutée à la galerie existante, à la bonne place.
  • Une légende courte et utile pour chaque image, sans faute, et un texte alternatif pour chacune.
  • « Agrandir au clic » réglé, un nombre de colonnes adapté.
  • La page enregistrée et la galerie contrôlée sur le site.

Les erreurs fréquentes

  • Insérer une nouvelle galerie au lieu de compléter celle qui existe.
  • Cliquer sur une photo et chercher les réglages de la galerie : c'est la photo seule qui est sélectionnée.
  • Oublier « Mettre à jour la galerie », puis « Enregistrer ».
  • Chercher l'ordre aléatoire dans l'éditeur : il ne se voit que sur le site.

L'essentiel à retenir

  • Bloc Galerie ; pour une galerie existante, « Ajouter », puis « Ouvrir la médiathèque » ou « Téléverser ».
  • « Modifier la galerie » : glisser-déposer pour l'ordre, croix pour retirer, champ Légende, puis « Mettre à jour la galerie ».
  • Panneau Bloc : Colonnes, Recadrer, Ordre aléatoire ; bouton Lien : « Agrandir au clic » ; puis « Enregistrer ».

Voir aussi

Dans la série des tutoriels WordPress :

Dans le tutoriel WordPress complet :

Documentation officielle de WordPress, en anglais : le bloc Galerie.

Tous les tutoriels WordPress