Skip to main content

Pulling content from one page to another

CleanSlate Theme Development Tutorial Series
Video #17 - Profile templates & pulling content across pages

In CleanSlate, it’s possible to have content live on one page of your site and pull that content to other parts of your site.

A common use case for this are Blog Index and Profile Index templates. On a Profile Index template, you are going to have a person’s name, profile photo and a link to their full biography.

It would be a pain to copy that content into a different place on your site if it already exists elsewhere. Luckily, we can programmatically pull this content from one page to another.

For this example, let’s build the following profile templates: profile_individual.html and profile_index.html.

First, profile_individual.html.

In our Profile Individual template, we need the following editable regions for each person’s page:

  • Name
  • Profile Photo
  • Job Title
  • Phone Number
  • Email
  • Biography excerpt (for the profile index)
  • Full Biography

Let’s see what that looks like in code. Here’s a profile_individual.html template:

---
layout: default
---
<div class="wvu-container">
<div id="maincontent" class="main">
<h1 class="wvu-profile__name">
<r:editable_region name="wvu-profile__name" type="simple">
<r:page:name/>
</r:editable_region>
</h1>
<div class="wvu-profile__meta-info">
<h2 class="wvu-profile__job-title wvu-h5">
<r:editable_region name="wvu-profile__job-title" type="simple">
Enter the person's job title or whatever subhead should go under their name.
</r:editable_region>
</h2>
</div> <!-- /.wvu-profile__meta-info -->
<p>
<r:editable_region name="wvu-profile__short-description" type="simple">
Enter a brief description of the person. This will be pulled into the profile index page(s). Only enter a sentence or two in this region.
</r:editable_region>
</p>
<r:editable_region name="main">
<p>Enter the extended description here.</p>
</r:editable_region>
</div><!-- /.main -->
<aside class="wvu-sidebar">
<div class="wvu-profile__photo">
<r:editable_region name="wvu-profile__photo">
Add a profile photo.
</r:editable_region>
</div> <!-- /.wvu-profile__photo -->
<div class="wvu-profile__meta-info">
<p>
<r:editable_region name="wvu-profile__phone" type="simple">
Enter the person's phone number.
</r:editable_region>
</p>
<p>
<r:editable_region name="wvu-profile__email">
Enter the person's email address and link it via "Standard Links" option in the Insert Link modal.
</r:editable_region>
</p>
</div> <!-- /.wvu-profile__meta-info -->
</aside>
</div> <!-- /.wvu-container -->

Understanding how to pull content from one page to another

In CleanSlate, if content lives on a page in an editable region, you can target that page to pull content from that page’s editable regions. This is achieved by using a loop and one or two of the following tags:

  • r:children:each
  • r:articles:each
  • r:descendants:each
  • r:get_page

Using r:children:each means you will be looping through a series of child pages in your sitemap. For example, imagine we have pages with the following structure:

  • Faculty
    • Sarah Jane
    • Jeff Murphy
    • Rodrigo Smith
  • Staff
    • Wesley Kee
    • Zoe Gillipspe
    • Sally Mejia

If we wanted to use r:children:each, we’d assign the “Faculty” and “Staff” pages the profile_index.html template. That template would output the three people under each page, respectively. Here’s how that might look:

---
layout: default
---
<r:children:each>
<h2> <!-- Outputs each person's name: -->
<a href="<r:page:url />">
<r:page:content name="wvu-profile__name" />
</a>
</h2>
<!-- Probably pull more info here -->
</r:children:each>

r:page:content does all the heavy lifting

When pulling content from one page to another, r:page:content (and r:article:content, for that matter) do all the heavy lifting:

<r:page:content name="wvu-profile__name" />

This tag is searching the page for an editable region with the name wvu-profile__name and pulling all of the content from within that editable region, then outputting it on our template.

One thing to note: r:page:content and r:article:content are functionally identical; however, r:article:content must be used on a blog. Also, both must be used within a loop. In other words, you will use these tags within one of the following tags:

  • r:children:each
  • r:articles:each
  • r:descendants:each
  • r:get_page

Putting together our profile_index.html template

Now that we’ve talked about r:page:content, let’s look at what a profile index template would look like:

---
layout: default
---
<div class="wvu-container">
<div id="maincontent" class="main">
<h1><r:page:name /></h1>
<ul class="wvu-profile">
<r:children:each>
<li class="wvu-profile__individual">
<div class="wvu-profile__individual-photo">
<a href="<r:page:url />">
<r:page:content name="wvu-profile__photo" />
</a>
</div> <!-- /.wvu-profile__individual-photo -->
<div class="wvu-profile__individual-info">
<h2><a id="aria__profile--<r:page:id />" href="<r:page:url />"><r:page:content name="wvu-profile__name" /></a></h2>
<h3><r:page:content name="wvu-profile__job-title" /></h3>
<p><a href="tel:<r:page:content name="wvu-profile__phone" />"><r:page:content name="wvu-profile__phone" /></a></p>
<p><r:page:content name="wvu-profile__email" /></p>
<p><r:page:content name="wvu-profile__short-description" /></p>
<p><a aria-labelledby="aria__profile--<r:page:id />" class="button" href="<r:page:url />">Read Full Bio</a></p>
</div> <!-- /.wvu-profile__individual-info -->
</li> <!-- /.wvu-profile__individual -->
</r:children:each>
</ul>
</div> <!-- /.main -->
</div> <!-- /.wvu-container -->

As you can see, this template pulls content from the following editable regions of each child page:

  • Profile Photo
  • Name
  • Job Title
  • Phone Number
  • Email Address
  • Short Description / Biography

To see how this might look, check out the profile templates in the Brand Patterns theme and the example pattern on its website.

NOTE: This technique works with content on the same site. You cannot use r:page:content to pull content from one site into another site. If you're looking to share profiles across sites, you should look into using XSLT, the web_request tag, or create a JSON API in the host site and consume that API with JavaScript on the source site. Contact CleanSlate@mail.wvu.edu for more information.

NOTE 2: Don’t want to pull all the content from an editable region? Limit what is pulled with the r:select_html tag.

NOTE 3: 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).

Last updated on August 2, 2021.

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.