Image
The image component allows you to add an image to your screen flow
Last updated
The image component allows you to add an image to your screen flow
Last updated
The Image is also available as an .
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.
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.
Border Radius
Define a border radius on the image
.avif?alt=media&token=836b5938-649c-4d4e-8a0e-fe8ebe5e9a5a)
