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