Structure and Style

“Is there a colour picker option? When apartments are marked as leased the text needs to be red and when marked as available be grey. If no color picker – will it allow the selection of the established CSS style for grey or red?”

When people new to Perch test out the demo we sometimes get questions like this. If you have worked with very inflexible systems in the past it is a reasonable question. A system that gives you a big textarea, and expects content editors to make decisions about style, would need a colour picker to achieve this requirement. Perch however is all about structured content. To achieve a requirement like this you start with the data you need to collect.

What is the requirement?

The requirement is that we show visually whether an apartment is leased or available.

How do we do this in Perch?

We can create a template for an apartment. This would contain fields for different aspects of apartments – and could be as complicated as you like. We’ll assume something simple though and just add a name, description, number of bedrooms and a checkbox to say if the apartment is available.

The template looks like this.

<div class="apartment">
  <h3 class="<perch:if id="leased" value="yes">leased<perch:else/>available</perch:if>"><perch:content id="apartmentname" type="text" label="Name" required="true" title="true" /> <span>- <perch:if id="leased" value="yes">leased<perch:else/>available</perch:if></span></h3>
  <p>No. of rooms: <perch:content id="rooms" type="text" label="No. of bedrooms" required="true" size="s" /></p>
  <div class="description">
    <perch:content id="description" type="textarea" label="Description" markdown="true" editor="markitup" required="true" />
  </div>
</div>
<perch:content id="leased" type="checkbox" label="Apt. is leased" value="yes" suppress="true" />

In the Perch Admin the client can add new apartments or update existing ones and flag them as available or not.

The perch:if tags use the value of the checkbox to add a class to the h3 element which we can use to change the colour.

<h3 class="<perch:if id="leased" value="yes">leased<perch:else/>available</perch:if>">

However, just showing status by colour is not recommended because some people have colour deficiency in their vision or could be using assistive technology such as a screen reader. As we have our data separately we could add some text too.

<span>- <perch:if id="leased" value="yes">leased<perch:else/>available</perch:if></span>

We can now use this data in different ways. We could use the flag to only show available apartments in the list with perch_content_custom.

<?php perch_content_custom('Apartments', array(
  'filter'=>'leased',
  'match'=>'neq',
  'value'=>'yes'
)); ?>

We could use the number of rooms value in the same way, for example if you wanted to show a page with only apartments that had 2 bedrooms.

<?php perch_content_custom('Apartments', array(
  'filter'=>'rooms',
  'match'=>'eq',
  'value'=>'2'
)); ?>

Capturing content not “building a website”

Years of being stuck with content management systems that put content editors in front of big textareas with WYSIWYG editors have left many people seeing content as being this big styled block. However modern sites need a more sophisticated approach in order that we can create and re-use content in a structured way. Perch makes this easy.

Whenever you think that you need to allow your client to “add a style” or “change a colour” take a step back. Do you actually need them to declare the status of something which you can then style appropriately? Or, should this content be captured separately in order that you can use it to search or filter in the future?

It’s so often not about style. It’s about content. You can then take that content and create beautiful and usable websites with it, highlighting the meaning within your design.