News

‘Tuinen De Korenbloem’, a small website using Perch CMS

posted by Veerle Pieters
20 December 2014

A little while ago we designed, coded and implemented a web site for one of our clients 'Tuinen De Korenbloem'. For this small web site project we were on the lookout for a lightweight CMS so the client would be able to manage some of its content. Perch seemed to be the perfect fit. Since there wasn't much of a learning curve, and the things we needed for this web site were pretty straightforward, we decided to give it a try. Today I'll share you some of the basics of Perch.

Tuinen De Korenbloem - homepage design

The image below shows you how I set up the structure of the site, putting each section in a separate folder to create clean URLs. As you can see, I'm using my favorite coding app, Espresso. The site is also adaptive to tablet and mobile (with Retina in mind, except for the photos due to budget restraints). In this article I'll focus only on how I used Perch, but I might also do a write up about the design and front-end coding.

The Espresso project window of the web site of Tuinen De Korenbloem

Why Perch

For a designer it's never obvious to get your head around coding, because our brain is just wired differently. Up to a certain point I'm OK in this area, and I love the switch my brain has to make. Working with Perch was just on that level where things don't get all too technical. As long as there were enough examples to learn from, on how to get started and how to implement things I felt pretty confident I would pull this off without much headache.

For me it was a matter of finding a simple solution, meaning a light weight CMS that would allow me or my client to quickly update the content of the site, instead of dealing with static HTML web pages. Perch seems to be all that. Since I also personally know the people who build the application, I also knew the CMS of my project would be in good hands, and I would get some help in case I need it. Luckily I didn't actually need much extra help, which I believe says everything about how this tool works.

Perch basics

Perch works with regions. You transform the parts you want to be dynamic, in other words, you want to be able to update, into regions. Once you've created the region, you log into the admin, select a template and get started. The templates can use any mark-up that you like. You can even edit xml, json or other text files using Perch. What is also nice about Perch is that you have full control over your HTML mark-up. You can code your entire site first as static HTML web pages then drop Perch in at the end of the process. That's how I created this site for 'Tuinen De Korenbloem'.

Using Layouts

In Perch you can use layouts, which is a flexible way of handling repeating segments on a site, such as headers and footers. So the first first thing I did was splitting up all pages into 3 segments:

  • the header segment
  • the content
  • the footer segment

In the layouts folder, which is stored into the templates folder in Perch I have 2 files stored which contains the mark-up for the header segment, and the footer segment of all pages of the site.

The header segment

The header mark-up

The mark-up for the entire header segment is replaced on all pages by this mark-up where the title and class are variables and so are different on each page:


<?php include('perch/runtime.php'); ?<
<?php perch_layout('global.header', array(
	'title'=>'Welcome',
	'class'=>'home',
)); ?>
Global header mark-up

The mark-up replaces the opening html tag, the head, title, and part of the body element up until the mark-up is starting to be really different on all pages, which is basically where the actual content of the page starts. So the top navigation is also included into this mark-up.

The navigation's active state works with a class in the body element. In the body element of this 'global.header.php' template file I'm using dynamic mark-up for this:

<body class="<?php perch_layout_var('class'); ?>">

The title element for each page is also different. So here I've added this mark-up in:

<title><?php perch_layout_var('title'); ?> - Tuinen De Korenbloem</title>

So as you can see, the mark-up that varies on all pages such as the body class attribute, and the title element are both replaced using variables.

The footer segment

The footer mark-up

The mark-up for the entire footer segment is replaced on all pages by this mark-up:

<?php perch_layout('global.footer'); ?>
Global footer mark-up

The footer segment includes the copyright info and the navigation links that re-occur on all pages. So the file 'global.footer.php' contains this HTML markup:

<div class="bottom-container">	
 <footer>
   <small>© Copyright 2014 De Korenbloem</small>
      <nav role="navigation">
         <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/over-ons">Over ons</a></li>
            <li><a href="/tuinaanleg">Tuinaanleg</a></li>
            <li><a href="/projecten">Projecten</a></li>
            <li><a href="/onderhoud">Onderhoud</a></li>
            <li><a href="/contact">Contact</a></li>
            <li><a href="/disclaimer">Disclaimer</a></li>
         </ul>
      </nav>
   </footer>	
</div>

Working with Perch layouts helps to keep things flexible. In case anything needs to be updated in these segments, I only need to do the update in 1 file and things will be updated on all pages where this global element has been applied.

Using Templates and Regions

The content is different on each page, so here I have different mark-up for each page. Parts of the page that need to be dynamic are replaced by a so called Perch regions, which are then replaced by templates in the admin. For instance on the homepage I've replaced the two content blocks with the meer ('more' in English) button. I'm using these 2 lines of mark-up:

<?php perch_content('Intro'); ?>
<?php perch_content('In de kijker'); ?>

The first line is to replace the first column and the second line for the second column. I give them both a meaningful name, because that is the name that will appear in the admin.

Perch admin - Pages overview

When you first load a page in your browser, Perch will pick up any new regions you've added and display them in the control panel. Then when you click on a new region, you’re asked to pick a template. For the item 'In de kijker' I placed this mark-up in a separate HTML file:

<div class="one unit">	
 <section>
   <h3><perch:content id="Indekijkertitel" type="text" label="Titel" required="true" title="true" /></h3>
   <perch:content id="Indekijkertekst" type="textarea" label="Tekst" textile="true" editor="markitup" />
   <a href="<perch:content id="Indekijkerlink" type="text" label="Link naar meer info" required="true" title="true" />" class="bttn-arrow">meer</a>
   </section>
</div>

<div class="one unit">		
   <section class="photo">	
      <figure>
      <a href="<perch:content id="Indekijkerlink" type="text" label="Link naar meer info" required="true" title="true" />">
      <img src="<perch:content id="Indekijkerfoto" type="image" label="Foto" />" alt="<perch:content id="Indekijkertitel" type="text" />" /></a>
         <figcaption><a href="<perch:content id="Indekijkerlink" type="text" label="Link naar meer info" required="true" title="true" />">
         <perch:content id="Indekijkercaption" type="text" label="Ondertitel" /></a></figcaption>
      </figure>
   </section>
</div>

This piece of mark-up is saved as an HTML file in the contents folder which is located into Perch's templates folder. Then when viewed in Perch admin, you'll get to see this form to manage the content of the 'In de Kijker' (region) item:

Perch admin - In de Kijker region item

To set things up I was able to find all basic info via Perch's documentation and also via the online video tutorials.

Perch's Apps

For the homepage slider I used Perch's Gallery app. Same for the projects page and this page. Then for the contact form I used Perch's Form app.

Perch's Gallery App admin view - overview of gallery albums

I'm using the gallery app for all the project and reference photos on the site. The image above shows some of the photo gallery albums.

Perch's Gallery App admin view - updating a gallery album

When you click such gallery album, for instance the homepage animation slider (see the image above), you get to see the photos in thumbnail, and you'll be able to remove, change the order of appearance of the photos, or upload/add new photos to the album.

Perch's Gallery App admin view - uploading images in a gallery album

When uploading/adding images, it's a matter of dragging and dropping them into this window (see image above) and click the upload button, to upload them all in one batch.

Conclusion

I know I'm only showing and explaining a tiny piece of what I needed to do for this project, but I think you get some idea on how easy and straightforward it is to set things up. Perch is an ideal CMS for lightweight sites, that need a lightweight CMS. It's definitely a CMS I'll keep in mind for future small projects. I definitely can highly recommend it and it also comes with good support.

Comments

There are no comments on this article.