Image

Aperçu

Le composant Image Avonni met l'accent sur la flexibilité et la personnalisation, vous permettant d'intégrer des images de manière transparente dans vos pages. Avec ce composant, vous disposez de nombreuses options pour contrôler la présentation, le recadrage, la comparaison, la loupe et le chargement des images.

Tutoriels

Nom	Description
Configurer la carte pour afficher les informations de détail des enregistrements	Apprenez à afficher des enregistrements sur Experience Cloud en utilisant Avonni Map.

Paramètres

🎛️ Propriétés

Nom	Description	Utilisation
Image CMS ou URL de l'image	Spécifiez la source de l'image, soit depuis un CMS, soit directement en utilisant une URL d'image.	Sélectionnez la source qui correspond le mieux à vos préférences de gestion d'images et garantit un accès et des mises à jour faciles.
Largeur et hauteur	Déterminez la largeur et la hauteur de l'image affichée.	Définissez des dimensions qui assurent que l'image s'intègre harmonieusement dans la mise en page tout en conservant sa clarté.
Position	Ajustez l'alignement de l'image.	Alignez l'image dans son conteneur pour maintenir une mise en page équilibrée et esthétiquement plaisante.
Image statique	Option pour définir l'image comme statique.	Utilisez ce réglage lorsque l'image ne nécessite pas d'ajustements responsives et reste constante sur différentes tailles d'écran.
Fluidité & Agrandissement fluide	Ces options permettent à l'image d'ajuster sa taille de manière réactive.	Activez ces paramètres pour que les images s'adaptent en douceur aux différentes tailles d'écran, améliorant la réactivité de la page web.
Vignette	Afficher l'image sous forme de vignette.	Utilisez cette option pour présenter l'image sous une forme compacte, adaptée aux galeries ou comme aperçu.
Chargement paresseux	Choisissez entre un chargement automatique ou paresseux de l'image.	Optimisez les temps de chargement de la page en sélectionnant une méthode de chargement qui équilibre visibilité immédiate et performance globale de la page.
Taille de recadrage, Ajustement du recadrage, Position X & Y du recadrage	Personnalisez le recadrage de l'image pour vous concentrer sur les parties pertinentes.	Définissez des paramètres de recadrage pour garantir que l'image affiche en priorité les zones essentielles, renforçant la communication visuelle.
Type de loupe	Sélectionnez le style de grossissement à appliquer lors de la visualisation des détails de l'image.	Améliorez l'interaction utilisateur en choisissant un type de loupe qui permet une exploration détaillée de l'image.
Image de comparaison CMS ou URL de comparaison	Personnalisez les attributs de la fonction de comparaison.	Affinez la fonctionnalité de comparaison avec des attributs qui dictent l'orientation, l'interaction et l'étiquetage, assurant une expérience de comparaison conviviale.
Attributs de comparaison	Définissez les détails de la fonctionnalité de grossissement.	Personnalisez le comportement et l'apparence de la loupe pour garantir que les utilisateurs puissent facilement explorer les détails de l'image.
Attributs de la loupe	Ajustez l'arrondissement des coins de l'image.	Adoucissez ou accentuez les coins de l'image en définissant un rayon de bordure approprié, contribuant à la présentation stylistique de l'image.

🎨 Style