All in the <head>

– Ponderings & code by Drew McLellan –

– Live from The Internets since 2003 –

About

Five Interesting Ways To Publish with Perch

11 June 2009

Last week saw the launch of the new little content management system I’ve been working on, Perch. One of the things I really like about what we’ve been able to achieve with Perch is the simplicity. We’ve tried to make everything as straightforward as possible and quick to get started with. A side effect of this is that where we do have more powerful features, it can be easy to not realise they’re there.

I’ve put together a few examples in order to show some of my favourite things you do with Perch.

Build custom templates

After creating an editable region on your page, Perch asks you to pick a template (basically a chunk of HTML with markers for where the content goes) to format the region with. We ship with some basic, general purpose templates for single lines of text, text block formatted with Textile, images, files and so on, but the real power comes from being able to make your own to fit your specific site.

Say, for example, that you wanted to have a page listing products. Each product would be made up of a title, a photo, a short description and a link to more information. The repeating HTML block might look like this:

<div class="product">
   <h2>Product name</h2>
   <img src="..." class="photo" alt="Product name" />
   <p>Description...</p>
   <p><a href="/products/product-name" class="more">Read more...</a></p>
</div>

We can take this, make it a template and then use it for a region set to allow multiple items. Creating a template is a case of saving your code fragment as an HTML file in the right folder (Perch’s perch/templates/content folder) and drop in some <perch:content /> tags wherever we want the content to go. We could save this out as product.html with the following HTML.

<div class="product">
   <h2>
      <perch:content id="name" label="Product name" required="true" type="text" />
   </h2>
  <img src="<perch:content id="photo" label="Photo" type="image" />" 
      class="photo" alt="<perch:content id="name" label="Product name" />" />
  <perch:content id="desc" label="Description" required="true" 
      textile="true" type="textarea" />
  <p>
      <a href="<perch:content id="url" label="Link URL" required="true" 
      type="text" />" class="more">Read more...</a>
   </p>
</div>

When Perch reads the template, it creates a form to collect all the content described with the <perch:content /> tags. When the content is published, those tags get replaced out with your content, leaving you nice clean HTML without anything custom in it.

Perch edit form

Share regions across pages

Regions are created by putting a <?php perch_content('Region name'); ?> tag in your page. A region can be shared across all pages, so that whenever you create a region with the same name, it just borrows the content from the shared copy. Updating one updates them all.

Share content

This is clearly useful for pure content (such as the name of your site, or a phone number or something like that), but it also has more powerful uses if you consider that content can also just be a block of HTML. In effect, you can use shared content regions in place of server-side includes. You can use them to manage your site’s header, footer, even navigation. Updating it once instantly updates every page where the region is reused. That makes them really handy.

Turn things on and off with conditional tags

Being able to show and hide content is useful. I built an ecommerce site last year (using our big CMS, rather than Perch) where the client wanted the ability to display a ‘sale’ banner image across the page when they were running a sale in their physical store. We added a setting so that it was easy for the client to toggle this on and off as needed.

This can be done with Perch too – by using the conditional template tags. The conditional tags were added to the templates system to make it easy to leave out bits of markup when optional content is omitted. Here’s an example. Say you have some content that is a heading, but it’s optional. When content is supplied, you need to wrap it in <h2> tags. When the field is left blank, you don’t want a pair of empty <h2></h2> so you use a conditional tag:

<perch:if exists="heading">
   <h2><perch:content id="heading" label="Heading" type="text" /></h2>
</perch:if>

So how does this help us show and hide content? If we add a field that is optional, we can wrap the block in conditional tags and use the value of the optional field to decide whether to show the block or not.

<perch:if exists="show">
   <div class="<perch:content id="show" label="Show on site?" 
      type="select" options="show" allowempty="true" />">
      <img class="promo" src="<perch:content id="banner" label="Promo banner" type="image" />" />
   </div>
</perch:if>

This presents the option to show or hide the banner in the editing form. Of course, this region could then be shared, providing an easy way to show and hide an element across the entire site at once.

Show hide

Use options to switch stylesheets, classes or IDs

In the previous tip we looked at using a select box to provide an option to the user rather than just asking them for free-form text. This can be used in all sorts of ways to manage aspects of your site other than just straightforward page content. Perhaps you might want to have an easy way to switch between stylesheets:

<link rel="stylesheet" href="/css/<perch:content id="stylesheet" label="Theme" type="select" 
   options="summer, fall, winter, spring" allowempty="false" />.css" type="text/css" />

Or to add a class to a container to allow it to be styled differently, perhaps for different categories of news in an article listing. This would allow for certain items to be styled to stand out.

<div class="article <perch:content id="category" label="Highlight" type="select" 
   options="breaking, special-offer" allowempty="true" />">
   ...
