Widgets multimédias : galerie de photos

Le widget Photo Gallery vous permet d'ajouter facilement plusieurs images à votre site, ou de connecter un flux Instagram (voir la section « Connecter un flux Instagram professionnel » dans cet article). Lorsqu'un visiteur clique sur une image de la galerie, celle-ci peut s'ouvrir dans une visionneuse (lightbox) ou renvoyer vers une page de votre site, une URL, une popup, une ancre, une adresse e-mail, et bien plus. Vous pouvez ajouter un titre, une description et un texte alternatif à chaque image.

Contenu dynamique : Ce widget peut aussi afficher des pages dynamiques.

Éditeur de contenu

La zone de contenu permet de gérer le contenu du widget.

Cliquez sur l'élément pour ouvrir le menu flottant, puis cliquez sur l'option d'édition du contenu.

Options de configuration de la galerie

• Pour activer les liens sur les images de la galerie, cliquez sur l'option Activer les liens sur les images de la galerie en haut de la zone de contenu.
  • Cela désactive la visionneuse (lightbox). Si une image n'a pas de lien, un clic dessus n'aura aucun effet.
• Cliquez sur Connecter Instagram pour connecter un compte Instagram professionnel (seules les images s'affichent, les publications contenant des vidéos ne sont pas visibles). Les comptes Instagram professionnels incluent les comptes Business et Creator.
• Cliquez sur Ajouter une image pour ajouter des images (vous pouvez en sélectionner plusieurs à la fois pour les ajouter à la galerie). Les options suivantes sont disponibles :
  • Choisir parmi les images directement disponibles.
  • Cliquez sur Plein écran pour ouvrir l'Image Picker.
  • Cliquer sur l'icône plus pour importer une image.

Options de réglage par image

Cliquez sur une image pour afficher ses options de réglage.

• Remplacer l'image.

• Modifier.

• Position. Ajustez la partie de l'image qui s'affiche.

• Modifier le lien. Visible uniquement si l'option Activer les liens sur les images de la galerie est activée. Si aucun lien n'est défini, un clic sur l'image n'aura aucun effet.

• Titre. Si vous ne voulez pas de titre, cliquez sur l'icône en forme d'œil. Si aucun texte n'est saisi mais que le champ reste visible, un espace vide subsistera dans le widget.

• Description. Si vous ne voulez pas de description, cliquez sur l'icône en forme d'œil. Si aucun texte n'est saisi mais que le champ reste visible, un espace vide subsistera dans le widget.

  Remarque : Le champ de texte long propose plusieurs options de mise en forme, comme l'italique, le gras ou le souligné.

• Bouton. Si vous ne voulez pas de bouton, cliquez sur l'icône en forme d'œil pour le masquer.

• Texte de remplacement. Saisissez votre propre texte alternatif.

Éditeur de design

Cliquez sur l'élément pour ouvrir le menu flottant, puis cliquez sur l'option de modification du design.

1. Pour modifier la disposition de la galerie, cliquez sur l'onglet Mise en page. Vous disposez des options suivantes :

   • Cliquez sur la disposition en place pour afficher d'autres options de design pour votre galerie. Les dispositions se gèrent par appareil, selon la vue dans laquelle elles sont sélectionnées.
   • Vous pouvez ajouter du texte sous les images, au survol ou sur l'image. Sélectionnez Text/button under image, Text/button on hover ou Text/button on image, puis choisissez une position pour le texte ou le bouton.
   • Choisissez le Nombre de colonnes de la galerie.
   • Pour ajuster automatiquement le nombre de colonnes et éviter les espaces vides, cliquez sur l'option Ajuster automatiquement les colonnes.
   • Choisissez le nombre de Lignes visibles à afficher.

2. Pour configurer les images, cliquez sur l'onglet Images. Vous disposez des options suivantes :

   • Modifier la hauteur des images et l'espacement entre elles (pour toutes les images de la galerie). Cela ne s'applique qu'à certaines dispositions.

   • Ajouter des coins arrondis.

   • Afficher l'image entière dans la galerie.

   • Ajouter une ombre.

   • Modifier l'effet de survol et l'animation des images (disponible dans le nouveau widget).

   • Désactiver l'optimisation des images.

     Remarque : Désactiver l'optimisation des images peut nuire à la vitesse de chargement ou aux performances de la page.

3. Pour configurer le cadre (par exemple ajouter une couleur de fond ou personnaliser la bordure), cliquez sur l'onglet Cadre.

   • Pour désactiver le Chargement différé, cliquez sur l'option (activé par défaut, il améliore la vitesse de la page en ne chargeant les images qu'au moment où elles deviennent visibles au défilement).
   • Pour masquer l'option de partage, cliquez sur l'option Masquer les images partagées. Cela supprime le bouton de partage que les visiteurs voient en cliquant sur une image.

