The Photo Gallery component allows you to highlight a series of related images. site visitors 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.
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 without content will appear on the page as a placeholder.
- To edit the component:
- Right-click on the component and select Edit; or
- Double-click on the component.
- 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.
- Add an image to the gallery:
- Locate the image from the left-hand side DAM asset tray. Drag and drop it into the specified spot within the edit window.
- If possible, fields including image title, caption, or credit, that have corresponding data available from the DAM 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 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.
- Reorder images in the gallery:
- Click the green up and down arrows to reorder an image within the gallery.
- Remove an image completely by clicking the red minus (-) button.
- Note: Please do not reorder your photo gallery until all images have been added.
- Update gallery details:
- Click the Gallery Info tab.
- Insert an optional Gallery Title and Description.
- Click OK.
- 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.