In-Depth Toolkit

Sliders Training

Before making an Image Slider, make sure you have been added to the IDT user list - to get on the list, send a request, with your name and email, to DigitalNewsIDTAdmin@bbc.co.uk

Note: Currently Google AMP, Facebook Instant Articles and syndicated feeds strip out includes from CPS stories, so the current advice is that you use static images instead of includes. Putting two images side-by-side or sequentially will often illustrate your point as well as a slider and will be available across all platforms.

Step By Step Guide

Watch the video and/or follow the steps below.

  • Prerequisites:

    Before creating the slider, make sure you have two images showing the same scene with an interesting difference. Two unrelated or poorly matching photos are NOT suitable for this format.

  • Step 1: Prepare your images. You should use PhotoShop or something similar for this. If you don't have access to PhotoShop Pixlr.com is a good online alternative. The best way of aligning the images is to create 2 layers and then put the top layer at 50% transparency and move it into place. Then export each layer at full opacity. align images
  • Step 2: Log into iSite, and click on 'Create New->Image Slider' (top-right): Create New slider
  • Step 3: Add a name and title for your Slider: Add a quiz name and title
  • Step 4: Upload you image and fill out the caption upload image 1
  • Step 5: Repeat for the second image.
  • Step 6: It's highly recommended that you preview and test your slider in iSite before publishing - check that the images really do align.

    Preview your quiz

    Click 'Save', then click the 'Preview' button (the 'eye' icon at the top, next to 'Save').

    Check the preview
  • Step 7: When happy that you're slider is finished, save and publish, then copy the include path that you require - either News (including World Service), Sport or Newsbeat.
  • Step 8: Now open your article in CPS. To add IDT content, you'll need to add an 'include' to your article. To do this, follow the same process as you do for other includes click 'New Story Component->Include File' (top of the page): Add an include to your CPS page

    Now paste the include path from iSite into the 'Web' section of your include and choose a title. Note that CPS previews don't display IDT content correctly, but when you publish your article, the Slider will appear in your work:

    Add your include path to the Web section of your include.

Example photos from fstoppers.com

When is an image slider a good idea?

This simple interactive element has proved quite popular with journalists to illustrate the change in a scene over time. There are some examples on the following pages that illustrate both the slider format and the option of putting two images on the page:

The success of the slider depends to a large degree on there being a dramatic change between the two images and that the scene is as close to an exact match as possible. Aerial photography works particularly well.

aerial shot of fire

It is worth mentioning that using this format inappropriately for images where little has changed or the photos are from significantly different angles, JUST LOOKS SILLY.

Reminder: Currently Google AMP, Facebook Instant Articles and syndicated feeds strip out includes from CPS stories, so the current advice is that you use static images instead of includes. Putting two images side-by-side or sequentially will often illustrate your point as well as a slider and will be available across all platforms.