Output data in other formats (JSON, RSS, XML, etc)

In CleanSlate, it's possible to output content from the database in different formats. To do this, you need to follow two basic concepts:

  1. You must have a Radius template to assign to the page in Pages.
  2. You must have an identically named template of the desired output format (RSS, JSON, XML, etc).
    • For example: If you have a blog_index.html template, to create an RSS feed, you must also have a blog_index.rss file.

We do this with RSS feeds for blogs. In the CleanSlate Toolkit, we have a blog_index.html file. Then, in that same directory, we also have a blog_index.rss file. Since people rarely customize their RSS feed, we put the contents of that file in a shared partial .

Output JSON

Let's say you want to create a JSON feed of a directory of people. Here are the steps to do that:

  1. Create the following files in your theme's views folder: profile_index.html, profile_index.json, and profile_individual.html.
  2. Follow the tutorial on Pulling content from one page to another to set up your Profile Index and Profile Individual templates as well as the pages and content in the CMS.
  3. Now that you have your templates and content in the CMS, add the following to your profile_index.json file:
[<r:children:each>
  {
    "id": <r:page:id />,
    "page_published_at": "<r:date_format format='httpdate' value='{page:published_at}' />",
    "page_url": "<r:page:url />",
    "page_name": "<r:page:name />",
    "page_alternate_name": "<r:page:alternate_name />",
    "profile_name": "<r:page:content name='wvu-profile__name' />",
    "profile_job_title": "<r:page:content name='wvu-profile__job-title' />",
    "profile_email": "<r:escape_xml><r:page:content name='wvu-profile__email' /></r:escape_xml>",
    "profile_phone": "<r:page:content name='wvu-profile__phone' />",
    "profile_short_description": "<r:page:content name='wvu-profile__short-description' />",
    "profile_photo": "<r:escape_xml><r:page:content name='wvu-profile__photo' absolute_urls='true' /></r:escape_xml>"
  }<r:next_sibling>,</r:next_sibling>
</r:children:each>]

The code above outputs content from editable regions into the JSON object. Depending on how you structure your profile_individual.html template, you may need to edit the r:page:content name attributes to match your editable region names. You may also add or remove data from this template as you see fit. Including only the data that you need will ensure a performant response on this site and the site that will consume this data.

  1. Now that your profile_index.json file is set up, visit the URL of your profile index page. Eg: example.wvu.edu/directory
    • Be sure this page uses the profile_index.html template.
  2. At the end of that URL, add .json as a suffix. Eg: example.wvu.edu/directory.json
  3. Congrats, you've just made a JSON feed with data that comes from CleanSlate!

What can you do with this?

JSON (or RSS, XML, etc) is commonly used to store and share data. A common use case for it at WVU would be to create a directory on a college website, then share that data with other sites—consuming it on those different domains via JSON. See our documentation about how to Read and use JSON data in a template.

NOTE: CleanSlate sets a default limit to 50 results for loops (r:children:each, r:descendants:each, etc). If you need more than 50 results returned on a single page, increase the limit by adding the limit="55" attribute onto the r:children:each (et all) tag(s). If you have 100+ results, it's smarter and more performant to use a third party tool/API (like Google Sheets, for example) to store the data.

NOTE 2: If you only want to return JSON for people that have a certain label (eg: "Professor" or "Staff"), use the labels attribute. Eg: labels={$labels}. See the Advanced Topics for Blogs video for more information.

In CleanSlate, it's possible to output content from the database in different formats. To do this, you need to follow two basic concepts:

  1. You must have a Liquid template to assign to the page in Pages.
  2. You must have an identically named template of the desired output format (RSS, JSON, XML, etc).
    • For example: If you have a blog_index.html template, to create an RSS feed, you must also have a blog_index.rss file.

We do this with RSS feeds for blogs. In the CleanSlate Toolkit, we have a blog_index.html file. Then, in that same directory, we also have a blog_index.rss file. Since people rarely customize their RSS feed, we put the contents of that file in a shared partial .

Output JSON

Let's say you want to create a JSON feed of a directory of people. Here are the steps to do that:

  1. Create the following files in your theme's views folder: profile_index.html, profile_index.json, and profile_individual.html.
  2. Follow the tutorial on Pulling content from one page to another to set up your Profile Index and Profile Individual templates as well as the pages and content in the CMS.
  3. Now that you have your templates and content in the CMS, add the following to your profile_index.json file:
{% assign children = page.children %}
[
  {% for child in children.all %}
    {
      "id": {{ child.id | to_json }},
      "page_published_at": {{ child.published_at | date: '%FT%T%:z' | to_json }},
      "page_url": {{ child.url | to_json }},
      "page_name": {{ child.name | to_json }},
      "page_alternate_name": {{ child.alternate_name | to_json }},
      "profile_name": {{ child.content['wvu-profile__name'] | to_json }},
      "profile_job_title": {{ child.content['wvu-profile__job-title'] | to_json }},
      "profile_email": {{ child.content['wvu-profile__email'] | to_json }},
      "profile_phone": {{ child.content['wvu-profile__phone'] | to_json }},
      "profile_short_description": {{ child.content['wvu-profile__short-description'] | to_json }},
      "profile_photo": {{ child.content['wvu-profile__photo'] | to_json }}
    }
  {% unless forloop.last %},{% endunless %}
  {% endfor %}
]

The code above outputs content from editable regions into the JSON object. Depending on how you structure your profile_individual.html template, you may need to edit the r:page:content name attributes to match your editable region names. You may also add or remove data from this template as you see fit. Including only the data that you need will ensure a performant response on this site and the site that will consume this data.

  1. Now that your profile_index.json file is set up, visit the URL of your profile index page. Eg: example.wvu.edu/directory
    • Be sure this page uses the profile_index.html template.
  2. At the end of that URL, add .json as a suffix. Eg: example.wvu.edu/directory.json
  3. Congrats, you've just made a JSON feed with data that comes from CleanSlate!

What can you do with this?

JSON (or RSS, XML, etc) is commonly used to store and share data. A common use case for it at WVU would be to create a directory on a college website, then share that data with other sites—consuming it on those different domains via JSON. See our documentation about how to Read and use JSON data in a template.

NOTE: CleanSlate sets a default limit to 50 results for loops (page.children, page.descendants, etc). If you need more than 50 results returned on a single page, increase the limit by adding the filter_pages: limit: 55 attribute onto the page.children (et all) tag(s). If you have 100+ results, it's smarter and more performant to use a third party tool/API (like Google Sheets, for example) to store the data.

NOTE 2: If you only want to return JSON for people that have a certain label (eg: "Professor" or "Staff"), use the filter_pages drop. Eg: | filter_pages: tags: params.tags. See the Advanced Topics for Blogs video for more information.

Last updated on November 10, 2022.

We welcome all questions, feedback and bug reports. If you're having an issue, we usually need the following information:

  • A brief description of the issue
  • A link to the page where you saw the issue
  • Screenshots that illustrate the problem - How do I take a screenshot?

Kindly email CleanSlate@mail.wvu.edu for help or use the form on the request help page.