Image

To display an image inside your flow

The Image is also available as an Experience Cloud Component.

Overview

The image component allows you to add an image to your screen flow.

---

Changing the Properties

An Image can be customizable by specifying Width and Height. You have access to various advanced options under the Advanced options section.

Compare images

The Compare Images feature allows users to juxtapose two images and use a draggable slider to reveal more of one image while concealing a portion of the other. The slider's behavior and appearance can be customized using the options provided.

Options

1. Orientation

   • Description: Determines the direction in which the slider moves.

   • Options:

     • horizontal: The slider moves left and right.

     • vertical: The slider moves up and down.

2. Move on

   • Description: Specifies the user interaction required to move the slider.

   • Options:

     • click: The slider will move when the user clicks and drags it.

     • hover: The slider will move automatically as the user hovers over the image.

3. Original Label

   • Description: You can specify a label for the "original" image.

   • Input: String. Example: "Before".

4. Compare Label

   • Description: You can specify a label for the "compare" image.

   • Input: String. Example: "After".

5. Show Labels on hover

   • Description: If activated, the labels for the images will only be displayed when the user hovers over the respective image.

   • Input: Boolean. Options:

     • true: Display labels on hover.

     • false: Always display labels.

Tips:

• Ensure both images have the same dimensions for a smooth user experience.

• Use the feature thoughtfully. While it's great for comparisons, overusing it can detract from the user experience.

• Test on different devices to ensure responsiveness and usability, especially using the hover feature on mobile devices.

Magnifier Options

The Magnifier Feature of the Avonni Image Component introduces a zoom functionality to images. Depending on the selected magnifier type, the zoom can be interactive, confined to the image frame, or extended beyond it.

Options

1. Magnifier Type

   • Description: Determines the style and behavior of the magnification on the image.

   • Options:

     • Inner Zoom: Magnifies the details within the original frame of the image. It provides a zoomed-in perspective without altering the overall image size on the screen.

     • Standard Zoom: Enlarges the image beyond its initial frame, allowing users to delve deeper into specific image sections.

     • Follow Zoom: Creates a dynamic zoom effect, where the magnified section follows the cursor's movement. This offers an interactive experience, especially useful for closely examining intricate details.

2. Smooth Move

   • Description: This option provides a smooth transition when moving the magnifier across the image, eliminating abrupt changes and ensuring a seamless user experience.

   • Input: Boolean. Options:

     • true: Activate smooth transition.

     • false: Deactivate smooth transition.

3. Zoom Factor

   • Description: Specifies the magnification level or the degree to which the image will be enlarged.

   • Input: Numeric (decimal or integer). The higher the value, the greater the zoom. For example, a zoom factor of 2 would double the size of the image details under the magnifier.

Tips:

• For optimal results, use high-resolution images with the magnifier feature to prevent pixelation upon zooming.

• Test the Magnifier Feature across different devices and screen sizes to ensure the zoom behaves as expected.

• Keep the user experience in mind. Too high a zoom factor might become disorienting, so choose values that enhance clarity without compromising usability.

---

Adding Interactions

No interactions are available.

---

Styling the Image

From the Styles panel, you can customize styling attributes for the Image:

• Border Radius

You can find the instructions for styling here.

---

Specifications

Attributes

Name	Type	Description
alternativeText	String	The value to set for the 'alt' attribute
cropFit	String	Image fit behaviour inside its container. Valid values include cover, contain, fill and none
cropPositionX	Integer	Position of the image on the X axis (in percent)
cropPositionY	Integer	Position of the image on the Y axix (in percent)
cropSize	String	Cropping ratio of the image. Valid values are “1x1”, “4x3”, “16x9” or “none”.
fluid	Boolean	If present, the image is responsive and will take up 100% of its container width, to a maximum of its original width.
fluidGrow	Boolean	If present, the image is reponsive and will take up 100% of its container width
height	String	Height of the image
lazyLoading	String	Enables lazy loading for images that are offscreen. If set to lazy, the property ensures that offscreen images are loaded early enough so that they have finished loading once the user scrolls near them. Valid values are 'auto' and 'lazy'.
position	String	Specifies the position of the image. Valid values include left, center and right.
src	String	URL to set for the 'src' attribute
staticImages	Boolean	Sets the image as static. Images retain their current dimensions and will no longer be responsive.
thumbnail	Boolean	Adds a thumbnail border around the image.
width	String	The value to set on the image's 'width' attribute.

Events

No events are available.

Styling Hooks

Name	Description
Border Radius	Define a border radius on the image