Using the perch:repeater tag to keep your markup under your control

The quickest way for a design to start looking untidy is if content editors start to get creative with the markup. Even if your Editors are using Textile or Markdown and don’t have access to the HTML, if you are asking them to remember to mark up lists or create links correctly it is quite likely that things will start to drift.

We added Repeaters to Perch to solve one area where editors were having to use some mark-up – repeated elements within Multiple Item Regions. Here is a quick example of how I used Repeaters on my own website to remove the need to format my text in a text area .

I have a sidebar section on each of the pages of my site that deals with a specific presentation – you can see an example here. This displays each event block using a Perch Multiple Item Region. Here is the Perch Template for that Region.

<perch:before>
<aside class="meta speaking-sidebar">
<h2>Presented at:</h2>
<ul class="event-listing">
</perch:before>

<li class="module event">
     <h3><a href="<perch:content type="text" id="conferencelink" 
required="true" label="Conference Link" />">
     <perch:content type="text" id="conference" title="true" 
required="true" label="Conference" /></a>,
     <perch:content type="text" id="location" required="true" 
label="location" />,
     <perch:content type="text" id="year" required="true" 
label="year" /></h3>
     <p class="title"><perch:content type="text" id="title" 
required="true" label="title" /></p>
     <perch:content id="text" type="textarea" label="Text" 
textile="true" editor="markitup" />
</li>
<perch:after>
</ul>
</aside>
</perch:after>

The textarea field Text contains a short description of the talk given at that event and then below a list of links to slides and so on. I would use Textile to make these a list and link the URLs, however that does require me to remember that is how I deal with these items – and in fact to remember to create that content at all.

Repeaters make a repeatable area within a Multiple Item Region possible and are ideal for little bits of content like this. By adding a perch:repeater tag after the text area I can ensure that the links and resources are marked up properly.

<perch:repeater id="links" label="links">
  <perch:before>
  <ul>
  </perch:before>
    <li><a href="<perch:content type="text" id="link" 
required="true" label="Link URL" />"><perch:content type="text" 
id="linktitle" required="true" label="Link Title" /></a></li>
   <perch:after>
   </ul>
 </perch:after>         
</perch:repeater>

This will now allow as many links as I want to be added and the mark-up will be generated accurately from the template. Repeaters are just like a mini template, so you can use perch:before and perch:after tags as you do with a regular Multiple Item Region.