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.
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.
- Step 2: Log into iSite, and click on 'Create New->Image Slider' (top-right):
- Step 3: Add a name and title for your Slider:
- Step 4: Upload you image and fill out the caption
- 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.
Click 'Save', then click the 'Preview' button (the 'eye' icon at the top, next to 'Save').
- 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):
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:
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.
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.