This page covers:
Image slider with lightbox
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.
This opens a window where you need to select the image variations you’ve prepared for the 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.
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.
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.
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.
This opens a window where you need to select the web pages for your 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: