Formatting standards

• Editorial staff of ODI and partner organizations

• A set of configuration details for publishing original research in WordPress to maintain a consistent presentation across pages. This will be frequently updated as the platform is upgraded and new standards developed.

* Landing pages should between 500-1000 words, with a minimum of one infographic/chart and at least one image.

* Topic pages should be 1000-2000 words in length, with a minimum of two infographics/charts (with the exception of policy and regulation pages) and at least one image.

* Both topic and landing pages should contain subheadings in “Heading 3” for consistency. These will appear in the “On this page” widget in the right sidebar as an content index for the page. Further instruction on how to add these styles can be found on the Adding Content to Topic Pages guide.

* References should be added using the “References” button available in the topic page editor. References using different styling should be updated to this method. Detail is available at Adding Content to Topic Pages guide.

* Topic and landing pages should start with an introductory paragraph and then an illustrative chart, infographic or image if possible.

* All topic and landing pages should have “Related resources” associated with the page. These are relevant library items or datasets stored in CKAN that will appear in the right sidebar and encourage the user to research further and explore the ODI data hub. These can be added by searching in the “Add related CKAN content” sidebar in the editor for topic pages.

* Infographics and charts should have a title on the page in Heading 5. This ensures consistency of presentation. If updating pages created earlier, titles may need to be removed from charts/infographics in the tool they were created with, in order to avoid a duplicated title.

• Landing pages and topic areas should be created from WordPress posts of type “Topics”.

• Comments should be disabled

• Categories selected for the page should reflect the content as it relates to the OD taxonomy, one per page. For example “Energy” should only have the “Energy” category selected, and “Hydropower dams” should only have “Hydropower dam” selected.

• Subheadings should be formatted in “Heading 3” – accessible from the second tier formatting bar, thir dropdown from the right in “Visual” mode. If using the “text” view, you can add these with H3 tags, e.g. <h3>Subtitle</h3>. All levels of HTML heading tags (H1-5) will cause the subtitles to appear in the Table of Contents/On this page sidebar that appears in the top left of the published page.

• In-text references should be numbered and formatted using the star-shaped “References” button, accessible on the top-tier toolbar in “Visual” mode, next to the “feature box” button.

• References should be entered in Chicago style.

• Images should be usable under a Creative Commons or other appropriate open licensing (see licensing)

• Upload image in largest possible size to WordPress via the “Add media” button in the editor

• When choosing display options, choose “large” size and center alignment

• Add a caption to the image which includes photographer, source, date, and licensing information. E.g. “Tonle Sab Lake, Cambodia. Photo by Asian Development Bank, take on 13 November 2009. Licensed under Attribution-NonCommercial-NoDerivs 2.0”

• For optimal attribution for image referencing and caption, the 'photographs' and the type of 'license' should be hyperlinked to the sources of image file and the type of licensing on Creative Commons website.

Text in the caption section would look:

<p>Tonle Sab Lake, Cambodia. <a href=“https://www.flickr.com/photos/asiandevelopmentbank/11431228924” target=“_blank”>Photo</a> by Asian Development Bank, take on 13 November 2009. Licensed under <a href=“https://creativecommons.org/licenses/by-nc-nd/2.0/” target=“_blank”>Attribution-NonCommercial-NoDerivs 2.0</a></p>

• Once image is embedded, switch from “Visual” to “Text” view in the editor. Scroll down through the page text and HTML code on the page until you find the code for the image. This should correspond to where the image appears vertically on the page – many will be the first element. Edit the width and height properties inside the image tag to be “100%”. This will allow the image to resize to different screen sizes correctly. E.g. “<img class=“wp-image-67040” src=“http://opendevelopmentmekong.net/wp-content/uploads/2015/02/Hydro1.jpg” alt=”“ width=“100%“ height=“100%“ />”

• When adding other embedded elements to the page, such as a Tableau Public visualization or embedded map, always paste the embed code in the “Text” editor, not “Visual”.

• Adjust any “width” properties inside the embed code as above with embedded images, but leave “height” properties as static pixel values.

• Depending on the tool used to create the chart/infographic, changes to the chart's dimensions may need to be made in that tool for it to display correctly. For example, in Tableau Public, widths of charts need to be set to 750px to display full width, and then the adjustments described above (width=“100%”) made in the HTML code to ensure responsiveness.

Many people look at visualizations without carefully reading all the text first, therefore we should design visualizations that are self-explanatory. Specifically, these elements should be part of the viusualization itself and not just in accompanying text. Below is a checklist of the components that these need to be of greatest use to site visitors.

• Clear explanatory title
• Clear labelling of data display elements (eg x axis, y axis, etc)
• Clear labelling of units (eg hectares, US$ etc) where numbers are given
• Date
• Source
• Link to metadata/raw data on CKAN where relevant
• Instructions (eg 'zoom in for most accurate viewing')
• Legend where necessary