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.

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 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 is 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 plain, 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 a 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 Finder.
  2. After you've dragged the image into the component window, fill in the following information:
    1. Alt Text: specify text that is to be rendered when the image to which it is applied cannot be rendered. This is a required field.
    2. Title: include a title with your image.
    3. Caption: include a photo caption.
    4. 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 the end-user's perspective.

When the end-user clicks a thumbnail image they will see the full size of that image in lightbox mode.

Component Tutorials

Still need help?

To report an issue with this component, please contact the IT Service Desk:


Photo Gallery Example


Photo Gallery Known Bugs

No known bugs at this time.

                    Updated January 2013

NYU Footer