Image carousel/slider

This page covers:

Image slider with lightbox

Image slider example

Example: Course content panel / Studio work tab
/courses/study/Architectural-and-Urban-Design-MA-PGCert-PGDip.aspx

Once images are uploaded into the CMS, you will need to prepare two versions of each image for the slider: a thumbnail and a full width image. You will need to know the sizes they should be.

A slider should appear in a 2 column panel, whether in a tab or not, so sizes should be:

  • small image = 328×261
  • large image = no set size but try to keep them all alike (e.g. 1,000 pixels)

Select an image and then right-click ‘Create variation’ and edit it to the appropriate size.

Once you have made your two variations, you will need to click on them in the Website files and folders, click Edit, and then submit and approve them. Image editors have the permissions to be able to approve images directly, so you do not need to submit them to someone else and you should avoid doing so. You do, however, need to approve your variations before you use them in your slider, otherwise they will not display on the live version of your page.

Once you have made your variations and approved them, you can edit your page, click on the spot you want the image slider to appear and select Insert Webcontrol, UoB tools, Image slider with lightbox.

Selecting the webcontrol for Image Slider with Lightbox

This opens a window where you need to select the image variations you’ve prepared for the slider.

Inserting images into the image slider

The small variations will be used in the slider on the page; the large variations are what appears when a user clicks an image in the slider to see a larger version. The metadata description field of the larger image will be applied as a caption to it, so ensure this field contains relevant text describing the image, or saying who created it.

Image slider example

Image slider lighbox

Large image slider

This is to create a full-width image slider / gallery, with no lightbox, as can be seen here:
www.brighton.ac.uk/studying-here/applying-to-brighton/schools-colleges/index.aspx

First insert an Empty panel: no-heading-or-intro into the page for the slider to sit in.

Location of a 'no-heading-no-intro' empty panel

Click in the new panel and select Insert Webcontrol, UoB tools, Course page panel carousel.

This opens a window where you need to select the images to be included. Use the folder icon to browse to the images. Each image will need to be cropped to become 900×475 and Saved. Use the Resize sliding control to resize the image – do not adjust any of the numbers.

CMS window to crop an image

Once you have chosen and cropped the image, there is an Image caption field if you wish to add a caption for the image. If using captions it is best to add them to all images rather than just some of them.

Obviously you need to add more than one image for it to be a slider / gallery, with a maximum limit of six images (with or without captions).

General page carousel

This is for showing a set of related pages, not for creating navigation.

Click in the spot you want the carousel to appear and select Insert Webcontrol, UoB tools, General page carousel.

Embedding a general carousel via a webcontrol

This opens a window where you need to select the web pages for your carousel.

Inserting links to web pages in the general carousel

You need a minimum of 6 items to create a carousel, up to a maximum of 20 items.

Related courses carousel

The Related courses carousel on the course pages is dynamically generated, but a general carousel will look the same:

Related courses in a carousel