Transcript

We’re now going to create a more complex template that uses several different Perch content tags. The footer of our demo site homepage has an address in it. I want to mark this up properly and use Microformats.

Open index.php in a text editor and select the entire vcard from the footer.

Perch ships with a simple contact template and I’m going to overwrite this template with my own. So open perch/templates/content/contact.html and paste in the copied content.

First I am going to change this so it says Contact ‘Company name’. So I am replacing the word us with a Perch tag:

<perch:content id="org" type="text" label="Company name" 
required="true" title="true" />

Inside the p with a class of fn org we also want the company name, so here is a useful tip. If you repeat an id in a template, Perch won’t show that field twice but will use the content of the first field. So just add:

<perch:content id="org" />

The content completed in the Company Name field will also be entered here.

Inside street-address add a Perch tag, again of text type:

<perch:content id="street1" type="text" label="Address" 
required="true" />

I have made this required, however we may or may not have a second address line in a contact so on the next line, with an id of address 2 I will leave off the required attribute:

<perch:content id="street2" type="text" label="Address" />

This actually leaves us with a problem – we don’t want mark-up displayed at runtime for empty fields. This is where the Perch Conditional perch:if can help us. Wrap the address2 line in perch:if tags.

<perch:if exists="street2"></perch:if>

The value of the exists attribute “street2” is the id of the field we are checking. If the editor does not enter anything in this field, everything inside the perch:if tags will not be displayed.

We can complete the rest of the template in a similar fashion.

<perch:if exists="locality"><p class="locality">
<perch:content id="locality" type="text" label="Town" />
</p></perch:if>
<perch:if exists="postcode"><p class="postal-code">
<perch:content id="postcode" type="text" 
label="Postal code" /></p></perch:if>
<perch:if exists="country"><p class="country-name">
<perch:content id="country" type="text" label="Country" />
</p></perch:if>

When completing the email field – we want the address to both display onthe page and be in the href so that it is clickable, so we do the same thing as with org earlier and just re-use the same id so the editor only has to enter this once.

<perch:if exists="email"><p class="email">
<a href="mailto:<perch:content id="email" type="text" 
label="Email address" />">
<perch:content id="email" /></a></p></perch:if>

Finally the telephone number field:

<perch:if exists="tel"><p class="tel value">
<perch:content id="tel" type="text" label="Telephone" />
</p></perch:if>

Save this template. Go back to index.php and delete the entire vcard area, replacing it with a Perch region with the name of ‘contact’.

Reload the webpage in your browser so that Perch can pick up the new region then visit the admin.

As usual you will need to click on the new region and set the template to Contact.

The form that displays will contain all of the fields you added to the contact.html template. The fields marked as required will need to be completed before you submit the form. Add your contact details, submit the form then return to your page to see the result.

This tutorial has shown you how to use perch:if and also the concept of repeating an id to reuse the same data. Check out the Perch documentation for further information about these tags and other usage examples.