Image gallery

Showcase a gallery of up to twelve images.

Image Gallery example

Bioscience facilities image gallery
Bioscience facilities image gallery mobile view

Why use an Image Gallery

This component is ideal for showcasing a group of images on a page such as accommodation or campus facilities. This is a carousel component which allows users to navigate between images using the side arrows on the selected image. Images are also displayed as thumbnails underneath the displayed image and can be selected by the user individually should they wish to not use the scroll feature.

When to use an Image Gallery

When considering using an Image Gallery component, ask yourself:

  • Quality and permission - are the images of high resolution and the appropriate permission form's been completed.
  • Orientation - landscape images are preferable but not compulsory and all images in the gallery should keep to one orientation.
  • Source - are they located on UWE's Asset Bank. All approved images should be uploaded in our image library.
  • Context of the page - does the page warrant multiple images and add value.
  • Number of images - if one or fewer images could an alternative component be more suitable
  • Captions - do the images needs adjoining captions.

If fewer images or video content then could consider another type of component such as a single media content or single media section component.

How to create an Image Gallery

There are two steps to creating an Image Gallery:

  1. Uploading images to the Media Library
  2. Creating the Image Gallery

Uploading images

Image dimensions

This component is recommended with landscape images, however if you plan to use any portrait images, the height should match the height of landscape images (480px).

You will need upload the image to the Media Library in the correct dimensions.

Image dimensions

Landscape: 850px by 480px

Portrait: max height of 480px

  • Navigate to the relevant folder within the Media Library, upload the image using the appropriate naming convention, adding alt text and compulsory fields.
  • To add a caption to an image, enter into the Information section, Title field.

Recommended word count

Images should have a caption added to meet accessibility web standards. This caption should be a short and descriptive sentence.

Caption

20-35 words

Creating the Image Gallery

  • Within Content Editor, navigate to the Image Gallery component and the relevant Image Gallery folder.
  • Right click on the folder >insert Image Gallery.
  • Create an new Image Gallery component using the correct naming convention.
  • Add each gallery image heading and image to the image gallery one, two, three, etc fields. You can have up to 12 images. Note: the first image added will be the default when the page initially loads.

Screenshot showing where to add a caption for an image in Sitecore.Image gallery component location in Content Editor