XClose

Information Services Division

Home
Menu

Indigo: add an image carousel with overlays

This guide is aimed at...

  • Staff
  • IT Administrators

Before you start...

You will need to have Chief Editor, Editor or Author access in Silva;
You will need to have attended Silva training.

  1. Avoid using Internet Explorer when editing;
  2. Log on to the relevant website by adding /edit at the end of the web address or clicking on the small cross at the bottom of the page.

Instructions

There are 4 stages

Stage 1 - create the carousel images folder

  1. Go inside the folder where you want to create the carousel
    NB If you create the carousel at the root of your site, place the folder at the root!
  2. Create a new folder and call it

    1. ID- carousel-images
    2. Title - Carousel Images
  3. Hide the folder in Properties
  4. Place the relevant images inside the folder - images should be no wider than 1000 pixels and preferably be landscape, not portrait...!

Stage 2 - add pages for descriptions / overlay

  1. For each description, create a Silva document with the same name as the accompanying image e.g.

    1. image = houses-of-parliament.jpg
    2. Silva doc = houses-of-parliament

      If you want the images to appear in a specific order

    3. image ID= houses-of-parliament1.jpg
    4. image ID = london-by-night2.jpg
    5. Silva doc ID = houses-of-parliament1
    6. Silva doc ID = london-by-night2

Carousel image folder

Stage 3 - writing the descriptions

  • When you want to write the descriptions and maybe add a link, make sure you delete the Title and instead use the Heading style. The Title style is too large for carousels!
  • If you use a short text, it will result in a short overlay!
  • Links don't need a bullet point on carousels
  • Make sure you check the text shows clearly on the images! e.g. a very dark photo will NOT show the text well...

Stage 4 - embed the carousel

  1. On the page where you want the Carousel to appear, click on external source
  2. From the dropdown menu choose Indigo: carousel (images and video)
  3. Click on get reference to get the images-carousel
  4. Slideshow width:
  5. Show overlay: choose 'yes'
  6. Leave all the other choices as they are
  7. Click on add external source;
  8. Save and publish;
  9. The Carousel should now appear on the page in question.

Related guides & other info

Help & Support

For further help and assistance you will need to contact web-support@ucl.ac.uk

Feedback

We are continually improving our site, so please provide us any feedback on this web page using the form below. It would also be really useful if we could discuss your feedback with you, so if you are happy to be contacted please include your UCL email address in 'Email' field below.

Please note: We can only respond to UCL email addresses

Help us improve this page