Image

Overview

The Avonni Image Component emphasizes flexibility and customization, enabling you to incorporate images seamlessly into your pages. With this component, you have many options to control the presentation, cropping, comparison, magnification, and loading of images.

Tutorials

Name	Description
Set up the map to show record details information	Learn to display records on Experience Cloud using Avonni Map.

Settings

🎛️ Properties

Name	Description	Usage
CMS Image or Image URL	Specify the source of the image, either from a CMS or directly using an Image URL.	Select the source that best suits your image management preferences and ensures easy access and updates.
Width & Height	Determine the width and height of the image displayed.	Set dimensions that ensure the image fits harmoniously within the page layout while maintaining its clarity.
Position	Adjust the alignment of the image.	Align the image within its container to maintain a balanced and aesthetically pleasing page layout.
Static Image	Option to set the image as static.	Use this setting when the image doesn't require responsive adjustments and remains constant across various screen sizes.
Fluid & Fluid Grow	These options allow the image to adjust its size responsively.	Enable these settings for images to adapt smoothly to different screen sizes, enhancing the responsiveness of the webpage.
Thumbnail	Display the image as a thumbnail.	Utilize this option to present the image in a compact form, suitable for galleries or as previews.
Lazy Loading	Choose between automatic or lazy loading of the image.	Optimize page load times by selecting a loading method that balances immediate visibility and overall page performance.
Crop Size, Crop Fit, Crop Position X & Y	Customize the image’s cropping to focus on relevant parts.	Define crop parameters to ensure the image displays essential areas prominently, enhancing visual communication.
Magnifier Type	Select the magnification style to be applied when viewing image details.	Enhance user interaction by choosing a magnifier type that allows for detailed exploration of the image.
CMS Compare Image or Compare URL	Customize the attributes of the comparison feature.	Refine the comparison functionality with attributes that dictate orientation, interaction, and labeling, ensuring a user-friendly comparison experience.
Compare Attributes	Define the specifics of the magnification feature.	Customize the magnifier’s behavior and appearance to ensure that users can easily explore image details.
Magnifier Attributes	Adjust the corner roundness of the image.	Soften or sharpen the image corners by setting an appropriate border radius, contributing to the image’s stylistic presentation.

🎨 Styling