Image
To display an image inside your flow
Last updated
To display an image inside your flow
Last updated
The Image is also available as an Experience Cloud Component.
The image component allows you to add an image to your screen flow.
An Image can be customizable by specifying Width and Height. You have access to various advanced options under the Advanced options section.
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.
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.
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.
Original Label
Description: You can specify a label for the "original" image.
Input: String. Example: "Before".
Compare Label
Description: You can specify a label for the "compare" image.
Input: String. Example: "After".
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.
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.
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.
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.
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.
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.
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.
No interactions are available.
From the Styles panel, you can customize styling attributes for the Image:
Border Radius
You can find the instructions for styling here.
| 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. |
No events are available.
| Name | Description |
|---|---|
Border Radius | Define a border radius on the image |
