Image

The Image component lets you add images—plus alternative accessibility text that describes the images—to headers, drawers, modals, and other components.

Using the Image Component

Create visual context for your end users with the image component. Add an Image component to a page and then adjust the image properties:

  • Select the image source (General tab):
    • Using Skuid Platform? Images can be sourced from previously uploaded files or external URLs.
    • Using Skuid on Salesforce? Images can be sourced from static resources, external URLs, or attachments. (The Image component is sensitive to record context, so you can choose to display specific images attached to specific Salesforce records.)
  • If desired, add alternative text to describe the image for access/assistive technologies such as screen readers.
  • Configure the image properties
    • Add any desired behaviors for the image, and set up the interactions these behaviors will trigger.
  • Preview, and adjust as needed

Properties

(Just need to look up a property? Try going directly to the Property Library.)

General Tab [[]]

  • Data source type: The data source type used to access the data source that contains the image.

  • Data source: The data source containing the image.

  • Image source: See the section below for details on the various image source options.

  • Model: The model the Image component is connected to.

  • Alternative text: Add descriptive text about the image that can be used by access/assistive technologies such as screen readers and conforms to Web Accessibility Initiative—Accessible Rich Internet Applications (WAI-ARIA) specifications. This property can be a specific string of text, the merge variables of one or more fields, or a combination of the two. Alt text also increases a search engine’s ability to index the image.

    Note

    If no Alternative Text is specified, access/assistive technologies will either ignore the image, or (in some cases) speak a generic label, such as “Image displayed.”

The Image Source property

The Image Source property has different associated fields, depending on whether you are on Skuid Platform or Skuid on Salesforce:

In Skuid Platform [[]]

  • File: Use a file previously uploaded within the Files tab in the navigation bar.

    Note

    To access images stored in the Files tab, set Data Source Type to REST and Data Source to SkuidLocal.

    • File name: If the file has been correctly uploaded, when you start typing the filename, Skuid will autocomplete.

  • URL: Use an online image.

    • Model: It is not necessary to specify a model. However, if using merge fields for the URL, setting the model provides the needed model row context.
    • Image URL: Enter the complete URL.

    Note

    You may also use merge syntax in the URL field. For example, if you host an account’s logo image at a particular URL, and you want it displayed next to a record, you could use www.YourSite.com/{{$Model.Account.data.0.Name<http://www.yoursite.com/%7B%7B$Model.Account.data.0.Name>`__}}for the image URL.

    If you choose to do this, ensure that the variable pulled in by the merge syntax is URL encoded—no spaces.

In Skuid on Salesforce [[]]

  • Attachment: Use an image file that has been uploaded and attached to a record on a parent object via a custom attachment field.

    Note

    This option only accepts lookup relationship fields that have File as the related object.

    The object must have a custom attachment field created on it.

  • Model: The model containing the custom attachment field.

  • Image field: Click the field picker to select the attachment image’s ID field.

    Note

    You may need to click next to the image field’s name to access and select the actual attachment field ID. You need to select this, not the reference field, for the image component to work

    If the image field is a Photo URL field, use URL as the image source.

  • Static resource: Use an image stored as a static resource.

    Note

    If this property is selected, you must have an image file uploaded as a static resource.

  • Resource name: If the file has been correctly uploaded, when you start typing the filename, Skuid will autocomplete.

  • File path (within Zip Static Resources): If the static resource contains multiple files (for example, a zipped resource), specify the path to the specific image here.

  • URL: Use an online image.

    • Model: It is not necessary to specify a model. However, if using merge fields for the URL, setting the model the provides the needed model row context.
    • Image URL: Enter the complete URL.

    Note

    See note above about using merge syntax with URL fields.

Advanced tab [[]]

  • Unique ID (optional): Skuid automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.

Interactions tab [[]]

Click add Add interaction then select:

  • Action type: To initialize the display of the record details, choose the interaction:
    • Click: Best for desktop, as well as mobile.

In the dots-vertical More Options menu on the selected interaction, click Add action, then edit the Action Type:

Note

Use the Show/hide menu action to add a dropdown menu to the image.

Styles tab [[]]

Style Variant section [[]]

Global styles for this component are set in the Design System Studio. The following Style properties can be adjusted for an individual page.

  • Style variant: Style variants are created and set in the Design System Studio. Some components have pre-defined variants for a specific aspect of a component’s style. Also, Skuid builders can style and customize elements to create their own themes within the DSS. These themes will dynamically populate as selectable values in the Style Variant dropdown menu.

Spacing section [[]]

  • Spacing: Sets the spacing of the component relative to other components on the page. Spacing can be managed for Top margin, Bottom margin, Left margin, and Right margin. All margins can be set to one of the following:

    • None
    • Extra Small
    • Small
    • Reduced
    • Regular
    • Increased
    • Large
    • Extra Large
    • Huge

    Note

    These sizes are relative to one another; the baseline is determined by Design System settings.

Size section [[]]

  • Height (optional): The height of the Image component.
  • Width (optional): The width of the Image component.

Display Logic tab [[]]

Standard display logic options are available to display or hide the component or feature.