Image

Le composant Image vous permet d’afficher des images dans vos composants dynamiques Avonni. Vous pouvez utiliser des images provenant de différentes sources, contrôler la taille et le positionnement, et même ajouter une fonction de grossissement interactive

Aperçu

Le composant Image est un élément visuel fondamental pour :

-   Afficher des images statiques (par ex., logos, photos de produits).
-   Afficher des images dynamiques basées sur des données de Salesforce (par ex., afficher la photo de profil d'un Contact).
-   Créer des interfaces utilisateur visuellement riches.

Cas d'utilisation

• Pages de détails d'enregistrement : afficher une image de produit, la photo de profil d'un utilisateur, un logo d'entreprise ou d'autres images pertinentes associées à un enregistrement.

• Tableaux de bord : inclure des images dans les tableaux de bord pour fournir un contexte visuel ou de l'image de marque.

• Catalogues : créer des catalogues de produits visuellement attrayants.

• Galeries d'images : afficher une série d'images (même si des composants spécialisés comme Carousel peuvent être mieux adaptés pour cela).

• Contenu marketing : inclure des images pour rendre vos composants plus attrayants.

Configuration du composant Image

Sélectionnez le composant Image sur la zone de conception pour accéder à ses propriétés dans le panneau Propriétés.

Propriétés de base

• Nom API : (Texte) Un identifiant unique pour cette instance de composant (par ex., ProductImage, UserProfilePicture).

• Source de l'image : (Texte - Crucial) Cette propriété détermine l'origine de l'image. Vous avez plusieurs options, sélectionnables via l'icône de sélection de ressource :

  • URL statique : Saisissez l'URL complète d'une image hébergée en ligne (par ex., https://www.example.com/myimage.jpg). Important : L'image doit être publiquement accessible ou accessible à vos utilisateurs Salesforce en fonction de leurs paramètres de partage.

  • Ressource : Sélectionnez une Ressource statique de votre organisation Salesforce. C'est la manière recommandée d'inclure des images dans la conception de votre application. Vous devez télécharger l'image en tant que ressource statique dans la configuration Salesforce avant vous pouvez la sélectionner ici.

  • Variable/Formule : Utilisez une variable Texte ou une ressource Formule qui renvoie une chaîne URL. Cela vous permet de changer l'image dynamiquement en fonction des données ou de l'interaction utilisateur. Exemple : afficher une image de produit différente en fonction du produit sélectionné dans un tableau de données.

  • Attribut du composant : Récupérez dynamiquement l'URL depuis l'attribut d'un autre composant.

• Texte alternatif (alt) : (Texte - Essentiel pour l'accessibilité) Fournissez un texte alternatif court et descriptif pour l'image. Les lecteurs d'écran utilisent ce texte pour les utilisateurs malvoyants et il est également affiché si l'image ne se charge pas. Fournissez toujours un texte alt significatif.

Taille et positionnement

• Largeur : (Texte/Nombre) Contrôle la largeur de l'image. Bonne pratique : définissez soit Largeur ou Hauteur, mais généralement pas les deux, pour éviter la déformation. Options :

  • Nombre + px: Spécifiez une largeur en pixels (par ex., 100px, 250px).

  • Nombre + %: Spécifiez une largeur en pourcentage de la largeur de l'élément contenant (par ex., 50%, 100%).

  • auto: La largeur intrinsèque de l'image sera utilisée.

  • Vide : Laissez le navigateur déterminer l'ajustement optimal en fonction des autres paramètres.

• Hauteur : (Texte/Nombre) Contrôle la hauteur de l'image. Bonne pratique : définissez soit Largeur ou Hauteur, mais généralement pas les deux, pour éviter la déformation. Options :

  • Nombre + px: Spécifiez une hauteur en pixels.

  • Nombre + %: Spécifiez une hauteur en pourcentage de la largeur hauteur.

  • auto: La hauteur intrinsèque de l'image sera utilisée.

  • Vide : Laissez le navigateur déterminer l'ajustement optimal en fonction des autres paramètres.

• Ajustement du recadrage : (Texte - Sélectionnez parmi les options) Détermine comment l'image est redimensionnée ou recadrée pour s'adapter à la Largeur et Hauteur (si définie). Ceci est crucial pour contrôler le comportement de l'image lorsque son rapport d'aspect ne correspond pas aux dimensions du composant.

  • cover : L'image est mise à l'échelle pour couvrir entièrement la zone du composant, en conservant son rapport d'aspect. Des parties de l'image peuvent être recadrées si les rapports d'aspect ne correspondent pas. C'est souvent le meilleur choix pour les images de fond.

  • contain : L'image est mise à l'échelle pour s'adapter entièrement à la zone du composant, en conservant son rapport d'aspect. Il peut y avoir de l'espace vide autour de l'image si les rapports d'aspect ne correspondent pas. C'est souvent le meilleur choix pour afficher des images sans recadrage.

  • fill : L'image est étirée ou compressée sur pour remplir exactement la zone du composant, sans conserver son rapport d'aspect. Cela peut entraîner une déformation. Évitez cela sauf si vous voulez spécifiquement un effet étiré/compressé.

  • none : L'image est affichée à sa taille d'origine. Si elle est plus grande que la zone du composant, elle sera découpée.

• Taille du recadrage : (Texte - Sélectionner parmi les options) : Détermine la taille de la zone de recadrage.

  • x-small

  • petit

  • moyen

  • grand

  • très grand

  • 2x-très grand

  • 3x-très grand

  • 4x-très grand

• Position du recadrage X : (Texte - Sélectionner parmi les options) Déplace le recadrage horizontalement.

  • gauche

  • centre

  • droite

• Position du recadrage Y : (Texte - Sélectionner parmi les options) Déplace le recadrage verticalement.

  • Haut

  • Centre

  • Bas

• Position : (Texte - Sélectionner parmi les options) Détermine comment l'image est positionnée si elle ne remplit pas toute la zone du composant. Les options incluent souvent :

  • statique

  • relative

  • absolue

  • fixe

Comportement

• Type de loupe : (Texte - Sélectionner parmi les options) Ajoute un effet de grossissement.

  • Aucun (Par défaut)

  • standard

  • suivre

• Visible : (Booléen) Contrôle si le composant Image est visible sur la page. Liez ceci à une variable booléenne ou à une formule pour une visibilité dynamique.

• Désactivé (Booléen - Case à cocher) : Si activé, désactivez le composant

: La valeur maximale.

Exemple 1 : Image statique à partir d'une URL

-   Source de l'image :  `https://www.example.com/logo.png`
-   Largeur :  `200px`
-   Hauteur :  `auto`
-   Ajustement du recadrage :  `contain`
-   Source :  Logo de l'entreprise

Ceci afficherait l'image depuis l'URL, en définissant une largeur fixe de 200 pixels et en ajustant automatiquement la hauteur pour conserver le rapport d'aspect.

Exemple 2 : Image dynamique à partir d'un enregistrement (sur une page d'enregistrement Account)

-   Source de l'image :  `$Component.record.PhotoUrl`  (Cela suppose que l'objet Account possède un champ nommé `PhotoUrl` contenant l'URL de l'image)
-   Largeur : `100%`
-   Hauteur : `auto`
-   Ajustement du recadrage : `cover`
-   Source :  Photo du compte

Si la Page d'objet ciblée est définie sur Account, vous pouvez lier la Source de l'image sur $Component.record.PhotoUrl pour afficher la photo du compte actuel. Le fait de définir Largeur sur 100% et de laisser Hauteur vide (ou auto) préserve le rapport d'aspect, tandis que Ajustement du recadrage : cover assure que l'image remplit l'espace disponible, en la recadrant potentiellement.

Exemple 3 : Afficher une image à partir d'une variable.

1. Créez une variable nommée imageUrl de type texte.

2. Ajoutez une interaction "Au chargement" pour définir la valeur de la variable avec une URL d'image statique.

3. Ajoutez un composant image.

4. Min/Max : Source de l'image à la valeur de la variable, @imageUrl

5. variable sera mise à jour, et vous pourrez utiliser ces valeurs pour filtrer un Data Table.

   • URLs d'images : si vous utilisez des URL, assurez-vous qu'elles sont valides et accessibles aux utilisateurs.

   • Ressources statiques : pour les images faisant partie du design de votre application, l'utilisation de ressources statiques est généralement recommandée pour les performances et la sécurité.

   • Ratio d'aspect : faites attention au rapport d'aspect de l'image et à la façon dont vous définissez les Largeur, Hauteur, et propriétés d'ajustement du recadrage pour éviter la déformation.

   • Accessibilité : Liaison de valeur : fournissez un texte alternatif significatif dans la propriété Source .

   • Images dynamiques : exploitez la possibilité de lier Source de l'image aux variables et aux formules pour créer des affichages d'images dynamiques.

En résumé

Le composant image est un composant simple mais puissant qui vous permet d'améliorer n'importe quel composant dynamique en ajoutant une image provenant de différentes sources. Vous pouvez ajuster la taille, la position, le recadrage et ajouter une loupe.