Rapid content relationships in Perch Runway

Perch Runway brings the powerful Collections feature to Perch, and a new template tag perch:related. Here’s how I used it to add testimonials to the Perch website.

Perchers say some lovely things about the product, and I wanted to feature these around the site. I started by creating a new Collection in Runway, naming it Testimonials and selecting a template I had created to collect all of the content for a testimonial.

<perch:if exists="image">
  <img src="<perch:content id="image" type="image" height="100" width="100" crop="true" order="5" />" alt="<perch:content id="author" type="text" label="Author" required="true" title="true" order="1" />" class="avatar" />
</perch:if>
<perch:content id="text" type="textarea" label="Testimonial" markdown="true" editor="markitup" order="4" size="s" />
<div class="author">
  <a href="<perch:content id="url" type="text" label="URL" required="true" order="3" />"><perch:content id="author" type="text" label="Author" required="true" title="true" /></a><perch:if exists="company"> - <perch:content id="company" type="text" label="Company" order="2" /></perch:if>
</div>
<perch:categories id="categories" set="marketing" label="Categories" display-as="checkboxes" suppress="true"></perch:categories>

As you can see, the template for a Collection is just a regular Perch Content template. In fact you can re-use templates you also use in page content.

I’ve made the image optional here with Conditional Tags and set title to true on the author field, so this will become the title of the item in the Collection. I’ve also added Categories using the Perch Categories functionality. These aren’t displayed in this template as I’m suppressing them, but I thought it might be useful to categorize testimonials for future use.

I then add my Testimonials to the Collection.

I now have a Collection, containing some testimonials and can add new ones as they come in. These don’t yet show up on a page. It’s just content ready for use. You can list it out onto a page if required – in my case I want to be able to choose a specific testimonial when creating my content.

I have a page that explains the differences between Perch and Runway to people who currently use Perch. It uses a Perch Blocks template, so I can choose between different templates when creating content. Here I add a new Block which has a single tag inside, the perch:related tag. The attribute ‘collection’ is set to ‘testimonials’.

Inside the tag I pass in a template – in this case this is the default template I used to create my Testimonial, but if I only wanted some of the data, or wanted to use different markup I could pass in an alternate template here for display.

<perch:block type="testimonial" label="Testimonial">
  <perch:related id="testimonial" collection="testimonials" label="Select testimonial">
    <perch:template path="content/testimonial.html" />
  </perch:related>
</perch:block>

I can now edit my page and select one of my testimonials using the name of the person giving the testimonial. I don’t need to duplicate content and I can add new testimonials as they are submitted without needing to think where on the site to use them immediately.

You could use this technique for any content you want to create and then use around your site. The perch:related tag can be used in any context including within templates for our official add-ons such as Blog.