hReview in Textpattern

23 Jan 2007

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">&#x2605;&#x2606;&#x2606;&#x2606;&#x2606;</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!

Recent Posts

The Hicks Logowall

05 Oct 2018

Hiding Away

16 Sep 2018

Biro sketch of Lauzerte

23 Aug 2018

Firefox Identity Project

21 Aug 2018

It’s just fashion

26 Jun 2018

The Symbol Sourcebook

08 Jun 2018

Differences between Icon and Logo Design on This is HCD Podcast

10 Apr 2018

Twelve South PencilSnap

01 Apr 2018

The Infinite Canvas

09 Feb 2018

Instagram Hickstagram

  • 22 Oct 2018

    Inktober Day 22. Well, @hicksmade left me with a toughie to follow. Here’s my attempt at Dali taking his pet anteater for a walk. #inktober #inktober2018 #leighandjondoinktober #dali

  • 21 Oct 2018

    Inktober Day 21, another bird (sorry @hicksmade)! This is the Snipe that I watched from the hide at Rusty Common on Friday. Lovely birds with beaks that defy the body they’re attached to. #inktober #inktober2018 #leighandjondoinktober #snipe

  • 21 Oct 2018

    Common Darter Dragonfly

  • 20 Oct 2018

    Inktober Day 20: quick doodle without planning in pencil or looking at reference, which is usually a bad idea. Your turn @hicksmade! #inktober #inktober2018 #leighandjondoinktober

  • 20 Oct 2018

    Morning dog walk. Even the wheelie bins looked good in this light

  • 20 Oct 2018

    Inktober Day 19. Following @hicksmade’s marshmallows with more marshmallows 🤪 #inktober #inktober2018 #leighandjondoinktober #ghostbusters #staypuft

  • 18 Oct 2018

    Inktober Day 18. When @hicksmade did a prawn I was sure she was setting me up to do cocktails! #inktober #inktober2018 #leighandjondoinktober #cocktails

  • 18 Oct 2018

  • 18 Oct 2018

  • 18 Oct 2018

    Inktober day 17 . @hicksmade’s pen led me onto squid and their ink shooting abilities. I also found out that a part of the squids anatomy is called a ‘pen’. #inktober #inktober2018 #ink #leighandjondoinktober

Contact us

Call Jon on +44 (0)7917 391536, email or tweet @hicksdesign.

Alternatively, pop in for tea and cake at the studio…

Hicks
Wenrisc House
Meadow Court
Witney, OX28 6ER
United Kingdom