Photo Gallery

Basic Info

The Photo Gallery component allows you to highlight a series of related images. Site viewers are invited to view the gallery by clicking on the introductory gallery image that also indicates the total number of images in the gallery. To accommodate browser size, the gallery will open in lightbox mode for larger browsers or within the context of the page for smaller browsers.



  1. Navigate to and open your page.
  2. Add the Photo Gallery component.
  3. A new Photo Gallery component without content will appear on the page as a placeholder.
  4. To edit the component:
    1. Right-click on the component and select Edit; or
    2. Double-click on the component.
  5. An edit window will appear so you can manage images in your gallery. Insert images, reorder images, provide additional image details, and update gallery information.
  6. Add an image to the gallery:
    1. Locate the image from the left-hand side DAM asset tray. Drag and drop it into the specified spot within the edit window.
    2. If possible, fields including image title, caption, or credit, that have corresponding data available from the DAM will be auto-completed.
    3. If necessary, edit the image by using the supplied editing tools:
      1. Crop to adjust portion of image shown on page.
      2. Rotate image in 90° increments.
      3. Use the slider to zoom into the image.
    4. To remove the previously selected image, click the Clear icon. This icon looks like a broom.
    5. Image Alt Text: This is a required field. For site viewers using screen reading software alternative (alt) text provides information about the image on the page. This text should be short (like a tweet of 140 characters or less) and provide details about the image within the context of the page. <<Learn more about accessibility.>>
  7. Add additional images to the gallery:
    1. Click the Add Item + button in the upper right-hand corner of the edit window. A new image drop field will appear below the last image in the gallery.
  8. Reorder images in the gallery:
    1. Click the green up and down arrows to reorder an image within the gallery.
    2. Remove an image completely by clicking the red minus (-) button.
  9. Update gallery details:
    1. Click the Gallery Info tab.
    2. Insert an optional Gallery Title and Description.
  10. Click OK.

Back to Top


Component Tutorial: Photo Gallery

Component Tutorial: Photo Gallery