Image gallery
The gallery pattern is used to create an interactive visual story telling element to a page. Images are stacked in a 3 column grid and when the image is clicked it displays in a light box with further description.
When to use galleries
By design the gallery displays in a 3 column grid. The audience can click on an image to make it display in a light box. From here, the audience can scroll through all the images, read the descriptions, and close the gallery at anytime to return to the page.
On mobile the gallery stacks to a single column where the audience can open the image in a light box and scroll through the gallery. Only the first 3 images display when the page loads, with a button – Load more – for the audience to display the remaining images.
Do
- An image gallery can be used on standard and landing pages. For landing pages, it is recommended to use the full-width section.
- It is recommended to have a minimum of 6 images in a gallery and a maximum of 12.
- The images display in a 3 column grid. The images automatically adjust to a responsive display on mobile.
- Use high-quality images that are relevant to the content of the page.
- Add images in their natural size – the component can accept any size including horizontal and vertical.
- Do include a heading and introductory text before the gallery. This can give the audience context about the gallery and encourage them to open the gallery and scroll.
- Ensure the images you are adding to the gallery have a description. You can add the description to the image in the media library. Learn more about uploading images to the CMS.
- The description should be a maximum of 200 words.
- The descriptions on the images in the gallery should provide the audience with further information that complements the content on the page.
- Try to create a narrative for the audience with the descriptions as they scroll through the gallery.
Don't
- Don't use galleries for important information. Galleries should complement the main message of the page content.
- Don’t use an image gallery just to create visual interest or fill space on the page.
- Don't use low-quality or pixelated images that appear unprofessional.
- Don't use multiple galleries on a page. Too many images may overload the audience and cause them to abandon the content, especially on mobile.
How to add a gallery
Landing page
- Click + Create content block and select Gallery from the list.
- Click Add media
- Select your images one at a time from the media library, or
- select multiple images at the same time.
- Once you have selected your image/s, click the Insert selected button.
- Click Update to add the gallery page.
- Configure block to remove an image or add another image. You can also reorder the images while in this mode by dragging and dropping them to the position you require.
- Save layout to display your gallery.
- Click on each image to check how it displays in the light box and to see the description.
- Scroll through the gallery and review the content – images and descriptions – to check it will make sense to the audience.
Standard page
- From drop down Add Gallery.
- Click Add media
- Select your images one at a time from the media library, or
- select multiple images at the same time.
- Once you have selected your image/s, click the Insert selected button.
- The images are now added to the gallery on your page where you can remove an image or add another image. You can also reorder the images by dragging and dropping them to the position you require.
- Save to display your gallery.
- Click on each image to check how it displays in the light box and to see the description.
- Scroll through the gallery and review the content – images and descriptions – to check it will make sense to the audience.
How the gallery displays
Hover over an image to click to expand the gallery.
Gallery with different sized images
Gallery with the third image in a vertical size, all other images horizontal and natural sizing applied.
Gallery with all images horizontal and the same size
Live examples
You can see live examples of how agencies have applied the component to their content.