23/01/07
hReview in Textpattern
That last post was a little test in using the hReview Microformat in Textpattern. I think it worked!
One of Textpattern’s great features is the ability to use a different ‘form’ (the template that specifies how posts are marked up) that each post uses. With this in mind, all you need to do is create a different article form called ‘hReview’ and specify that any time you do a review on a Textpattern blog.
I’ll come to the actual markup of the form in a moment, but first I just want to show you how I’ve used the Content > Write tab to write the review.
In this example, all I added were 2 custom fields (via Admin > Preferences > Advanced), ‘URL’ and ‘Rating’, but you may want to add more for fields such ‘Item Type’.
Then I entered the review as follows:
| TXP Field name | Microformat Class | TXP Tag |
| Title | Item | <txp:title /> |
| Excerpt | Summary | <txp:excerpt /> |
| Body | Description | <txp:body /> |
| Article Image* | Photo | <txp:article image class="photo" /> |
| Rating (custom field) ** | Rating | <txp:custom_field name="Rating" /> |
| URL (custom field) | URL | <txp:custom_field name="URL" /> |
*The Textpattern ID of the image
**Entered as a number from 1-5
I then chose ‘hReview’ from the ‘Override form’ dropdown before publishing. However, you can’t choose that until you create the form, so let’s get down to the nitty gritty! Create a new form called ‘hReview’, choose ‘article’ from the type dropdown, and add the following code:
<div class="hreview">
<h2 class="item"><txp:permlink class="fn"><txp:title /></txp:permlink></h2>
<p><abbr class="dtreviewed" title="<txp:posted format="%Y%m%d" />"><txp:posted format="%B %e, %Y" / ></abbr>
<span class="reviewer vcard"> by
<span class="fn"><txp:author /></span>
</span>
<txp:if_custom_field name="URL">
<p><strong>Website:</strong> <a href="<txp:custom_field name="URL" />" class="fn url" rel="bookmark"><txp:custom_field name="URL" /></a></p>
</txp:if_custom_field>
<div class="summary">
<txp:excerpt />
</div>
<div class="description">
<p>Rating: <span title="<txp:custom_field name="Rating" />" class="rating"> <txp:custom_field name="Rating" /></span> out of 5</p>
<txp:article_image wraptag="p" class="photo" />
<txp:body/>
</div>
</div>
A lot of this is self-explanatory. The review description is output wherever you put <txp:body />, the item name is output wherever you put <txp:title />. There are a few places where it’s probably worth talking through what’s going on.
Date
The txp tag @23.01.07 has an attribute “format” which allows you to customise the date using PHP’s strftime strings:
<abbr class="dtreviewed" title="<txp:posted format="%Y%m%d" />"><txp:posted format="%B %e" />, <txp:posted format="%Y" />Doing this uses the published time information and displays in ‘human readable’ form:
< txp:posted format="%B %e, %Y" / >as well as ISO for the title attribute:
<txp:posted format="%Y%m%d" />">Handy if you also want to use Textpattern to display events in hCalendar format (which I’ll cover in another post).
Rating
Whatever number is entered into the Rating field is output in the title attribute as well as the text:
<p>Rating: <span title="<txp:custom_field name="Rating" />" class="rating"> <txp:custom_field name="Rating" /></span> out of 5</p>There are other possibilities here, such as: class="rating star<txp:custom_field name="Rating" />" and then using image replacement to style the span with the resulting class name (star1, star2 etc.). The hReview creator suggests using HTML entities to display a star rating, for which we’d need to use the conditional tag <txp:if_custom_field>, e.g:
<txp:if_custom_field name="Rating" val="1">★☆☆☆☆</txp:if_custom_field>This is what I used on the first review, but as Mr Oxton pointed out, this isn’t very ‘human readable’ to things like screenreaders, so I intend to implement the image replacement/class method above.
It’s a wee bit of sweat to set it up, but you have, you’ve got a form that can be called up anytime you want a review on your site to be marked up as a hReview!
Tags: code, microformats, textpattern
Download our vCard