Image

The Image component lets you add images—plus alternative text that describes the images—to headers, drawers, popups, 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 (Basic tab):
    • Using Skuid NLX? Images can be sourced from previously uploaded files or external URLs.
    • Using Skuid SFX? 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.
  • Set the image’s properties
    • Add any desired behaviors for the image, and set up the interactions these behaviors will trigger.
  • Edit the image’s styles (size, borders, and padding).
  • Preview, and adjust as needed!

Properties

Basic 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.

  • 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.”

  • Behavior: To add an interaction to the image, select the interaction type here; the Interactions tab will then display, allowing you to define the action(s).

    Note

    This setting is required for page accessibility. When assigning an interaction to an image using the Interactions tab, this setting allows those interactions to be correctly interpreted by screen readers.

    • None: The default.
    • Link: The image will be wrapped in <a> HTML tags. Use this if you are creating an interaction where the end user clicks the image and links to a URL.
    • Button: The image will be wrapped in <button> HTML tags. Use this if you are creating an interaction where the end user clicks the image to trigger one or more actions.

The Image Source property

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

In Skuid NLX [[]]
  • File: Use a file previously uploaded within the Files tab. Setting Data Source Type to REST and Data Source to SkuidLocal lets you access Files tab images.

    • 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.YourContentSite.com/{{$Model.Account.data.0.Name <http://www.yourcontentsite.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 SFX [[]]
  • 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 fa-arrow-right 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

    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: 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[[]]

Interactions tab [[]]

This tab does not display unless you select an interaction option under Basic > Behaviour.

  • Action Type: To initialize the display of the record details, choose from three possible interactions:
    • Click: Best for desktop, as well as mobile.
    • Swipe: Best for mobile. Direction options include:
      • Either (direction)
      • Left
      • Right
    • Press: Best for mobile.
  • Action Types: Use the Action Framework to launch actions from the Queue.

Styles tab [[]]

  • Size: Alters the height and width of the Image.

    • Width
      • Auto: Extends to full width of screen or other container.
      • Custom: Customize width by percentage, pixel, and other options.
    • Height
      • Auto: Extends to full width of screen or other container.
      • Custom: Customize height by percentage, pixel, and other options.
  • Border and Padding: Set border and padding properties for the image.

    Note

    Border refers to the lines—or lack thereof—that form the boundary of the image within the page. Padding is the amount of space between the Image and container component’s border.

    • Border
      • No Borders
      • All
      • Left
      • Top
      • Right
      • Bottom
    • Padding
      • No Padding
      • All
      • Left
      • Top
      • Right
      • Bottom
    • Margin
      • No Margin
      • All
      • Left
      • Top
      • Right
      • Bottom

Custom styles

You can also add custom CSS values to change the appearance of the Image component. In the Styles tab, click fa-plus-circle Add New Custom Attribute and edit:

  • Property
  • Value

Need to remove a custom style attribute? Click fa-times-circle next to the newly-added attribute.

Display Logic tab [[]]

Conditional rendering allows you to display or hide the Responsive Grid, based on defined data conditions.