Indigo: add an image carousel with overlays
This guide is aimed at...
- 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.
- Avoid using Internet Explorer when editing;
- 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.
There are 4 stages
Stage 1 - create the carousel images folder
- 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!
Create a new folder and call it
- ID- carousel-images
- Title - Carousel Images
- Hide the folder in Properties
- 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
For each description, create a Silva document with the same name as the accompanying image e.g.
- image = houses-of-parliament.jpg
Silva doc = houses-of-parliament
If you want the images to appear in a specific order
- image ID= houses-of-parliament1.jpg
- image ID = london-by-night2.jpg
- Silva doc ID = houses-of-parliament1
- Silva doc ID = london-by-night2
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
- On the page where you want the Carousel to appear, click on external source
- From the dropdown menu choose Indigo: carousel (images and video)
- Click on get reference to get the images-carousel
- Slideshow width:
- Show overlay: choose 'yes'
- Leave all the other choices as they are
- Click on add external source;
- Save and publish;
- 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 firstname.lastname@example.org