Create an image gallery

Overview

The image gallery component embeds a horizontal carousel of images onto a page. The carousel doesn't automatically scroll – the user clicks the left or right arrows to move between images. The images can also be viewed at full-screen size.

Each image in the gallery will display its name (mandatory) and caption (optional).

Image galleries can be added to:

• the Landing page template
• the Publication page template (also known as a publication's child or grandchild page)
• some custom templates.

The gallery has to first be built in the Custom Block Library section in the CMS – it can't be created within a page template, only embedded. This means the same image gallery can be embedded on multiple pages and only needs to be updated in the one spot in the CMS.

Image dimensions (in pixels)

• Landscape: 1200 (w) x 800 (h)
• Portrait: 533 (w) x 800 (h)
• Square: 800 (w) x 800 (h)

Landscape orientation works best.

Create an image gallery

1. In the CMS, roll over or click on Structure, then click on Custom Block Library.
2. Click the Add custom block button.
3. Click Image Gallery.
4. In the Block description field, add a name for your gallery. This is only visible in the CMS and is used to search for your gallery.
5. Ignore the Featured images section – this field has no current functionality.
6. In the Gallery images section, click Select images and either:
   – search the library to add existing images
   – add a new image by selecting Add image
7. If you're adding an image:
   – include alternative text if your image is informative or leave this field blank if the image is purely decorative.
   – keep in mind that both the image name and the caption are displayed in an image gallery.
   – if you fill in the Title field, this is what displays when a user hovers their mouse over the image.
8. The Topic, Tags and Revision information fields aren't mandatory to fill in.
9. Click the Save button at the bottom to create your gallery.

Embed your image gallery onto a page

1. In the CMS, go to the page where you want to add the image gallery. This can only be a Landing page, Publication page (e.g. child or grandchild page) or specific custom page templates.
2. Click on the Add component button in the body content section and choose Image gallery.
3. Start typing the name of your image gallery and select the correct option from the dropdown list.

Find and edit an image gallery

1. In the CMS, roll over or click on Structure, then click on Custom Block Library.
2. You can search for a gallery using its name or keywords in the Block description field.
3. You can filter your search results to only show Image Gallery options by selecting this in the Block type dropdown menu.
4. To edit the gallery, you can click on the name in the Block description column or the Edit button in the Operations column.
5. You can edit all fields as well as add and/or remove images.
6. Click the Save button at the bottom to save your changes.

Example image gallery