--- schema_version: "1" id: 756a202c25820938a295762952a1b0d108498f8e79f8f26d946131595d7d837c title: Add an Image to a Flexcard (Managed Package) collection: admin version: current locale: en-us portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_add_an_image_to_a_flexcard.md canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_add_an_image_to_a_flexcard.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: c3882926b0d5c97f8db76ee736215200bfaf61545410978fae24bd1bc3073d3a description: 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. products: - Omnistudio release: "264" --- # 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. ![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US). ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/images/icon_note.png) Note 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](https://developer.salesforce.com/docs/component-library/bundle/lightning-file-upload/documentation). 1. From the Flexcard Designer, drag an **Image** element from the Build panel into a state on the canvas. 2. (Optional) From the Properties panel, update the element name in the **Element Name** field. 3. Select the **Image Source** from one of these options: 1. To display an image from an external source, enter the absolute URL of the image. ![Important](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/images/icon_important.png) Important If 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](https://help.salesforce.com/s/articleView?id=xcloud.security_trusted_urls_manage.htm&type=5&language=en_US). 2. To upload a file from your computer, click the search icon, then click **Upload Files**. ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/images/icon_note.png) Note Uploaded files are saved to your org's library of documents for reuse. 3. 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. 4. 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](https://help.salesforce.com/s/articleView?id=platform.pages_static_resources_create.htm&type=5&language=en_US). ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/images/icon_note.png) Note Images used in Flexcards on Experience Cloud pages must be static resources. 4. (Optional) To adjust the size of the image relative to the canvas size, select an option from the **Size** dropdown. ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/images/icon_note.png) Note By default, **Fit Content** is selected, enabling the image to fill the container of the Image element, or the container of a [Block](https://help.salesforce.com/s/articleView?id=xcloud.os_group_elements_inside_a_block_on_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, combine logical groups of elements inside a collapsible container with the Block element on a Flexcard. For example, group an Account's basic information together, and separately, group the account's Contact information together.") element that it's inside. On the canvas, adjust the element size to fit your image as needed. 5. For accessibility, in the **Alternative Text** field, enter text describing the image. 6. (Optional) Enter a Newport, SLDS, or [custom CSS](https://help.salesforce.com/s/articleView?id=xcloud.os_create_custom_css_within_the_flexcard_designer.htm&release=264.0.0&type=5 "For the managed package runtime, create custom CSS classes within the Flexcard Designer to apply to Flexcard elements or supported fields inside elements. Create custom CSS classes when the design interfaces in the Style panel do not meet your design needs.") class in the **Extra Class** field. ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/images/icon_note.png) Note By default, `slds-image--card slds-align_absolute-center` populate the field. 7. (Optional) To display an image caption, enter text in the **Title** field. ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/images/icon_note.png) Note Beginning with Summer '21, **Title** supports concatenated strings. Combine plain text and supported merge fields. For example, {Label.AccountName}>{Name}. 8. (Optional) To style the image caption, enter a class in the **Title Class** field. 9. (Optional) To launch an action on click of the element, see [Add a Click Event to a Flexcard Element (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_add_a_click_event_to_a_flexcard_element.htm&release=264.0.0&type=5 "For the managed package runtime, enable an element on a Flexcard to perform an action when clicked. Supported elements include Image, Block, Icon, and Toggle."). 10. (Optional) To add conditions that must be met for the element to display, see [Add Conditions to a Flexcard Element (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_add_conditions_to_a_flexcard_element.htm&release=264.0.0&type=5 "For the managed package runtime, display or hide data based on the value of a data field. For example, display an alert icon or supplemental text for escalated Cases. Apply conditions to any element listed in the Build panel of the Flexcard Designer."). 11. (Optional) To style your element, click **Style** to open the Style panel, and see [Style Flexcard Elements (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_style_flexcard_elements.htm&release=264.0.0&type=5 "For the managed package runtime, configure the look and feel of a Flexcard by styling individual elements, fields inside elements, and entire states. From the Style panel in the Flexcard Designer, design backgrounds, text, and borders; adjust heights, widths, and spacing inside and between elements; apply classes and inline styles; make your element responsive; and more."). What’s next: Preview your Flexcard. See [Preview a Flexcard (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_preview_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, preview your Flexcard's appearance and functionality before publishing it to a Lightning page or Experience Builder site. In Preview, test how your Flexcard looks on multiple devices and test the functionality of action links and other interactive elements."). - **[Flexcards Image Properties (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_image_properties.htm&release=264.0.0&type=5)** 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.