Skip to content

Rochester Core

Image Gallery component

Explore documentation around Rochester Core’s Image Gallery component.

1. How-to video: Image Gallery component

2. Image Gallery options

After selecting the Image Gallery component on any page that uses the Rochester Core plugin, you’ll be presented with the following options to customize the display and enter content.

Title

The title field is where to add the Image Gallery’s component’s title or headline. The title here will be automatically styled, but keep the heading hierarchy of the page in mind to determine if heading 2 or heading 3 would be needed.

Content

The content block is where supporting text can be added to the Image Gallery component. Usually, this would include a sentence or two describing the gallery’s content.

Images

Use this space to select the images you would like to display in the image gallery. A minimum of 5 images is required, and a maximum of 20 images is allowed.

Click “add to gallery” and select which photos from the Media Library to include in the gallery.

Images will be cropped to either a 3:2 ratio (840 x 560px), a 2:3 ratio (375 x 560px), or 1:1 ratio (560 x 560px).

Image caption

To display captions for the images select “yes.” When enabled, captions will be displayed for all the photos in the image gallery. The image caption field is automatically filled using the “caption” field from the Media Library.

To add a caption to a photo, click the picture in the Image Gallery component to bring up the fields for the photo. Add the desired caption in the “caption” field.

Image credit

To display image credits for the images select “yes.” When enabled, image credits will be displayed for all the photos in the image gallery. The image credit field is automatically filled in using the “description” field from the Media Library.

To add credit to a photo, click the picture in the Image Gallery component to bring up the fields for the photo. Add the desired credit in the “description” field.

3. Example Image Gallery

Explore an example exeuction of the Image Gallery componenet in action.