New York University Skip to Content Skip to Search Skip to Navigation Skip to Sub Navigation

Photo Gallery

The Photo Gallery component is meant to allow CMS Authors the ability to gather a collection of related photos and present them in a lightbox-style presentation. Depending on the column space an author is placing the gallery; there are two gallery styles.

Photos are pulled from the Digital Asset Management system and any pre-defined metadata within the DAM will automatically pre-populate individual photo data fields in the component's dialog edit menus.

When to use it?

Use the Photo Gallery component when you want to highlight a series of related images. When a site viewer clicks a thumbnail image they will see the full size of that image in lightbox mode.

Where to use it?

You can use a Photo Gallery in 1-, 2-, and 3-column containers. Although each version has a different look, they share functionality.

How to use it?

  1. Navigate to and open the desired page.
  2. Add a component.
  3. By default, you will see the text "Photo Gallery not configured" displayed at the top of the component.
  4. Double-click on the text or right-click and select Edit and an edit window will open with the following options:

Advanced Tab

  1. Number of Rows (Only for 1- or 2- column spaces)
    1. If you have added the Photo Gallery Component to a true 1- or 2- column space (not a 1- or 2- column space defined by a Column Control component), you may define the number of photo thumbnail rows. There can be a minimum of 1 row and a maximum of 8 rows.
    2. If you have added the Photo Gallery component to a 3-column space, you are limited to display one row of images, 10 image thumbnails per pane. Arrows will appear below the thumbnail images to allow end-users to scroll between thumbnail panes, but the arrows will only show when there is more than one pane of images.
  2. One Column Option
    If you have added the Photo Gallery component to a true 1- column space (not a 1- column space defined by a Column Control component), you have the option to choose how the images are displayed:
    1. Thumbnails Version
      The Photo Gallery will display thumbnail versions of each image you upload. Note, if you do not select enough images to fill the default image panel (which, by default is six rows of 3 images), then a gray thumbnail image will appear as a placeholder.
    2. Single Thumbnail Version
      The Photo Gallery will display a single thumbnail image as the gallery "cover". This will be the first image you upload to the gallery. The end-user will be able to view the rest of the images in the gallery through a lightbox display once they click on this first cover image.
  3. Single Gallery Header
    If you've chosen to display the "Single Thumbnail Version," here you may add a title for the gallery to describe the theme or other pertinent details relating to the images contained in the gallery.
  4. Photo Gallery Header
    Here you may add an optional title for the gallery.

Photo Gallery Tab

  1. To add images to the Photo Gallery, drag an image from the left-hand Asset Finder to the component window in the "Drop an Image" area. You may need to search for your images using the search utility at the top of the Asset Tray.
  2. After you've dragged the image into the component window, fill in the following information:
    » Alt Text: specify text that is to be rendered when the image to which it is applied cannot be rendered. (required)
    » Title: include a title with your image.
    » Caption: include a photo caption.
    » Credit: include the image's photographer credit.
  3. To add additional images, click the Add button and then repeat the above steps for each image you wish to add. If you wish to edit any of the information on a particular image, find it using the drop-down menu.
  4. Once you've added all your images, click the OK button.
  5. If you wish to remove the image from the gallery, click the Remove button.
  6. Click the magnifying glass icon in the Sidekick to open the page in Preview mode to ensure that all additions are as expected from a site viewer's perspective.

Component Tutorials

Still need help?

To report an issue with using components, please contact the IT Service Desk:


Photo Gallery Example

Photo Gallery Known Bugs


Page Layout: When the Photo Gallery component is added into a 1- or 2- column space as defined by a Column Control component, the gallery will display incorrectly and extend beyond the column space. Depending on where the column is located, the gallery may overlap other page content or extend beyond the margin of the five column grid.


Do not insert the Photo Gallery component within 1- or 2- column space created using the Column Control component.


Unable to remove a "new slide" from the list of Photo Gallery of slides. A broken image placeholder appears in the gallery where the new slide is located and attempts to remove the slide cause it to reappear back in it's original location.


To remove a slide it must first have an image associated with it. Afterwards, remove the slide as you would any other slide within the Photo Gallery component.

                    Updated February 2016

NYU Footer