Media Gallery

Overview

Enhance content presentation

The Media Gallery presents images and videos in a scannable grid of tiles. You can use it to group together related media items. 

How to use it

Step 1: Introduce the gallery

Set the scene for the gallery items so users want to interact with them.
 

Feature heading

The feature heading should explain the value users will get from the gallery items.

For example, a collection of videos taken from a conference could be introduced with ‘Hear from our expert conference speakers’.

Avoid long headings – they run into the right-hand side of the screen, making them difficult to read. Stick to within about seven words (45 characters).

Feature intro

If necessary, you can follow up the heading with a short introduction using the ‘feature intro’ text field. Provide additional context and details that would encourage users to explore the content.

Don’t run onto a second line – that gives you about 34 words (190 characters).

Step 2: Add the media items

The Media Gallery supports both images and video.

How to add an image

Select 'add media image'. You can choose an existing image or upload a new one. 

To upload a new image, select ‘import image', then ‘select file’.

Add a title and alternative text, then select ‘select image’.

For more information about uploading images to the CMS, see the ‘Image Guidelines’ advice.

How to add a video

Select ‘add media video’. You can choose an existing video or link to a new one.

The best way to add a new video is to embed it into the page. Embedding the video from a video hosting platform, rather than uploading directly to the page, helps to maintain a fast page speed – a key Google ranking factor.

To get started, upload your video file to YouTube or Vimeo. Then copy the URL – you’ll need this for the next step.  

Add the video link to the media gallery 

Select ‘link a video’. Paste your video URL into the ‘video URL’ text field.  

Use the ‘name’ text field to give your video a suitable title. This text will appear when users hover over the video. Screen reader users rely on this text to understand the video content. So give it a descriptive, user-focused title, such as: 

• "How to embed a video in the CMS "

Then select ‘save link’.  

Select a thumbnail image  

You need to add a thumbnail image. This is how the video will appear in the gallery until the user interacts with it. Upload the image using the 'thumbnail image' option. 

A good thumbnail image should encourage users to watch the video. Choose an engaging frame from the video and take a screenshot. Then format and save the screenshot in line with the recommended image requirements.

Recommended image specifications

For more information on how to use images in the CMS go to the Image Basics page.