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.
Sample Photo Gallery
Same gallery of photos showcasing New York City.
W 4th Street Subway Station
Panoramic view of the Queensboro Bridge looking towards Midtown Manhattan New York.
Bow Bridge in Autumn on cold misty dayPhoto credit: John A. Anderson
Bleecker & MacDougal Streets
- Navigate to and open your page.
- Add the Photo Gallery component.
- A new Photo Gallery component placeholder icon will display in the space.
- To edit the component, click or touch the placholder. The component toolbar will display along the top of the space.
- Select the wrench icon to configure.
- The dialog window will open. Through here, you can insert and reorder images, providel image details, and update gallery information.
- Add an image to the gallery:
- With the Photo Gallery component dialog window open, click or touch the Add button.
- 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.
- If the image you've selected contains metadata, the image title, caption, or credit, will be auto-completed.
- If necessary, edit the image by using the supplied editing tools:
- Crop to adjust portion of image shown on page.
- Rotate image in 90° increments.
- Use the slider to zoom into the image.
- To remove the previously selected image, click the Clear icon. This icon looks like a broom.
- 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.
- Add additional images to the gallery:
- Click the Add button in the dialog. A new image drop and info field will appear below the last image in the gallery.
- Reorder images in the gallery:
- Click the up/down arrow icon to reorder an image within the gallery.
- Remove an image completely by clicking the garbage can icon.
Note: Do not reorder your photo gallery until all images have been added.
- Update Details tab:
- Click the Details tab.
- Insert an optional Gallery Title and Description.
- Click or touch the checkmark icon to save and close.
- 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.
- 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.