Retour à l’assistance Contenu et médias Blocs Bloc Galerie

Bloc Galerie

Utilisez le bloc Galerie pour afficher plusieurs photos ensemble. Le bloc Galerie contient des blocs d’image individuels pour chaque image et les dispose de manière attrayante.

Vidéo didactique

Ajouter le bloc Galerie

Pour ajouter le bloc Galerie, cliquez sur l’icône de l’Outil d’insertion de bloc + et recherchez « galerie ». Cliquez dessus pour ajouter le bloc à l’article ou à la page.

💡

À l’aide du clavier, vous pouvez également saisir /gallery sur une nouvelle ligne et appuyer sur Entrée pour ajouter rapidement un nouveau bloc Galerie.

GIF montrant le processus de saisie de /gallery pour insérer un bloc Galerie.

Des instructions détaillées sur l’ajout de blocs sont disponibles ici.

Ajouter vos images

Lorsque vous ajoutez un bloc Galerie, deux options s’offrent à vous : Charger et sélectionner des images :

Le bloc Galerie présente deux options : Télécharger et Sélectionner des images.

L’option Télécharger vous permet de charger une ou plusieurs images de votre ordinateur vers votre site Web.

L’option Sélectionner des images vous permet de choisir parmi les images précédemment chargées dans votre médiathèque, ou choisissez depuis Google Photos, dans la bibliothèque de photos Pexels gratuites ou dans Openverse.

Ajouter des images à la galerie existante

Vous pouvez ajouter plus d’images à la galerie que vous avez déjà créée en réalisant les actions suivantes :

Étape 1 : Ajouter le bloc Galerie. Il y a plusieurs manières de sélectionner le bloc Galerie.

Vous pouvez soit cliquer sur une image dans le bloc Galerie puis cliquez sur sélectionnez l’icône de Galerie dans la barre d’outils, au-dessus de l’image.

Vous pouvez aussi cliquez sur Affichage en liste en haut à gauche de votre éditeur et sélectionnez le bloc Galerie de l’aperçu.

Étape 2 : Cliquez sur Ajouter dans la barre d’outils au-dessus du bloc Galerie pour ajouter plus d’images.

Une fois que vous avez cliqué sur Ajouter, vous pouvez sélectionner Ouvrir la médiathèque pour ajouter des images que vous avez déjà mises en ligne (ou accéder au options de média gratuit) ou encore Mettre en ligne pour mettre en ligne de nouvelles images à votre galerie.

Barre d’outils du bloc

Lorsque vous cliquez sur le bloc, une barre d’outils d’options s’affiche :

Une galerie est sélectionnée et les options d’alignement développées.
La barre d’outils de la galerie prend en charge plusieurs alignements, notamment de grande largeur et de pleine largeur, selon le thème.

La barre d’outils du bloc Galerie contient les options suivantes :

📌

Si vous ne voyez pas l’option permettant de définir la largeur du bloc en mode grande ou pleine largeur et que votre thème prend en charge ces options, il est possible que le bloc ait été ajouté à un bloc Groupe. Vous pouvez en savoir plus sur le bloc Groupe ici.

Réglages du bloc

Lorsque vous cliquez sur le bloc, des réglages de bloc supplémentaires apparaissent dans la colonne latérale droite. Si vous ne voyez pas la colonne latérale, vous devrez peut-être cliquer sur l’icône ⚙️ (engrenage/pignon) dans le coin supérieur droit pour afficher les réglages.

Les réglages du bloc sont disponibles dans la colonne latérale droite.
Réglages du bloc
  1. Cliquez sur l’espace blanc entre les images.
  2. Sélectionnez le bloc Galerie à l’aide de l’affichage en liste.
  3. Sélectionnez Gallery dans le fil d’Ariane en bas de l’écran :
Le fil d’Ariane en bas de l’écran de l’éditeur est affiché, avec la galerie indiquée par une flèche.

Le bloc Galerie présente les réglages suivants :

Colonnes

Vous pouvez choisir le nombre de colonnes de votre bloc Galerie.

Vous pouvez choisir entre 1 et 8 colonnes. Vous ne pouvez pas sélectionner plus de colonnes que vous n’avez d’images, donc si vous ajoutez 4 images, vous aurez l’option de choisir un maximum de 4 colonnes. Ce nombre augmentera au fur et à mesure que vous ajouterez plus d’images jusqu’à ce que vous atteigniez le maximum de 8.

