Pulling content from one page to another

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:

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:

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:

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).

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:

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/drops:

• pages.children
• pages.descendants
• blog.articles
• get_page

Using pages.children means you will be looping through a series of child pages in your site map. 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 pages.children, 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:

profile.content does all the heavy lifting

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

{{ profile.content['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: page.content and article.content are functionally identical; however, article.content must be used on a blog. Also, both must be used within a loop. In other words, most of the time you will use these tags within one of the following tags:

• pages.children
• pages.descendants
• blog.articles
• get_page

Putting together our profile_index.html template

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

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 profile.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 select_html filter:

{{ profile.content['wvu-profile__short-description'] | select_html: css_selector: 'p', limit: 2 }}

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).