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

NameDescription

Learn to display records on Experience Cloud using Avonni Map.

Settings

NameDescriptionUsage

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