You are here:
Add an Image to a Flexcard (Managed Package)
For the managed package runtime, add an image to a Flexcard in the Flexcard Designer. With the Image element, upload an image from your computer, use an image from a Salesforce library, enter a URL, or use a merge field from a data source. Link the image to an action, add classes, and adjust the size of the image relative to the canvas size.
This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.
All labels in the Properties panel have Custom Label support.
Omniscripts
and Flexcards support all image file types by default. If set, the
lightning-file-upload accept attribute
filters file types in the user's file browser. If set, the Don't allow
HTML uploads as attachments or document records security setting
disallows .svg image files. See Lightning Web Component File
Upload.
- From the Flexcard Designer, drag an Image element from the Build panel into a state on the canvas.
- (Optional) From the Properties panel, update the element name in the Element Name field.
-
Select the Image Source from one of these options:
-
To display an image from an external source, enter the absolute URL of the
image.
ImportantIf your image doesn't show, add the URL of the image to the Trusted URLs list in your org. If you're adding your Flexcard to a site, you must add the URL to the Trusted URLs list. See Manage Trusted URLs.
-
To upload a file from your computer, click the search icon, then click
Upload Files.
Note
Uploaded files are saved to your org's library of documents for reuse.
- To use a file from a library in your Salesforce CRM Content or Salesforce Files, click the search icon, then select an image from the Select an Image from Content Document dropdown.
-
To use a file uploaded as a static resource, enter
/resource/resourceName
, where
resourceName is the name of the static resource. To
create a static resource, see Define Static Resources.
Note Images used in Flexcards on Experience Cloud pages must be static resources.
-
To display an image from an external source, enter the absolute URL of the
image.
-
(Optional) To adjust the size of the image relative to the canvas size, select an
option from the Size dropdown.
Note
By default, Fit Content is selected, enabling the image to fill the container of the Image element, or the container of a Block element that it's inside.
On the canvas, adjust the element size to fit your image as needed.
- For accessibility, in the Alternative Text field, enter text describing the image.
-
(Optional) Enter a Newport, SLDS, or custom CSS class in the Extra Class field.
Note
By default,
slds-image--card slds-align_absolute-centerpopulate the field. -
(Optional) To display an image caption, enter text in the
Title field.
Note
Beginning with Summer '21, Title supports concatenated strings. Combine plain text and supported merge fields. For example, {Label.AccountName}>{Name}.
- (Optional) To style the image caption, enter a class in the Title Class field.
- (Optional) To launch an action on click of the element, see Add a Click Event to a Flexcard Element (Managed Package).
- (Optional) To add conditions that must be met for the element to display, see Add Conditions to a Flexcard Element (Managed Package).
- (Optional) To style your element, click Style to open the Style panel, and see Style Flexcard Elements (Managed Package).
What’s next: Preview your Flexcard. See Preview a Flexcard (Managed Package).
- Flexcards Image Properties (Managed Package)
For the managed package runtime, image element properties are configurable in the Property Panel when you select an Image element in the Flexcard Designer. With the Image element, display an image on a Flexcard.
