Dynamic infographics & snippets

Creating a dynamic infographic

What's inside this article:


Basic information

User groups: Contributor_2020, Journalist_2020, Editor_2020, Master Editor_2020
About user groups

This article explains how to create a new dynamic infographic in Pangea CMS and then request approval from a reviewer.

For general information about this content type, see the following article:

Roles

The process for creating a new dynamic infographic normally involves two people:

  • Journalist: Completes the editorial settings in Pangea CMS (such as the title and introduction) and prepares the infographic for publishing.
  • Reviewer: Reviews the custom code in Pangea CMS and approves it for publishing. The reviewer may be the same person who writes the code (the coder).

This article is for journalists and assumes you already have the code to paste into Pangea CMS. For other scenarios, see the following articles:

NOTE: Pangea CMS automatically recognizes and approves Datawrapper code. For details, see our Sharing visuals created in Datawrapper article.



Create a new dynamic infographic

Go to Create > Interactive > Dynamic infographic in Pangea CMS.

A dialog opens, which guides you through the required settings one step at a time. Complete the required settings and then save your new infographic:


Select a layout

Under Layout, select a layout.

To select the right layout for a dynamic infographic, you need to understand what is in the code. If you are not sure which layout to select, ask an expert coder in your organization.

Five layouts are available:

  • Blank with analytics (default)
  • Flexible page
  • Standard page
  • Article page
  • Empty canvas (advanced)

For detailed information about the differences between these layouts, see the following article:

After selecting a layout, click Next.


Add the title

Under Title, add the main title for the dynamic infographic.

Unless you add more titles later, the main title appears:

  • In the browser tab
  • On search engine results pages
  • In teaser cards on your website
  • In teaser cards on social media

If the Article page layout is selected, the title also appears on the infographic content page. For information about layouts, see the following article:

After adding the title, click Next.

NOTE: You can add more titles for different contexts. For example, add a title that only appears on social media. For details, see Creating an article.


Paste the code

Under Code, paste your code.

In most cases, keep Isolate in iFrame when embedded ticked. Only untick this setting in specific cases, and only with agreement from an expert coder.

Isolate in iFrame when embedded affects how the code behaves when the dynamic infographic is embedded on other pages (for example, on article pages). It does not affect the standalone infographic content page.

Untick this option if you want the infographic to match the styling of the page where it is embedded, and that styling is not already set in the code for the infographic.

This setting works as follows:

  • When ticked: The infographic code is wrapped in an iFrame. This prevents the infographic code from affecting the page where it is embedded, and also prevents the page code from affecting the infographic.
  • When unticked: The infographic code is not wrapped in an iFrame. This allows the infographic to use the same CSS styles (such as fonts) that are on the page where it is embedded.


Save the infographic

After pasting the code, click Save.

After you click Save, Pangea CMS checks for the following:

  • Datawrapper code: If the code comes from Datawrapper, Pangea CMS automatically approves it.
  • Forbidden code: If Pangea CMS detects forbidden code, the code is flagged and you cannot save the infographic.

For detailed information about auto-approval for Datawrapper code, see the following article:

Some code is forbidden for security reasons and to prevent usability issues on the website.

If Pangea CMS detects forbidden code, contact an expert coder in your organization to resolve the issue.

For a list of all forbidden code, see the following article:

If Pangea CMS does not detect any issues, it saves the infographic. The dialog closes and the edit page for the infographic opens. The infographic has the Draft status.



Check the preview

On the edit page, you can immediately check how the published dynamic infographic page will look with the current code and layout.

Click Preview in the left menu. You can preview the infographic on the following devices:

  • Desktop
  • Tablet
  • Mobile



Complete key settings

Complete the following settings for every dynamic infographic:


Add categories

You cannot publish an infographic until you add at least one Categories organize the content on your website by topic. For example, your website might have a 'Politics' category for all political content. Categories help visitors to navigate your website and browse content by topic. Learn more..

Add one or more categories via General > Categories.

For detailed information, see the following article:


Add an introduction

Add the main introduction via General > Introduction.

Unless you add more introductions later, the main introduction appears:

  • On search engine results pages
  • In teaser cards on your website
  • In teaser cards on social media

If the Article page layout is selected and Display introduction is ticked, the introduction also appears on the infographic content page. For information about layouts, see the following article:

NOTE: You can add more introductions for different contexts. For example, add an introduction that only appears on social media. For details, see Creating an article.


Add a URL slug

A URL slug is a piece of human-readable text, separated by hyphens. It appears in the URL for the infographic content page. A clear and concise URL slug helps to improve usability by telling users where they will go after clicking a link.

Add a URL slug via General > URL slug.

For detailed information, see the following article:


Add a horizontal teaser image

A horizontal teaser image appears in the teaser for the infographic on your website and on social media. If you do not add one, the default website image appears instead.

If the image you want to use has not been uploaded to Pangea CMS, upload it first. For instructions, see the following article:

Find and select a teaser image via Website teaser > Horizontal image.

For instructions on how to use image search, see the following article:



Review special settings for dynamic infographics

You can complete the following settings that are only available for dynamic infographics:


Add text for internal search indexing

You can add text via General > Text for internal search indexing. Your website search indexes this text.

NOTE: The text does not affect indexing on external search engines, such as Google.

Your website search cannot index text that is part of the code. If you want the visible text from your code to be indexed, paste a copy of it under Text for internal search indexing.


Select a widget icon

You can select a widget icon via Website teaser > Widget icon. The icon appears on A content widget is a widget for sharing any type of content page. Each content widget can include one or multiple teasers, each linking to a different page. This widget offers a variety of layout options. Learn more. and tells visitors what type of content to expect on the page.

The following options are available:

  • (A): No icon (selected by default): The widget does not show an icon. Use this option for text-based infographics.
  • (B): Infographic icon: Use this option for interactive maps and charts.
  • (C): Quiz icon: Use this option for interactive quizzes.



Review other settings

To access other settings, select your preferred option in the left menu:

  • Website teaser: Control how the teaser for the infographic looks on your website.
  • Social media: Control how the teaser for the infographic looks on social media.
  • Authors, contributors: Assign authors who contributed to the content. Author names appear on the infographic page if the Article page layout is selected.
  • Tags: Assign tags to organize content internally in Pangea CMS.
  • Miscellaneous: Add internal notes that are visible only in Pangea CMS.

For detailed information, see the following articles:



Request approval

A reviewer must approve the dynamic infographic before publication.

Two options are available:


Request approval for immediate publication

When you follow these steps, the infographic is immediately published after a reviewer approves it. You do not need to return to the edit page and manually publish it.

To request approval with immediate publication:

  1. Select Published in the selector.
  2. Select Request approval.

The edit page closes. Your infographic now shows two statuses on the Search list (a publication status and an approval status):

  • Waiting: The infographic is not yet published. It is immediately published after a reviewer approves it.
  • Pending approval: The infographic is waiting for review.


Request approval in draft

When you follow these steps, the infographic keeps the Draft status after a reviewer approves it. You can then return to the edit page and manually publish it at the right moment.

To request approval in draft:

  1. Keep Draft selected in the selector.
  2. Select Request approval.

The edit page closes. Your infographic now shows two statuses on the Search list (a publication status and an approval status):

  • Draft: The infographic is not yet published.
  • Pending approval: The infographic is waiting for review.

After a reviewer approves the infographic, manually publish it. For instructions, see the following article:

Pangea CMS can notify you every time a dynamic infographic that you created is approved. For instructions, see the following article: