The Venture Skills Blog

In our previous series about CCK and views we showed very simple ways to create new nodes and methods of display, we are going to take a more in depth look at using the CCK and contemplate modules. If you haven’t already read through the basic tutorials if you are unfamiliar with CCK, I’m going to presume you have both modules installed, and they are working correctly, for ease of use we will also be using the Date module which is an addon for CCK.

In this example we are going to create a node that mimics the Hreview microfomat in case you haven’t come across micoformats before here is a quick description.

Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.

We are going to create a HReview type node, as an example its pretty simple to do, lets look at basic Hreview.

<div class=”hreview”>
<div class=”item”>
<span class=”fn”>Backed beans recipes</span>
</div>
  <abbr class=”dtreview”>
    22 of feburary 1984</abbr>
    <?php } ?> by
<span class=”reviewer vcard”>
<span class=”fn”>Tim Nash</span>
</span>
<div class=”description”>
    Backed beans are enjoyable meal and the book details many wonderful ways to cook beans…
</div>
  <span class=”rating”>
   Five Stars</span>

</div>

The basis of the review is a title, date, description, and rating each of these are held within their own Span, Div or Abbr classes this means that they can be themed externally. Lets recreate the above as a node type.

Start by going administer -> content -> Content types and choosing add content type, give it a name and description leave the title as it is and create the content. Next click add field, start with the date field if you have installed the date module, then select Text Field with strtotime validation under date and give the field a name date might be good, the module sets the rest of the configuration up so just hit save field settings on the second screen, though you may wish to check the date and time zone settings are correct and make the field required. Add a second field this time call it review or description and select a normal text field from text. On the second page select 10 rows, make it required and turn on filtered text, this after all is the main body of your review. The third field is rating, again choose text field from text, single line, required.
We now have our custom node its time to test it.
Before we test it we can reorder the various fields via manage fields under the edit control of the given node, you change the order by adapting the weight like normal.

Once we have tested our content and created a dummy node its time to move to the contemplate (its always worth doing a dummy node first as it will be easier to spot mistakes. To create a template visit adminster ->content -> templates and create a new template for your reviews.

Now we will only theme the full node in this tutorial it will be very obvious how to edit the teaser once we are done. If you have followed this tutorial to the letter your code should have been generated looking like this.

<div class=”field field-type-date field-field-date”>
  <h3 class=”field-label”>date</h3>
  <div class=”field-items”>
    <?php foreach ((array)$field_date as $item) { ?>
      <div class=”field-item”><?php print $item['view'] ?></div>
    <?php } ?>
  </div>
</div>

<div class=”field field-type-text field-field-review”>
  <h3 class=”field-label”>review</h3>
  <div class=”field-items”>
    <?php foreach ((array)$field_review as $item) { ?>
      <div class=”field-item”><?php print $item['view'] ?></div>
    <?php } ?>
  </div>
</div>

Don’t worry if the order is different, we did not weight ours

Now copy and paste the following into your body template

<div class=”hreview”>
<div class=”item”>
<span class=”fn”><?php print $title ?></span>
</div>
  <abbr class=”dtreview”>
    <?php foreach ((array)$field_date as $item) { ?>
      <?php print $item['view'] ?></abbr>
    <?php } ?> by
<span class=”reviewer vcard”>
<span class=”fn”><?php print $name ?></span>
</span>
<div class=”description”>
    <?php foreach ((array)$field_review as $item) { ?>
      <div class=”field-item”><?php print $item['view'] ?></div>
    <?php } ?>
</div>
  <span class=”rating”>
    <?php foreach ((array)$field_rating as $item) { ?>
     <?php print $item['view'] ?></span>
    <?php } ?>

</div>


The bits of code in bold are the field names you may need to change them to the names you gave your fields, the code in italics is php code we have added, to add the title and the users name inside the review. The rest is just simply the relevant div, span and abbr tags for HReview you can read up the full specification here.

Now the above is messy, we have used the title twice, but the contemplate does not give us a method to modify the node title, hence the second use. Also you may wish to turn of Submitted by on… via themes global properties for this node type.

But that is it, open your css and theme away, hopefully this tutorial has given you some idea about theming your nodes with contemplate but this is not always the best way join us in part 2 when we theme this template the official way

Articles worth reading
CCK & Views the ultimate combination part1
How to build a site like Digg with no programming
Drupal & SEO a winning combination

Other Articles on the Venture Skills Network about Drupal
Drupal 5.0 goes Beta
5 Drupal Modules to Guarantee Drupal 5.0 Success
The Digg effect and can drupal survive it - looking at how drupal can cope with bandwidth spikes

Subscribe to The Venture Skills Blog by Email

This blog is moving soon, make sure you move with us by using our Feedburner RSS feed, if you have used the autodiscovery button in your browser you may need to swap feeds, simply delete the old feed and add, http://feeds.feedburner.com/VentureSkills For a more detailed explanation on feeds and recieving our content in various formats click here

Technorati Tags: Cms, Drupal, CCK, Contemplate