Configuring the images to display next to each Results List record

For a Results List component, you can display an image next to each record.

Excerpt from the Results List end user view showing a record with an image

Studio supports two different types of images:

Image Type Description
Icon selected from Studio's image gallery Studio provides a basic set of "document" icon images.

If you use this option, you can assign one of these images to each value of a selected attribute.

This option is typically used when icons represent a category or other high-level classification of records (for example, a document type or the source system from which the record was indexed).

Images from a URL that you provide If you select this option, then you provide the URL for the image.

The URL can include a token to represent the value of a selected attribute.

This is typically used when most of the records in the system have associated images published to a Web or application server (for example, a unique preview image for products represented by each record).

In the Image Display section of the edit view, to configure the images:

  1. To display an image next to each record, check the Display an icon or image with each record checkbox. The box is checked by default.
    Initial display of Image Display section of the Results List edit view

    To not display an image, uncheck the box. If you uncheck the box, the rest of the image settings are hidden.

  2. If you are displaying an image next to each record, then the Default image setting determines the default image to display. The default image is from the Studio image gallery. To select a different default image:
    1. Click the Select button.
    2. On the Select Image dialog, click the image you want to use as the default image.
      Select Image dialog displayed from the Results List edit view
    3. Click OK.
    For images other than the default image, you can either display:
    • An icon from the Studio image gallery. You can select a different icon for each value of a selected attribute. The selected attribute cannot have more than 15 values.
    • An image from a URL you provide. The URL can include tokens to represent values of a specific attribute.
  3. To configure an icon from the Studio image gallery to display for each value of a selected managed attribute:
    1. Click the Icon radio button.
    2. From the Available Attributes list, drag the attribute you want to use to select the icons.
      Note: To make it easier to drag the attribute, you can collapse the Sort Options and Results Template sections.

      When you drop the attribute, the list of available attribute values is displayed.

      Image Display section of the Results List edit view with an attribute selected

      For a hierarchical attribute, only the top level of values is displayed. On the end user view, records use the image for the top level value.

      For example, for a WineType attribute, the top level values might be Red, White, and Sparkling.

      If a record has a WineType value of Merlot (Red --> Merlot), that record would use the image selected for the Red value.

      If the attribute has more than 15 values, an error message is displayed.

      Image Display section of the Results List edit view showing the error message when an invalid attribute is selected

      When you close the error, the attribute is removed.

    3. For each attribute value, to select the image to use, click the Select button.
    4. On the Select Image dialog box, click the image you want to use, then click OK.

      The list is updated with the name of the selected image.

      Image Display section of the Results List edit view with icon images selected for the attribute values
    5. To clear a selected image, and display the default image for that attribute value, click the delete icon.
    6. To select a different image for an attribute value, click the edit icon.
  4. To display an image from a URL:
    1. Click the Image preview radio button.
      Image Display section of the Results List edit view with the Image preview option selected
    2. In the field, type the URL to the image file.

      To insert an attribute value into the URL, use ${attributeName}.

      For example, if there are a set of image files representing the different values of the WineType attribute, then the image URL would be something like http://my.company.com/images/${WineType}.jpg.