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
Learn to display records on Experience Cloud using Avonni Map.
Settings
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.
Last updated