Carousels

Carousels are a way of displaying multiple images on a page in a scrolling format, usually at the top of the page. 

How to add to a webpage

  1. First, add the Carousel container template as a piece of content on the page. This contains the code needed to position the carousel and make it work. You do not need to do anything with this one other than name it, we would suggest naming the content 'carousel container' for easy reference. This template is invisible on the live webpage, but the carousel will not work without it.
  2. Next, use Carousel entry templates to add each image. You need one Carousel entry template per image.
  3. In T4 you should place the Carousel container and Carousel entry pieces of content below Page Structure V1 (to enable your Heading 1 to sit above the carousel) in T4.

Specifications

  • Images should be 930 x 500px
  • Images should be jpegs and loaded into the media library using the media type 'image'
  • Images should be high quality and processed from the original file for best quality, but exported for web at a reduced % (such as 60%) to ensure the file size is not too high
  • Images should be photographic. Logos are generally not suitable in large carousels and should be added to webpages using the Highlight content panel template, displayed in the right hand column instead
  • Arrows appear on the images automatically if more than one carousel entry template is added
  • Arrows do not appear if only one carousel entry template is added. It is OK to have just one image in a carousel template, this will display as a static image
  • Carousels should have no more than four images. Users do not stay watching the carousel for more than a couple of images and each image adds to the page load time.

Using captions

  • Captions should be entered into the 'caption' field in the Carousel entry template
  • There should be a unique caption per image
  • It is an optional field, so images don't have to have a caption. If no caption is entered, the translucent panel at the bottom of the image won't appear
  • Captions should be no more than one sentence and contain no more than 10 words (approximately) - preview (after approving the piece of content) to check that your caption fits on one line. Carousel image 02 demonstrates how an image looks in the carousel when the caption is longer than one line. The carousel template automatically fits it on two lines, but this may not be ideal as it's a lot of text for users to read on a moving piece of content, and the caption panel gets very deep and obscures a lot of the image.

Linking carousel images to webpages

  • You can add a link in the 'link' field in the Carousel entry template to allow a carousel image to link to a webpage.
  • Paste the weblink into the link field eg http://www.bbc.co.uk
  • The Carousel template automatically changes the mouse pointer to the hand symbol when users roll over the image if it has a hyperlink, so that users know it will go to another webpage when clicked.