Image gallery component.

The image gallery component is a series of images users can scroll through.

Image galleries are built in the Custom Block Library section in the CMS. Once built, the gallery is embedded onto a landing page. As with all custom blocks, one image gallery can be embedded on multiple pages, and it only needs to be updated in the one location. 

On this page:

Check your images are the correct format and size

Visit the image ratios, sizes and component use guide.

Add a new image gallery

1. In the CMS, roll over or click on Structure, then click on Custom Block Library.

2. Select Add custom block. 

3. Select 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:

   1. search the library to add existing images

   2. add a new image by selecting Add image

7. If you're adding an image:

   1. include alternative text if your image is informative or leave this field blank if the image is purely decorative. 

   2. keep in mind that both the image name and the caption are displayed in an image gallery.

   3. 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 select 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. Select Save to apply your changes. 

Live exmple of an image gallery

Open