On this page:

Basic Info | Example | Tutorial | Accessibility Info | Screenshots

Basic Info

Use the Photo Gallery component to group two or more images together in one container. Site users access the gallery by selecting the introductory gallery image, which also indicates the total number of images available for viewing.

The gallery will open in lightbox mode on larger browsers and within the context of the page for smaller browsers.

Example

Tutorial

  1. Navigate to and open your page.
  2. Add the Photo Gallery component.
  3. A new Photo Gallery component placeholder icon will display in the space.
  4. To edit the component, click or touch the placholder. The component toolbar will display along the top of the space.
  5. Select the wrench icon to configure.
  6. The dialog window will open. Through here, you can insert and reorder images, providel image details, and update gallery information.
  7. Add an image to the gallery:
    1. With the Photo Gallery component dialog window open, click or touch the Add button
    2. Open the side panel and click on the DAM asset icon in the side rail. Identify an image from the left side DAM asset tray that you want to add. Drag and drop it into the specified spot within the edit window.
    3. If the image you've selected contains metadata, the image title, caption, or credit, will be auto-completed.
    4. 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.
    5. To remove the previously selected image, click the Clear icon. This icon looks like a broom.
    6. Image Alt Text: This is a required field. For site visitors 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.
  8. Add additional images to the gallery:
    1. Click the Add button in the dialog. A new image drop and info field will appear below the last image in the gallery.
  9. Reorder images in the gallery:
    1. Click the up/down arrow icon to reorder an image within the gallery.
    2. Remove an image completely by clicking the garbage can icon. 
      Note: Do not reorder your photo gallery until all images have been added.
  10. Update Details tab:
    1. Click the Details tab.
    2. Insert an optional Gallery Title and Description.
  11. Click or touch the checkmark icon to save and close. 

^ Back to top

Accessibility Info

Using Images

  • Images with text are difficult to read on smaller screens and can appear pixelated when magnified.
  • Screen readers are not able to read text displayed on an image.
  • When selecting an image, make sure it's something that can complement your text content rather than replace it.

Alternative Text

  • When writing your alt text, be concise and consider the purpose your image plays in the context of your content.
  • Because of character limits on different screen reader software, try to keep your alt text less than 140 characters.

Learn more about images and accessibility at NYU.

^ Back to top

Screenshots

Component Tutorial: Photo Gallery

Click or touch Add to add each image.

Component Tutorial: Photo Gallery Details tab

Add information about the gallery itself via the Details tab.