> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-gallery.md). # AX - Galerie ## Vue d’ensemble **AX - Galerie** est un composant Experience Cloud qui affiche des images et du contenu selon quatre styles de mise en page sur les pages Experience Sites : carrousel (diaporama), onglets (sections organisées), grille (multicolonne) ou galerie (présentation d’images). Utilisez-le pour afficher des photos de produits, des portfolios de projets, des images d’études de cas, des collections de ressources ou tout contenu visuel que les utilisateurs du portail doivent parcourir. Configurez le style de mise en page, la navigation et les sources d’images dans Experience Builder, sans code.
{% hint style="info" %} **Découvrez-le dans un projet réel** [Catalogue de cours d’automne](https://docs.avonnicomponents.com/projects/use-cases/portals-and-partner-sites/fall-course-catalog): Un catalogue de cours sur un portail, six photos avec le prix et les places restantes. {% endhint %} ## Premiers pas Utilisez ce tutoriel simple pour apprendre les bases du composant Galerie et commencer à créer vos cas d’usage. {% @arcade/embed url="" flowId="QrGyk84126ycSIM6P0oX" %} ## Configuration ### Source de données L’ **Source de données** c'est ici que vous définissez le contenu de votre galerie. AX - Gallery prend en charge deux types de sources de données : **Manuel** et **Requête**. (Définissez un **Nom de l'API** pour attribuer au composant un identifiant unique, et **Position du média** pour placer le média de chaque élément par rapport à son contenu.)
| Type de source de données | Description | Quand l’utiliser | | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Manuel** | Téléversez ou saisissez chaque élément de la galerie directement dans le composant. Chaque image ajoutée via le sélecteur Source média crée un **nouveau** fichier dans votre bibliothèque Salesforce Files. | Galeries ponctuelles avec du contenu statique qui change rarement (bannière de page d’accueil, vitrine produit fixe, démonstrations). | | **Requête** | Récupérez les éléments de manière dynamique depuis un objet Salesforce (Product, Knowledge, ContentVersion, objet personnalisé…). La galerie se met à jour automatiquement lorsque les enregistrements sous-jacents changent. | Tout contenu qui doit rester synchronisé avec les données Salesforce, être régulièrement actualisé ou être géré par une équipe non technique en dehors d’Experience Builder. | {% hint style="info" %} #### **Choisir entre Manuel et Requête** Le mode Manuel crée un **tout nouveau fichier** dans la bibliothèque à chaque fois que vous téléversez une image. Il ne fait pas référence aux fichiers déjà présents dans Salesforce Files. Si vous devez réutiliser ou mettre à jour le contenu de votre galerie sans rouvrir le panneau Propriétés, utilisez **Requête** à la place. {% endhint %} #### Partage du modèle avec Avonni AX - Galerie **Respect des règles de partage des données Salesforce :** * **Respect des paramètres de l’organisation :** Les composants Avonni respectent pleinement les configurations de partage des données et les paramètres d’accès existants de votre organisation Salesforce. * **Politique de non-interférence :** Ces composants ne modifient ni n’affectent en aucune manière vos règles de partage des données préétablies. * **Visibilité et accès contrôlés :** La possibilité de consulter des enregistrements et d’interagir avec eux via les composants Avonni est régie par les paramètres de partage et les autorisations utilisateur définis par votre organisation ### Utiliser les fichiers Salesforce Files existants comme source média L’ **Source média** Le champ Source média dans AX - Gallery accepte divers types de contenus. Vous pouvez le mapper à une URL, à un ContentDocumentId ou à un chemin de téléchargement complet de Salesforce Files. Le composant détecte automatiquement les ContentDocumentId et les résout vers la bonne URL d’aperçu au moment du rendu. C’est ainsi que vous faites pointer une galerie vers des fichiers dans la **bibliothèque Salesforce Files** sans jamais les téléverser à nouveau via le composant. | Ce que vous renseignez dans Source média | Ce que la galerie affiche | | ---------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | | Un champ contenant un **ContentDocumentId** (commence par `069…`) | La dernière version du fichier est résolue et affichée. Le composant détecte automatiquement les `069…` identifiants. | | Le champ standard **VersionDataURL** champ lors d’une requête sur `ContentVersion` | Le fichier est téléchargé et affiché. Recommandé lorsque votre objet source est ContentVersion. | | Une **URL Shepherd** construite avec une expression comme `/sfc/servlet.shepherd/version/download/{{Record.Id}}` | La version exacte référencée dans l’URL est affichée. Utile pour construire des URL personnalisées. | | Une **URL publique** (image externe hébergée ailleurs) | L’image est chargée depuis la source externe. | #### **Comment la configurer en mode Requête** 1. Dans le **Source de données**, sélectionnez **Requête** et choisissez votre objet source (`ContentVersion`, un objet personnalisé contenant des références de fichiers ou tout objet avec un champ image). 2. Appliquez un filtre qui identifie les enregistrements à afficher (selon une convention de titre, une étiquette, un champ personnalisé, une valeur de liste de sélection, etc.). 3. Dans **Mappages de données**, mappez **Source média** en fonction de votre objet source : * **Lors d’une requête sur ContentVersion :** mappez Source média vers le champ standard `URL des données de version` champ. * **Lors d’une requête sur un objet personnalisé avec un champ ContentDocumentId :** mappez Source média directement vers ce champ (le composant détecte automatiquement `069…` les identifiants et les résout). * **Lors d’une requête sur tout objet disposant d’un champ URL d’image complète :** mappez Source média directement vers ce champ. Une fois configuré, mettre à jour le contenu de votre galerie revient simplement à remplacer les fichiers dans la bibliothèque Salesforce Files ou à mettre à jour le champ de référence sur vos enregistrements. {% hint style="info" %} #### Aperçu d’Experience Builder Les images pointant vers Salesforce Files peuvent ne pas s’afficher dans l’aperçu d’Experience Builder, car le générateur ne s’authentifie pas en tant qu’utilisateur du portail. Elles s’afficheront correctement une fois connecté au site publié en tant qu’utilisateur de la communauté {% endhint %} ### Variante #### **Carrousel** La variante Carrousel offre une manière dynamique et engageante de mettre en valeur votre contenu, vos images ou vos cartes. Elle est conçue pour afficher les éléments de manière séquentielle dans un format de diaporama, ce qui en fait un excellent choix pour mettre en avant du contenu phare, des images de produits ou des annonces importantes.
**Quand l’utiliser :** Utilisez la variante Carrousel lorsque vous souhaitez : * Attirer l’attention des utilisateurs avec une présentation visuellement attrayante. * Afficher plusieurs éléments ou images de manière peu encombrante. * Créer des bannières rotatives ou des sections de contenu mis en avant sur votre site. **Fonctionnalités :** * **Contrôles de navigation :** Naviguez dans le carrousel avec des commandes intuitives telles que des boutons fléchés ou des points de pagination. * **Option de lecture automatique :** Configurez le carrousel pour faire défiler automatiquement les éléments, avec la possibilité de mettre en pause et de reprendre. * **Apparence personnalisable :** Adaptez l’apparence et le comportement du carrousel au design de votre site en ajustant des éléments tels que les effets de transition et la durée d’affichage. #### **Onglets** La variante Onglets introduit une approche organisée et tabulée de la présentation du contenu. Cette variante est idéale pour catégoriser les informations, en offrant une mise en page claire et structurée qui permet aux utilisateurs de naviguer rapidement entre différentes sections de contenu.
**Quand l’utiliser :** Envisagez la variante Onglets lorsque vous devez : * Présenter des informations catégorisées dans un format clair et segmenté. * Permettre aux utilisateurs de passer facilement d’une section de contenu à une autre sans quitter la page. * Organiser de manière conviviale du contenu tel que des spécifications produits, des catégories de services ou des onglets d’information. **Fonctionnalités :** * **Contenu segmenté :** Organisez votre contenu en onglets clairement définis, afin qu’il soit facile pour les utilisateurs de trouver et consulter les différentes sections. * **Navigation conviviale :** Permettez aux utilisateurs de passer d’un onglet à l’autre en toute fluidité, pour une expérience simple et intuitive. * **Conception personnalisable :** Adaptez l’apparence des onglets à votre identité visuelle et à l’esthétique de votre site en modifiant des éléments tels que les libellés des onglets, la mise en page et les palettes de couleurs. #### **Grille** Présente le contenu dans une mise en page structurée à plusieurs colonnes. Chaque élément occupe une cellule de la grille. **Quand l’utiliser :** Idéal pour afficher une collection d’éléments auxquels on souhaite accorder la même importance, comme : * Listes de produits * Profils des membres de l’équipe * Aperçus d’articles de blog **Fonctionnalités** * Nombre de colonnes personnalisable * Possibilité de définir l’espacement (l’écart) entre les éléments * Options pour les images, titres, descriptions et boutons d’appel à l’action dans chaque cellule de la grille #### **Galerie** Une mise en page visuelle qui met particulièrement en valeur les images. **Quand l’utiliser :** Idéale pour mettre en avant du contenu centré sur l’image, comme : * Portfolios photographiques * Galeries de produits * Contenu mis en avant centré sur l’image **Fonctionnalités** * Met l’accent sur des images grandes et de haute qualité * Possibilité d’inclure des légendes ou une fonctionnalité de visionneuse pour zoomer sur les images * Possibilité de mises en page créatives et d’effets au survol ## Interactions La section « Lien vers » détermine ce qui se passe lorsqu’un utilisateur clique sur un élément de votre galerie Avonni. Utilisez-la pour rediriger les utilisateurs vers des pages détaillées, ouvrir du nouveau contenu ou déclencher d’autres actions. **Exemple :** * Par exemple, présentez des maisons mises en avant dans une galerie et permettez aux utilisateurs de cliquer sur chaque image pour voir plus de détails sur une page séparée. ## Style Les attributs de style vous permettent de contrôler l’apparence visuelle de chaque élément de la galerie. Les paramètres sont regroupés selon ce qu’ils affectent.
{% tabs %} {% tab title="Général" %} S’applique à toutes les variantes (Carrousel, Onglets, Grille, Galerie). | Paramètre | Ce qu’il contrôle | | ------------ | --------------------------------------------------------------------------------------------- | | **Taille** | Largeur et hauteur globales de la galerie. | | **Bordure** | Style, largeur et couleur de la bordure autour de la galerie. | | **Légende** | Style du texte de légende affiché sur chaque élément. | | **Titre** | Style du texte du titre de chaque élément. | | **Contenu** | Style de la zone de contenu principale à l’intérieur de chaque élément. | | **Média** | Façon dont les images et les vidéos sont affichées (ajustement, alignement, dimensionnement). | | {% endtab %} | | {% tab title="Variante Carrousel" %} Ne s’applique que lorsque **Variante** est défini sur `Carrousel`. | Paramètre | Ce qu’il contrôle | | ----------------------------------------- | ---------------------------------------------------------------------- | | **Élément du diaporama** | Arrière-plan, alignement et espacement de chaque élément du carrousel. | | **Titre de l’élément du diaporama** | Police, taille et couleur des titres des éléments. | | **Description de l’élément du diaporama** | Police, taille et couleur des descriptions des éléments. | | **Image du diaporama** | Taille et bordure des images à l’intérieur de chaque élément. | | **Indicateur actif du diaporama** | Style de l’indicateur de l’élément actuellement affiché. | | **Indicateur inactif du diaporama** | Style des indicateurs pour les éléments non actifs. | | **Bouton de navigation du diaporama** | Style des boutons de navigation précédent/suivant. | | {% endtab %} | | {% tab title="Variante Onglets" %} Ne s’applique que lorsque **Variante** est défini sur `Onglets`. | Paramètre | Ce qu’il contrôle | | --------------------------------------- | ------------------------------------------------------ | | **Onglet** | Style de chaque onglet individuel. | | **Bordure de l’onglet** | Bordure autour de chaque onglet. | | **Bordure de l’onglet actif/au survol** | Bordure de l’onglet actif et à l’état de survol. | | **Arrière-plan de l’onglet** | Couleur ou image d’arrière-plan des onglets. | | **Libellé de l’onglet** | Police, taille et couleur des libellés des onglets. | | **Sous-titre de l’onglet** | Police, taille et couleur des sous-titres des onglets. | | {% endtab %} | | | {% endtabs %} | | ## Résolution des problèmes | Problème | Cause | Correction | | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Les images ne s’aperçoivent pas dans Experience Builder, mais s’affichent correctement sur le site publié** | Experience Builder ne s’authentifie pas en tant qu’utilisateur du portail ; il ne peut donc pas récupérer les images depuis Salesforce Files pendant l’aperçu. | Comportement attendu. Connectez-vous au site publié en tant qu’utilisateur de la communauté pour vérifier que les images s’affichent correctement. | | **« Aucun aperçu disponible » apparaît en mode Manuel** | L’image téléversée n’a pas été marquée comme lien public, donc les utilisateurs du portail ne peuvent pas la charger. | Téléversez à nouveau l’image et cochez **Lien public** lors du téléversement, ou passez en mode Requête, où les règles de partage standard s’appliquent. | | **Le mode Manuel vous oblige à téléverser à nouveau chaque fois que vous souhaitez modifier une image** | Le mode Manuel est un téléverseur direct — il ne fait pas référence aux fichiers Salesforce Files existants. | Utilisez **Requête** le mode avec ContentVersion ou un objet personnalisé contenant des références de fichiers. Voir *Utiliser les fichiers Salesforce Files existants comme source média* ci-dessus. | | **La galerie est vide pour les utilisateurs du portail, mais fonctionne dans l’aperçu d’Experience Builder** | Le profil de l’utilisateur du portail n’a pas accès à l’objet interrogé ni aux fichiers référencés. | Vérifiez les autorisations d’objet du profil, la sécurité au niveau du champ et l’accès à la bibliothèque/au partage sur `ContentVersion` ou l’objet source. | | **Les images ne s’affichent pas du tout (ni dans l’aperçu ni sur le site publié)** | Source média est mappée à un champ qui ne contient pas une référence de fichier valide (ContentDocumentId commençant par `069…`, le `URL des données de version` champ sur ContentVersion, ou une URL d’image publique). | Vérifiez ce que contient réellement le champ mappé. Lors d’une requête sur ContentVersion, utilisez le champ standard `URL des données de version` champ. Pour les objets personnalisés, stockez un ContentDocumentId (commençant par `069…`) et mappez Source média directement vers ce champ. | | **La galerie affiche les bons titres, mais toutes les images sont rompues** | Source média est mappée à un champ qui ne contient pas de ContentDocumentId ni d’URL valide. | Dans Mappages de données, confirmez que Source média pointe vers un champ ContentDocumentId, une URL Shepherd ou une URL d’image publique valide. | ## Cas d’usage ### Exemple 1 : Carrousel des actualités clients {% @arcade/embed url="" flowId="pOjxSsq8rQ3YgZFvjMgr" %} Tenez vos clients informés et engagés en présentant vos derniers articles directement sur votre page d’accueil Experience Cloud. Le composant AX Gallery facilite l’affichage d’un carrousel d’actualités dynamique et riche en images, qui se met à jour automatiquement au fur et à mesure de la publication de nouveau contenu. *** #### **Ce que vous allez obtenir** * **Du contenu récent en un coup d’œil :** Faites apparaître vos articles Knowledge les plus récents sur la page d’accueil, avec images, afin que les visiteurs ne manquent aucune mise à jour. * **Navigation sans effort :** Permettez aux clients de parcourir les actualités de l’entreprise dans une mise en page de carrousel claire et structurée. * **Filtrage ciblé :** Affichez uniquement les articles News en exploitant un champ de liste de sélection personnalisé, afin de garder le carrousel ciblé et pertinent. *** #### **Avant de commencer** * **`ImageId__c` champ :** Créez un champ Texte sur l’objet Knowledge pour stocker l’ID de document de contenu de l’image de chaque article. * **`Type__c` champ :** Créez un champ Liste de sélection sur l’objet Knowledge pour catégoriser les articles, en vous assurant que la **News** valeur existe et est appliquée à vos articles. *** #### **Comment le configurer** {% stepper %} {% step %} #### **Ajoutez le composant à votre page** * Faites glisser le **AX Gallery** composant sur la page souhaitée dans Experience Builder. {% endstep %} {% step %} #### **Personnalisez l’affichage du composant** * Définissez l’ **Titre** en `Carrousel des actualités`. * Définissez l’ **Légende** en `Consultez nos articles hebdomadaires`. * Définissez l’ **Nombre de colonnes** en `3`. {% endstep %} {% step %} #### **Configurez votre source de données** * Créez une nouvelle requête dans la configuration de la source de données. * Sélectionnez **Knowledge** comme objet (veillez à sélectionner la deuxième option Knowledge dans la liste). * Ajoutez un filtre : **Type\_\_c égale** `News`. * Définissez l’ordre de tri sur **Date de création, décroissant** afin que vos articles les plus récents apparaissent toujours en premier. {% endstep %} {% step %} #### **Configurez le mappage des données** * Mappez **Titre** vers Knowledge `Titre` champ. * Mappez **Source média** en `ImageId__c` pour récupérer les images des articles. * Définissez l’ **Vitesse de lecture** en `5`. {% endstep %} {% step %} #### **Prévisualisez votre travail** * Utilisez l’aperçu d’Experience Builder pour confirmer que votre carrousel affiche les bons articles, les bonnes images et la bonne mise en page avant publication. {% endstep %} {% endstepper %} *** ### Exemple 2 : Galerie des produits clients {% @arcade/embed url="" flowId="aIu9ZNuteXdewe19LJL0" %} Offrez à vos clients une manière visuellement percutante de découvrir votre catalogue de produits, directement depuis votre page d’accueil. En combinant le composant AX Gallery avec vos données Product, vous pouvez créer un carrousel accrocheur qui met en avant les produits phares et guide les visiteurs directement vers les pages de détails des produits. *** #### **Ce que vous allez obtenir** * **Une vitrine produit visuelle :** Affichez des casques mis en avant dans un carrousel riche en images qui incite à la navigation. * **Navigation fluide :** Permettez aux clients de passer facilement du carrousel aux pages de détail de chaque produit. * **Une expérience de page d’accueil sélectionnée :** Mettez en avant les produits les plus importants en affichant uniquement votre catalogue mis en avant sur la page d’accueil. *** #### **Avant de commencer** * **`Type__c` champ :** Créez un champ Liste de sélection sur l’objet Product2 et assurez-vous que la **Casque** valeur existe, afin que vous puissiez filtrer le carrousel sur les bons produits. * **`ContentDocumentId__c` champ :** Créez un champ Texte sur l’objet Product2 pour stocker l’URL de l’image de chaque produit. *** #### **Comment le configurer** {% stepper %} {% step %} #### **Ajoutez le composant à votre page** * Faites glisser le **AX Gallery** composant sur la page souhaitée dans Experience Builder. {% endstep %} {% step %} #### **Personnalisez l’affichage du composant** * Définissez l’ **Titre** en `Carrousel des produits`. * Définissez l’ **Légende** en `Découvrez nos produits phares !` * Définissez l’ **Nombre de colonnes** en `3`. {% endstep %} {% step %} #### **Configurez votre source de données** * Créez une nouvelle requête dans la configuration de la source de données. * Sélectionnez **Produit** comme objet. {% endstep %} {% step %} #### **Configurez le mappage des données** * Mappez **Titre** vers le `Nom du produit` champ. * Mappez **Source média** en `ContentDocumentId__c` pour afficher l’image de chaque produit. * Définissez l’ **Vitesse de lecture** en `5`. {% endstep %} {% step %} #### **Prévisualisez votre travail** * Utilisez l’aperçu d’Experience Builder pour confirmer que vos produits, images et la mise en page du carrousel apparaissent comme prévu avant publication. {% endstep %} {% endstepper %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-gallery.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.