Media Gallery

The media gallery component is intended to showcase a group of visual content. It allows a lot of visual content to be shown in an interactive list, without taking up a huge amount of space. The gallery thumbnail view provides a scannable preview of content, whilst the open expanded view shows images or videos in full size to reveal detail.

For example, this component might be useful for showcasing relevant student work, an accommodation gallery or imagery from a research piece.

This component is intended for use on inner content pages, and not for the homepage or landing pages. It is designed to sit inline with body text on a page.

Key information

A media gallery is made up of 2 content types:

Media gallery placeholder

• A gallery is made up of number of media gallery items, ideally in multiples of 4
• The media gallery placeholder contains an optional heading and text field to allow some introductory content to be added
• The media gallery placeholder populate by looking for a child section called Media gallery items. NB when creating this child section ensure you untick the Show in navigation element

Media gallery item

• Each item has to have an image, even for iframed content as the image will form the thumbnail
• If the media url element is completed this will show instead of the image when the item is opened
• To add a YouTube or Vimeo video paste in the URL
• If a 360 virtual campus video is added a 360 icon will automatically be added to the thumbnail
• An optional caption can be added using the caption title and caption fields
• For accessibility a transcript can be added to your media embed. For all new videos this must be added
• NB you must preview the media gallery placeholder to see the full gallery in situ
• NB if you are adding caption content to your media gallery item, avoid adding double quotation marks, due to a T4 bug these do not work 

Accessibility

Videos must have a transcript added. 

If your video is a "talking head" video with no change in background/context, a transcript and closed captions will be enough. However if not it is a requirement for an audio described version to be provided. An audio description provides a user who has a visual impairment with the equivalent content available to a user who can see, in a synchronised format (for example timed to the video). 

Image guidance

• Width of the image must be between 1000 and 2000px, recommended dimensions are 2000 x 1333px or in ThirdLight use 'Image embed/group/gallery 3:2'
• All images from Thirdlight should be cropped using the 'Constrain proportions' checkbox
• All images must be optimised using TinyJPG before uploading to T4
• NB each separate image must be given an individual/different description (alt tag) - for user experience, SEO and accessibility - when they are uploaded to the T4 Media Library

Examples

• 3 items
• 8 items
• 8 items mixed media
• 24 items
• 360 content
• Item with transcript and audio description