Using Add Image to include images on Directories List Display or Record Display views

created

With the Directories app, you can include images on your List Display and Record Display views. To do so, you'll need:

  1. The image saved in a publicly accessible place which could include your Salesforce Documents, Soapbox, or a third-party bulk storage service such as Amazon S3;
  2. A field in your Salesforce object used by your Soapbox Directories form that identifies the image you wish to display for a record. If you use Soapbox to store the images, the field can contain a relative link to the image. If you use a different service to store the images, the field must contain the full URL location of the image.;
  3. An Add Image element included on your Soapbox Directories form

Once you have the first two items in place, add the image element as follows:

  • Navigate to the Directories Manager
  • Click Form Manager
  • Open the form for which you wish to add the image
  • Click on the List Display tab or Record Display tab, based on which you'd like to add the image
  • Click Add Image



  • In the popup, for Salesforce Field, select the field that houses the reference to the image. If this is a new field you have just added to Salesforce and it is not appearing in the list, you may need to close this popup, clear the site cache, and click Add Image again.
  • For Published, leave the option as Yes
  • For Hidden, leave the option as No
  • For Default Value, enter the location of an image that you wish to use as the default, if a given record has no image to display. If the image is stored on Soapbox, you can use a relative URL path to the image. If it is on a different service, enter the full path. This field is optional.
  • For Label, customize the text to appear next to the image, if you wish
  • For Display Label, choose whether or not you wish the label to appear next to the image
  • For CSS Keywords, if specific styling has been added to your Soapbox to customize the display of image, you may add the appropriate keywords here.
  • For Max Image Width and Max Image Height, you may set a top value for the display size of your image. If your image is greater than the maximum, it will be scaled down appropriately. It should be noted that this feature will load the full image and scale it down without altering the original file. For large image files, it is recommended that you resize them to reduce load time rather than relying on the Max Image Width and Max Image Height feature to alter their display.
  • For View Position, select the page area in which you wish to display the image
  • For Access Level, if you have logged in users accessing your site, you may choose Public or Special to restrict the display of the image to logged in users, or a subset of logged in users
  • Click Save
  • On the List Display tab or Record Display tab, reorder the Add Image element within other elements in the same View Position by clicking and holding the + sign to drag and drop the element where you wish it to appear
Have more questions? Submit a request
Article is closed for comments.