Vos images se disposeront automatiquement de manière à optimiser leur présentation, quel que soit le nombre de colonnes sélectionné. Essayez de modifier le nombre de colonnes et choisissez ce qui vous convient le mieux.

Rogner les images

Vous pouvez choisir si vous souhaitez que les images de votre galerie soient rognées ou non. Cette option est utile si vous avez des images de tailles et de formes différentes.

Si les images de votre galerie sont de tailles différentes, les rogner leur donnera une apparence plus uniforme, comme indiqué ci-dessous. Si vous ne souhaitez pas rogner les images, mais qu’elles aient quand même la même taille, assurez-vous de charger des fichiers image qui ont déjà la même taille.

Une galerie avec images recadrées :

Exemple de galerie avec des images rognées, avec une taille uniforme.

Une galerie sans images recadrées :

Exemple de galerie avec des images non recadrées, avec des tailles inégales.
Réglages du lien

Dans les réglages du bloc Galerie, trois options sont possibles pour lier la galerie :

Vous pouvez également souhaiter lier des images individuelles de la galerie à différentes pages. Vous pouvez lier une image en suivant ces étapes :

  1. Cliquez sur l’image que vous souhaitez lier.
  2. Dans la barre d’outils qui s’affiche, cliquez sur l’icône de lien (cela ressemble au maillon d’une chaîne) :barre d’outils d’image avec l’icône du lien surligné
  3. Cliquez sur l’icône en forme de crayon pour modifier le lien.
  4. Collez l’URL à laquelle vous souhaitez lier l’image ou utilisez le champ de recherche pour sélectionner une page publiée sur votre site.
  5. Appuyez sur Entrée sur votre clavier pour confirmer la modification.

Pour en savoir plus sur l’ajout de lien à des images individuelles, consultez notre guide sur le bloc d’image.

Réorganiser les images dans la galerie

Les images sont ajoutées à la galerie dans l’ordre dans lequel vous les avez sélectionnées à l’origine. Vous remarquerez un numéro à côté de chaque image lorsque vous la sélectionnez. Ce numéro indique l’ordre d’apparition de l’image dans votre bloc Galerie.

GIF montrant comment réorganiser les images dans la galerie

Vous pouvez également réorganiser les images de la galerie après avoir créé la galerie. Pour ce faire, cliquez sur une image de la galerie et utilisez les flèches gauche/droite pour réorganiser les images :

GIF montrant comment réorganiser les images dans le bloc Galerie à l’aide des flèches gauche/droite

Vous pouvez également cliquer sur une image et choisir l’option Glisser (icône avec six points) dans la barre d’outils pour déplacer votre image :

L’option Glisser dans la barre d’outils de l’image est indiquée par une flèche.
Utilisez l’option Glisser dans la barre d’outils pour déplacer des images.

Pour copier des images, les dupliquer ou supprimer une image, cliquez sur les trois points en haut à droite de la barre d’outils et sélectionnez l’option de votre choix.

L’image montre un bloc d’image sélectionné, les ... sur lesquels vous avez cliqué pour afficher plus de réglages et l’option Copier indiquée par une flèche.
Copiez, dupliquez ou supprimez des images à l’aide des réglages de barre d’outils développés.

Ajouter des légendes d’images

Après avoir ajouté des images à votre galerie, vous pouvez ajouter une légende à chaque image en cliquant dessus, puis en cliquant sur la zone Ajouter une légende :

Image du bloc Galerie dans un cadre orange, avec la case Légende en surbrillance.

Si vous avez rédigé des légendes pour les images dans la médiathèque et que vous ajoutez ensuite le bloc Galerie, le bloc Galerie affichera les légendes que vous avez rédigées. Toutefois, si vous ajoutez des légendes aux images de la médiathèque après avoir ajouté le bloc Galerie, ces légendes n’apparaîtront pas dans le bloc Galerie. Dans ce cas, vous pouvez saisir les légendes manuellement sur le bloc Galerie ou supprimer et ajouter à nouveau le bloc pour qu’il utilise les légendes à partir de la médiathèque.

Avancé

L’onglet Avancé vous permet d’ajouter une classe CSS à votre bloc. Vous pouvez ainsi écrire un CSS personnalisé et configurer le style du bloc à votre guise.

La section Avancé vous permet d’ajouter une classe CSS à votre bloc.

Copied to clipboard!