Create an image gallery

An image gallery is like a carousel with photos. The user clicks the arrows to proceed forward and backward to view all the images (it does not automatically scroll).

Each photo needs to be uploaded individually to the Media library and given a caption in order to create the gallery, and then you need to go to the page where you want to feature the gallery in order to embed it. 

How to create an image gallery

1. Resize all of the images you'd like to include in the gallery to 604 x 309. (Note: If you're planning for your gallery to extend to full-screen width – turning off all sidebar elements – you should size your images to 1054 x 309. This is not advised generally though, and setting a screen to full width should be approved by a site administrator first.)
2. In the CMS, roll over Structure and click on Custom block library. Then click the +Add custom block button. (Do not click on Add custom block when it appears on the dropdown menu while rolling over Structure > Block library.)
3. Click Image Gallery.
4. Add a Title for your gallery.
5. In the Featured images section, add an image if you want to set the cover image for your gallery.
6. In the Gallery images section, add your images one by one, clicking the Select images button each time. You can:
   – search the Library and add existing images
   – add a new image by selecting Add image.
7. You'll need to include alternative text if your image is informative. If your image is decorative leave the alt text field blank and it will be flagged as decorative for screen readers.
8. Both the image Name and the Caption are displayed when the gallery is live, so keep this in mind when adding the image titles. If the Title field is completed, it will show as a tool tip when the user hovers the mouse over the image.
9. Click Save.

How to insert your image gallery

1. Go to the page where you want to insert the image gallery.
2. Click on the content components dropdown in the Body Content tab and choose Image gallery.
3. Click the Add another component button.
4. Start typing the title of the custom block you created. Existing gallery names will appear. Click on the one you want to use to select it.
5. Save the page.

Example image gallery