5. Image Carousel and Large Image carousel blocks

1. What are the Image Carousel and Large Image Carousel blocks?

The image carousel block and large image carousel block are two different blocks used to add either a single image or a series of images to your page. They can be used on several page types including project and news pages. The two blocks are almost identical when adding to your page but serve two separate purposes:

• Image Carousel – can only contain and display images at half-width
• Large Image Carousel – can only contain and display full width ‘hero’ images

2. Preparing and uploading imagery

Before you create the block, it’s worth ensuring you have considered which image(s) you are using and prepare it/them first. Please consult the following guidance for help in preparing and uploading imagery.

Getting started – Prparing imagery for the website

Getting started – Managing imagery for the website

3. Components of an Image Carousel and Large Image Carousel block

The two image carousel blocks are made up of two separate components.

1. Image Carousel block / Large Image Carousel block – this is the container for your image or series of images. You must create this container block first before being able to add images to your carousel
2. Image Card With Zoom block / Image Card block – each image you add to a carousel is its own block that sits within the Image Carousel block / Large Image Carousel container block. You can add as many items to a carousel as required

4. Creating an Image Carousel and Large Image Carousel block

To add either block to your page, you must create it within the Main Content area of the CMS.

Within the “Content” tab of the content editor, navigate to the section titled “Main Content area”. Click “Select Content” then “Create a new block”. You’ll then be presented with a list of different blocks to choose from. If you’re using half width images, select “Image Carousel”. If you’re using full width ‘hero’ images, select “Large Image Carousel”.

After selecting 'create', give the block a name. If you’re using multiple image carousel / large image carousel blocks on a page, it’s worth giving each of them names that provide some context, e.g., “Image carousel – diagrams”, “Image landscape”, “Image carousel – masterplan visuals” etc. for ease should you wish to edit later. If you’re only creating one image carousel block, naming it just “Image” or “Image carousel” will be fine. After adding a name to the block, click “Create”. This will create the container block and add it to your main content area.

To start adding images to the block:

• Click on the ellipsis and click “Edit” to open the block
• Click “Select content”, then click “Create a new block” to create an image card block and give the block a name i.e. image 1, image 2 etc
• To add the image, open your image folder in the asset tree in the right panel, find the image you wish to use and drag it into the “on page image” field. Alternatively, you can find the image manually by clicking on “Select Image”
• Next, you must give your image a caption. This is mandatory. The caption should provide context so the user can understand what they are looking at and why the image adds value to the page. They shouldn’t be any longer than 1-2 sentences. Captions shouldn’t be repeated if you’re creating a carousel containing multiple images. After adding your caption, click “create”.

Please follow the steps above if you wish to add more images to the carousel. You can drag and drop the image card blocks to rearrange the order in which they appear.

Example of a 'standard' Image Carousel block containing multiple images

Example of a Large Image Carousel block containing multiple images