Image

Overview

The Avonni Image component, designed for Salesforce App Builder, displays a single image on Lightning pages with customizable size, crop, and alignment options.

Key Features

• Customizable size and crop settings

• Supports thumbnails and card layouts

• Integrates with Salesforce records

Use Cases

• Product Page: Show a uniform product image.

• Contact or User Page: Display a consistent profile photo.

• Asset Page: Present a clear item image for verification.

• Welcome Panel: Feature a branded banner or greeting image.

• Team Spotlight: Highlight an employee with a thumbnail.

• Promotion Highlight: Display a featured campaign image.

---

Configuration

Add the Image component to a Lightning page in App Builder and configure it via the Properties Panel.

Basic Properties

These control the image source, size, and presentation.

Property	Type	Description	Example
Image Url or Content Document Id	String	URL or ContentDocumentId of the image (supports JPG, PNG, GIF).	https://example.com/image.jpg or 069XXXXXXXXXXXX
Width	String	Image width in pixels or CSS units (e.g., 200px).	200px
Height	String	Image height in pixels or CSS units (e.g., 150px).	150px
Position	String	Alignment within the container (options: left, center, right).	center
Thumbnail	Boolean	Displays the image as a smaller thumbnail with border radius if true.	true
Crop Size	String	Aspect ratio for cropping (options: 16x9, 4x3, 1x1).	1x1
Crop Fit	String	How the image fits the crop (options: cover, contain, fill).	cover
Display as Card	Boolean	Shows the image in a card layout if true.	true

Crop Size and Fit Guidelines

Option	Use Case	Best Pairing with Crop Fit
16x9	Wide banners or video-style images.	cover (for edge-to-edge fill)
4x3	Balanced thumbnails or catalog images.	contain (to keep all visible)
1x1	Square avatars or grid tiles.	cover (for uniform squares)

Option	Description
cover	Fills the container, cropping edges.
contain	Fits fully, adding empty space.
fill	Stretches to fit, may distort.

Note: Use contain for critical content (e.g., logos); cover for immersive visuals.

---

Examples

Example 1: Profile Image on Contact Page

Scenario: Display a professional square thumbnail profile photo on Contact record pages using images stored in Salesforce Files.

Steps

1

Navigate to Lightning App Builder

Edit your Contact record page (Setup > Lightning App Builder > find your Contact page)

2

Drag the AX - Image component

3

Configure Image Source

• Set Image Url or Content Document Id to {{Record.Profile_Photo_ID__c}} (assumes you have a custom field storing the ContentDocumentId)

• Alternative: Use a direct ContentDocumentId like 069XXXXXXXXXXXX for testing

4

Configure Size and Layout

• Set Width to 100px

• Set Height to 100px

• Check Thumbnail for rounded profile styling

5

Configure Image Cropping

• Set Crop Size to 1x1 (perfect square aspect ratio)

• Set Crop Fit to cover (fills the square, may crop edges)

6

Configure Display Options

Check Display as Card for professional container styling

7

Save and test the image display

Result: Users see a professional square thumbnail profile image in a styled card container on the Contact page, perfect for quick visual identification

---

Key Considerations

• Image Source: Use ContentDocumentId for secure files; ensure URLs are accessible.

• Size and Crop: Adjust Width, Height, and Crop Size for layout consistency.

• Performance: Optimize image size to avoid slow loading.

• Accessibility: Add alt text via descriptions; test with screen readers.

• Limitations: No editing; respects sharing/FLS rules.

---

Troubleshooting Common Issues

• Image Not Displaying: Check Image Url or Content Document Id and file permissions.

• Crop Issues: Verify Crop Size and Crop Fit settings match the image aspect ratio.

• Card Not Showing: Ensure Display as Card is true.

• If Issues Persist: Contact our support team at [email protected] for assistance.

---

Summary

The Avonni Image component enhances Lightning pages with customizable, professional images. It’s ideal for profiles or product visuals.