Image
The Avonni Image component displays an image from a URL or Content Document with support for sizing, positioning, cropping, comparison slider, magnifier effects, and accessibility configuration.
Overview
Use the Image component to embed a static or dynamically bound image anywhere on your page — product photos, logos, profile pictures, or any visual content. Pair it with a comparison slider to let users toggle between two versions of an image, or add a magnifier for close-up inspection.
Configuration
To configure the Image, select it on the canvas. The configuration panel opens on the right. The sections below mirror the Properties tab from top to bottom.
Properties
Image Source sets the URL or Content Document ID of the image. You can bind it to a record field, a text variable, a formula, or select a file directly from your org.
Width and Height control the rendered dimensions. Accepted values are a number with a unit (e.g. 200px, 50%). Set one or the other — setting both can distort the image. Leave a field blank to let the browser determine the size automatically.
Position controls horizontal alignment of the image within its container. Options are Left, Center, and Right.
The following settings appear under Advanced Options:
Static Images — when enabled, the image retains its fixed dimensions and is no longer responsive.
Fluid — makes the image responsive; it shrinks as needed or grows up to its native width.
Fluid Grow — similar to Fluid, but also allows the image to scale beyond its native width.
Thumbnail — adds a thumbnail-style border around the image.
Lazy Loading — controls when offscreen images are fetched. Auto (default) uses the browser default; Lazy defers loading until the image is near the viewport.
Alternative Text — a short description of the image for screen readers and for display when the image fails to load. Always provide meaningful alt text.
Crop
The Crop section controls how the image is sized and framed.
Crop Size constrains the image to a fixed aspect ratio: 16x9, 4x3, 1x1, or None (unconstrained).
Crop Fit determines how the image fills its container when the image's aspect ratio doesn't match the container's. Default is Cover.
Cover
Scales the image to fill the area completely, maintaining aspect ratio. Parts may be cropped.
Contain
Scales the image to fit entirely within the area, maintaining aspect ratio. Empty space may appear around the image.
Fill
Stretches or squashes the image to exactly fill the area, ignoring aspect ratio. May distort the image.
None
Displays the image at its original size. If larger than the container, it will be clipped.
Crop Position X and Crop Position Y shift the visible crop area horizontally and vertically, expressed as a percentage (0–100).
Compare Image
The Compare Image section enables a side-by-side slider that lets users reveal a second image over the first.
Source sets the URL or Content Document ID of the second image used for comparison.
When a Source is provided, the Compare Attributes become available:
Orientation — the direction the slider moves: Horizontal (default) or Vertical.
Move On — whether the slider responds to Click or Hover.
Original Label — label overlaid on the first image.
Compare Label — label overlaid on the second image.
Show Labels on Hover — when enabled, the labels are only visible when the user hovers over the image.
Alternative Text provides accessible text for the comparison image.
Magnifier
The Magnifier section adds an interactive zoom effect when users hover over the image.
Magnifier Type selects the zoom behavior. Options are Inner, Standard, and Follow. Leave unset to disable the magnifier.
When a Magnifier Type is selected, additional settings appear:
Smooth Move — enables smooth cursor tracking for the magnified view.
Zoom Factor — multiplier applied to the zoomed image (default:
2).Zoom Ratio Width and Zoom Ratio Height — dimensions of the zoom window as a percentage (default:
100). Available for Standard and Follow types.
For the Standard type only:
Position — where the enlarged image appears relative to the main image: Auto (default), Top, Right, Bottom, or Left.
Horizontal Offset and Vertical Offset — fine-tune the position of the enlarged image in pixels.
Placeholder
The Placeholder section controls what is shown when no image source is set.
Show Placeholder — when enabled, displays a placeholder illustration and message instead of an empty area.
When Show Placeholder is on:
Placeholder Message — text displayed below the placeholder illustration.
Placeholder Illustration — the illustration style to display. Choose from a range of Salesforce illustrations such as No Preview (default), Desert, Maintenance, Going Camping, and more.
Set Component Visibility
All components support conditional visibility — see Component Visibility.
Styling
Configure the Image's appearance from the Style tab of the Edit Image panel.
Controls the outer spacing around the image.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing around the image.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the component's dimensions.
Width / Height: Set fixed dimensions.
Min Width / Max Width / Min Height / Max Height: Constrain the size within bounds.
Overflow: Control how content that exceeds the bounds is handled.
Customizes the image border.
Radius: Round the corners of the image.
Styles the before/after compare slider (Compare Image mode).
Color / Handle Background Color / Arrows Color: Style the slider bar and handle.
Label Background Color / Label Border Size / Style / Color / Radius: Style the compare labels.
Styles the zoom magnifier lens.
Color / Size / Radius / Style: Set the magnifier's color, size, corner rounding, and border style.
Last updated
Was this helpful?