Content and Storytelling Tools

DKAN uses Panels to allow site editors to create customized layouts and manage content through a drag and drop interface. For more on how to use the editing tools view the IPE section.

Content Types

Page

Use the Page content type for basic informational content that describes the purpose of your website. Examples would include the front page, an about page, an FAQ page, etc.

Create a page

  1. From the administration menu, navigate to Content > Add Content > Page.
  2. Fill in the title and body fields.
  3. Choose the desired layout.
  4. Click Save.
  5. Now add additional content by clicking the + buttons in the regions where you want the new content to display. Learn more about the In-Place Editor (IPE) here.
  6. Click Save at the bottom of the page.

Data Stories

Use the Data Story content type for narrative content. Narrative content is designed to tell a story and show the impact data has on the everyday lives of citizens. By adding context and synthesis, you can bring out the personal elements of data, and help highlight the investment and value of open data that might not otherwise be apparent.

Create a data story

  1. From the administration menu, navigate to Content > Add Content > Data Story.
  2. Fill in the title, add a cover photo, add tags, topics, and a description.
  3. Choose the desired layout.
  4. Click Save.
  5. Now add additional content by clicking the + buttons in the regions where you want the new content to display. Learn more about the In-Place Editor (IPE) here.
  6. Click Save at the bottom of the page.

Data Dashboard

Mix videos, images, slide shows, visualizations, text, tables, and maps to most effectively deliver your content. With more than 20 responsive layouts to choose from and the easy to use drag and drop interface, any user can create compelling data-powered content within minutes.

Create a data dashboard

  1. From the administration menu, navigate to Content > Add Content > Data Dashboard.
  2. Fill in the data dashboard title.
  3. Choose the desired layout.
  4. Click Save.
  5. Now add content by clicking the + buttons in the regions where you want the new content to display. Learn more about the In-Place Editor (IPE) here.
  6. Click Save at the bottom of the page.

Using the in-place editor (IPE)

The In-Place Editor (IPE) interface at its core it is a drag and drop content manager that lets you visually design a layout and place content within that layout.

DKAN’s customized IPE interface

DKAN has simplified the list of IPE options to show only the most used elements, this makes adding and editing content a faster and less daunting process.

Editing existing panels-based content

  1. Go to a panelized page (in this case the DKAN homepage) and click “Customize this page”:
https://dkan-documentation-files.s3.us-east-2.amazonaws.com/dkan1/customize-this-page.png
  1. Use the drag and drop controls to rearrange a given pane, click and hold the directional arrows button on the top right corner of the panel, drag it below the region name you want it to display in, wait until you see a yellow space light up before you let go :
https://dkan-documentation-files.s3.us-east-2.amazonaws.com/dkan1/drag-n-drop.png

  1. Save changes by clicking the save button at the bottom:

    https://dkan-documentation-files.s3.us-east-2.amazonaws.com/dkan1/ipe-save.png

Adding new panes to Panels-based pages

  1. Go to a page managed by a panel layout and click the Customize this page button at the bottom:

  2. Click the “plus” sign (“+”) to add a new pane to any given panel region.

  3. Select the type of content you would like to add:

    https://dkan-documentation-files.s3.us-east-2.amazonaws.com/dkan1/ipe-list.png

Note

  • If you are adding a chart, use the Visualization pane.
  • If you are adding a video, use the Video pane.
  • If you want to embed an iframe that is not a video or visualization, wrap the iframe with the .iframe-container class to make it responsive on smaller screens.

<p class="iframe-container"><iframe src="..."></iframe></p>

  1. Fill in the form that is presented, click ‘Finish’.
  2. Remember to click ‘Save’ at the bottom when you are done adding content to the page.

Altering the layout of an existing page

  1. Go to the page you want to change the layout for and click Change Layout:

    https://dkan-documentation-files.s3.us-east-2.amazonaws.com/dkan1/change-layout.png

  2. Select new layout:

    https://dkan-documentation-files.s3.us-east-2.amazonaws.com/dkan1/layout-options.png

  3. Choose where existing panes belong in the new layout:

    https://dkan-documentation-files.s3.us-east-2.amazonaws.com/dkan1/arrange-content.png

  4. Click Save (or Save as Custom) and enjoy the new page:

    https://dkan-documentation-files.s3.us-east-2.amazonaws.com/dkan1/ipe-save.png