An image gallery is like a carousel with photos that the user clicks to progress through (i.e. it does not automatically scroll). Each photo needs to be added individually to the Media library and given a caption.
- 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. Setting a screen to full width should be approved by a site administrator.)
- 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.)
- Click Image Gallery.
- Add a Title your gallery.
- In the Featured images section, add an image if you want to set the cover image for your gallery.
- 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.
- 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.
- 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.
- Click Save.
See the example image gallery below.
Reviewed 30 March 2021