In-Depth Toolkit

Datapic Training

Before making a Datapic, 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 export the datapics or quotes as PNG files and add them to the stories as images, instead of using includes. Using the IDT Image generator will give a high quality PNG, which won't be compressed when published in CPS. Please use this rather than your own screen capture tools

Step By Step Guide

Watch the video and/or follow the steps below.

  • Step 1: Log into iSite, and click on 'Create New->Data Pics' (top-right): Create New Dataset
  • Step 2:
    • Fill in Name of your DataPic (don't forget to add your language name to it)
    • Do not worry about Include Path as this is created automatically
    • Select your Service from dropdown
    • Click on EDIT then LAUNCH in BUILDER (a quick double-click will get you into the builder)
    Add a name Open builder
  • Step 3: Drag an image into the 'Load Image' box, or click 'Browse' choose a file:
    Note: Any image you upload must be at least 978x550 in size, and less than 1.1mb.
  • Step 4: In the menu (last item), choose the type of Datapic you want - StatPic or QuotePic. Choose StatPic or QuotePic
  • Step 5: Click on the 'Add Content' button (shown above), a window will appear.
    Enter the Title and Sub-header of your datapic. Click Add Content
  • Step 6: Add your 'Super Impact' (headline) figures and stats.
    Note: You can add up to two super impact figures - click the + icon to add another. Choose super impact figures
  • Step 7: Now add your impact figures - up to four of them - click the + icon to add more, or click on the ^ to move an item up the list. Choose impact figures OR...
    Add quote, source and image credit for "Quote Pics" Add quote, source and image credit for Quote Pics
  • Step 8: Now add the sources used for your image and also for your data/stats. Add datapic sources
  • Step 9: Your Datapic should now look something like this: View Datapic example
  • As the image is responsive, you have the option to align image to top or to bottom. You can drag the panel to see how your image is being resized in different screen sizes to aid your decision.
  • Step 10: Click the Save icon at the top-left of the menu. Note that 'File->Save' is available from the the menu as well. After saving, close the window to return to iSite. Save Datapic and exit
  • Step 11: Now, in iSite, click 'Save' and 'Preview'. If you are happy, click 'Publish': Preview your Datapic

    Then view the Datapic on PC and also mobile, to make sure it looks OK.

  • Step 12: If you need to edit your Datapic and make more changes, double-click the 'edit' link in the builder: Edit existing Datapic
  • Step 13: To generate an image of your DataPic, click 'browse' in the Image Generator box. Save screenshot of DataPic

    Note: If the Image Generator box says 'edit' instead of 'browse', you will need to double click it to open the Image Generator pop-up.

  • Step 14: Choose the size you need (624 for standard CPS stories) and download. If this isn’t working, it’s because you haven’t published your project. Download your png image file

You can now use this image in your content on CPS, Vivo or social media. The name of image file will end "-nc.png". This is important "-nc" means no compression: it ensures that the image remains crisp! Please do not add anything after the -nc (eg -nc2.png or -nc2thisisthefinalversion.png). When adding the PNG image in CPS, make sure you click the Cancel button if the image editor pops up.

Includes

If you still want to add this content as an include on your story please add text to the top of the page that says something like: “If you can’t see any of the images/charts below, please go to [hyperlink to the url of the CPS story you are publishing]”.

This will enable people who get to the story through the Google AMP url to go to the bbc.co.uk story where includes will work.

  • Include Step 1: Copy the include path that you require - either News (including World Service), Sport or Newsbeat: Copy Datapic include path
  • Include Step 2: Now open your article in CPS. To add IDT content, you'll need to add an 'include' to your article. To do this, click 'New Story Component->Include File' (top of the page): Add an include to your CPS page

    Now paste the include path from Step 14 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 datapic will appear in your work:

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

Using Datapics

Datapics are a versatile and nicely formatted way of presenting quotes, statistics and data in an appealing and readable way. Datapics and Quotepics can be used to add emphasis or to draw attention to important data or statistics related to your story, by combining images of key subject matter with the relevant quotes, headlines, stats and information.

Does your story include interesting figures, quotes, data or statistics? Then create a Datapic or a Quotepic to bring them to life and add some style to your stats!

Some example datapics are listed below.

StatPic Example

Important statistics can be shown under a main headline, as below: Simple StatPic Example

StatPic Example with 2 headline figures

You can create up to two super impact figures (in green), as below: StatPic Example

QuotePic Example

To give a quote more importance or visibility, you can create a quotepic: QuotePic Example