</div>

There are tonnes of possibilities not only with formatting content, but in using the regions and template options to manage your site in a more complete way. I think there’s a lot that can be done with what is ostensibly a very simple, lightweight content management system. Read more about Perch or try an online demo.

- Drew McLellan

Comments

  1. § Jamie Knight:

    Hiya,

    Looks very impressive, i like how you are doing the custom data set elements, is there a list anywhere of what is available in those tags and how they are then represented in the admin area. Saying i would like to sort the products on the output side how would i go about doing that?

    Perch is looking more powerful everyday, nice job!

    licks

    Jamie & Lion

  2. § Drew McLellan:

    Hi Jamie (and Lion)

    All the documentation is available online including the template tag options.

    At the moment you can order multiple-item regions by either adding to the top or to the bottom (depending on what you want to do with it) and dynamic reordering is something we’ll be adding in a (free) update soon.

    Drew.

  3. § Brian Steele:

    Thanks Drew, these tips are very useful. At first glance I thought Perch was very simple, but now I’m beginning to realize how elegant and powerful it is. I’m having a lot of fun and look forward to using it for my next project.

  4. § Emily H:

    Ah! So you can add multiple items of same type to one page! ALRIGHT. I asked you at #fowd if this was going to be possible, and I couldn’t remember if you’d said yes or not (I spoke to Jamie about his mini CMS too and thought it might have been his answer I was remembering), and I went through all your documentation, and it didn’t look like you could make repeatable regions. (Is this this in there somewhere that I missed it?)

    I’d recommend you feature this functionality on the Perch features pages – because it opens up a number of potential uses that I had previously ruled out, and might do for others. Now I’m regretting missing your launch period discount, but happy to know I’ll be able to use this on a real client project (as will they, when I tell them!).

  5. § Emily H:

    Okay I found it: Perch Docs – Getting Started Step 3 “decide whether multiple items should be allowed”

  6. § Drew McLellan:

    Hey Emily – it’s also right on the Features page. http://grabaperch.com/features/multi-regions

  7. § Phil Norton:

    This might be a dumb question, but can a WYSIWYG Editor be used with Perch? Would that require a hack to the core files? Bought my license a few weeks ago, and have tried it briefly, and it looks like it could be a very useful wee CMS indeed!

  8. § Drew McLellan:

    Hi Phil – in the next (free) update to Perch we’ll be shipping with a build in markup editor, and have a plugin system for you to drop in a WYSIWYG editor of your own choosing should you wish to.

  9. § Paula Duggan:

    I think you should post this article on grabaperch.com if you have not done so already. I would like to see more examples as this has helped me a lot setting up templates. :-)

    Thanks so much!

  10. § Fred Campbell:

    I’ve used Perch on a few sites now, and am absolutely blown away by its power and simplicity. I love the way it fits in with your code, rather than trying to shoe horn a monster cms system like WordPress.

    But how sophisticated can you get with these conditional elements?

    I have a dance company client. They want to be able to add profiles of their dancers: Name, Photo, Statistics – simple.

    However, each dancer could appear in several categories/pages ie: female, street dancer, samba dancer etc.

    Is this possible?

Photographs

Work With Me

edgeofmyseat.com logo

At edgeofmyseat.com we build custom content management systems, ecommerce solutions and develop web apps.

Follow me

Affiliation

  • Web Standards Project
  • Britpack
  • 24 ways

I made

Perch - a really little cms

About Drew McLellan

Photo of Drew McLellan

Drew McLellan (@drewm) has been hacking on the web since around 1996 following an unfortunate incident with a margarine tub. Since then he’s spread himself between both front- and back-end development projects, and now is Director and Senior Web Developer at edgeofmyseat.com in Maidenhead, UK (GEO: 51.5217, -0.7177). Prior to this, Drew was a Web Developer for Yahoo!, and before that primarily worked as a technical lead within design and branding agencies for clients such as Nissan, Goodyear Dunlop, Siemens/Bosch, Cadburys, ICI Dulux and Virgin.net. Somewhere along the way, Drew managed to get himself embroiled with Dreamweaver and was made an early Macromedia Evangelist for that product. This lead to book deals, public appearances, fame, glory, and his eventual downfall.

Picking himself up again, Drew is now a strong advocate for best practises, and stood as Group Lead for The Web Standards Project 2006-08. He has had articles published by A List Apart, Adobe, and O’Reilly Media’s XML.com, mostly due to mistaken identity. Drew is a proponent of the lower-case semantic web, and is currently expending energies in the direction of the microformats movement, with particular interests in making parsers an off-the-shelf commodity and developing simple UI conventions. He writes here at all in the head and, with a little help from his friends, at 24 ways.