4. Pour modifier l'espacement intérieur et extérieur, cliquez sur l'onglet Espacement.

Pour en savoir plus sur les options de design communes à tous les widgets (disposition, style ou espacement), consultez « Design des widgets ».

Connecter un flux Instagram professionnel

En raison d'un changement effectué par Meta, toute connexion établie avant décembre 2024 devra être rétablie.

Les utilisateurs disposant d'un compte Instagram professionnel (et non d'un compte privé ou personnel) peuvent ajouter un flux Instagram au widget Photo Gallery. Le widget affiche jusqu'à 100 images de votre flux et se met à jour automatiquement à chaque nouvelle publication. Si une publication Instagram contient plusieurs images, seule la première s'affiche dans le widget.

Un compte Instagram professionnel peut être de type Business ou Creator.

Remarque :

• L'apparition de nouvelles images peut prendre jusqu'à 2 heures.
• Seules les photos s'affichent (pas les vidéos), et uniquement depuis des comptes publics de type Business.
• Un seul compte Instagram peut être connecté par site.
• Les photos en collaboration ne peuvent pas être affichées.
• Pour changer de compte, ouvrez la galerie connectée, cliquez sur Déconnecter et connectez-vous avec le nouveau compte. Il peut être nécessaire de vider le cache du navigateur après la déconnexion et avant de retenter la connexion.

Pour connecter un flux Instagram professionnel au widget Photo Gallery :

1. Ajoutez le widget Photo Gallery à votre site. Pour en savoir plus, consultez « Ajouter des widgets ».
2. Cliquez sur Connecter Instagram.
3. Saisissez vos identifiants Instagram, puis cliquez sur Connection.
4. Cliquez sur Autoriser.

Si une erreur survient lors de la connexion, ouvrez instagram.com dans votre navigateur. Dans l'onglet Profil, cliquez sur l'icône de paramètres, sélectionnez Déconnexion, puis reconnectez-vous au widget.

Légendes des images

Les légendes des images peuvent s'afficher au survol d'une image. Pour les activer, cliquez sur l'option Afficher les légendes des images dans l'onglet Content du widget Photo Gallery (désactivé par défaut).

Vous pouvez aussi modifier la couleur, la taille et la police du texte, ainsi que la couleur de fond des légendes, dans l'onglet Design.

Remarque : Cette fonctionnalité n'est disponible que sur ordinateur, car le survol n'existe pas sur mobile.

Dépannage du flux Instagram

La galerie de photos n'affiche pas mes images Instagram ou affiche les mauvaises images

Pour reconnecter correctement Instagram au widget Photo Gallery :

1. Dans l'éditeur, cliquez sur le widget Photo Gallery pour ouvrir l'éditeur de contenu.
2. Pour déconnecter le widget d'Instagram, cliquez sur Déconnecter.
3. Fermez l'éditeur.
4. Rendez-vous sur instagram.com et déconnectez-vous directement d'Instagram.
5. Ouvrez une fenêtre de navigation privée, retournez dans l'éditeur et reconnectez Instagram au widget Photo Gallery.

Mon flux Instagram s'est déconnecté

Si votre connexion Instagram est interrompue, votre jeton d'authentification a peut-être expiré : vous devez alors reconnecter le widget Photo Gallery à Instagram et autoriser à nouveau vos identifiants.

Pour reconnecter le widget Photo Gallery à Instagram :

1. Cliquez sur le widget Photo Gallery pour ouvrir l'éditeur de contenu.
2. Cliquez sur Connecter Instagram.
3. Saisissez vos identifiants Instagram, puis cliquez sur Connection.
4. Cliquez sur Autoriser.

Dépannage du widget Photo Gallery

Résolvez les problèmes liés au widget Photo Gallery.

L'option Connect Data n'apparaît pas dans le widget Galerie de photos

Si l'option Connect Data n'apparaît pas lorsque vous faites un clic droit sur votre widget Photo Gallery, vérifiez les points suivants :

• Assurez-vous que la bibliothèque de contenu (content library) contient des éléments. Si elle est vide, l'option Connect Data ne s'affiche pas.
• Dans votre collection, vérifiez que le champ Page Item URL est défini sur Item et non laissé vide.
• Vérifiez que tous les champs de votre collection sont associés au bon type de données. Une erreur fréquente consiste à laisser tous les champs en Rich Text alors qu'ils devraient correspondre à leur contenu réel (par exemple, les champs d'image doivent être de type Image).

Après avoir vérifié et corrigé ces points, republiez votre site pour appliquer les changements.