A little foreword on Drupal theming
Most of you reading now aware of that it’s said: Drupal is a great CMS. It is a completely flexible platform and serves as a great foundation to build nearly any kind of website. It has a well structured system which nearly completely separates code, content and style. Perhaps this flexibility causes most issues when dealing with theming. Creating templates for Drupal is wonderfully simple when it comes to the basics. Vast documentation and a helpful community stands there for the template developer but there are so many possibilities and so many available options that it’s often not enough.
Apart from creativity, developing themes for Drupal needs a widely open brain who understands the logic behind the scenes and can take the advantage of flexibility. Indeed it needs both a designer and a developer in mind.
During one of my latest works I realized why the majority of Drupal themes are very similar, because its developers don’t take their time to go beyond the basics. I believe this is a must if you wish to create something that you want to be outstanding from the crowd. Nada to say Ubiquity isn’t that outstanding that way, too. As you can see it only serves basic needs but it might be a nice base for customizing.
Anyway, I decided to publish some of my theming tricks, bits and pieces what I used before. It will cover css, php and Drupal. I mostly use the core PHPTemplate engine. Why not using some of the custom engines like Smarty? Smarty is great but I believe performance is really what shouldn’t be overlooked and the richer the template engine is in features the faster it will die under high load. PHPTemplate is just fine for what we do.
Cut to the cheese
Enough said, let’s deal with taxonomy display.
Taxonomy is the method of content classification. Basic themes usually utilize a very simple display of taxonomy terms when showing a node. Just look at this post, under the title, it comes submission info and associated terms.
I recently developed a real estate website for my client and she had a simple demand. Show vocabulary names along with terms with the property pages in a badge like fashion or something like a table. There are a couple of vocabularies and each has a set of terms regarding the type, place, size and price range of the property like this:
Place
-> Here
-> Other place
-> There
-> Over there
-> Theremost
Type
-> Flat
-> Castle
-> Roman
-> Gothic
-> etc…
-> House
and etc. What we needed is to display these categories as a table to represent the classification of the property. But since we don’t need tables in teasers we create a list as well.
I included this into template.php:
function _phptemplate_variables($hook, $vars = array()) {
switch ($hook) {
case 'node':
// we are dealing only with 'property' node type
if ($node->type == 'property') {
// and if there are any assigned terms to that node
if (count($node->taxonomy)) {
$terms = taxonomy_node_get_terms($node->nid);
// getting each term assigned
foreach($node->taxonomy as $term) {
// get the parent term
$parent = taxonomy_get_parents($term->tid);
$prefix = @array_shift($parent)->name." / ";
// get the vocabulary of the term
$term_vocabulary = taxonomy_get_vocabulary($term->vid);
// construct table row for table
$rows[$i++] = array(array(’data’ => $term_vocabulary->name.’:', ‘class’ => ‘name’, ‘header’), array(’data’ => $prefix.$term->name, ‘class’ => ‘value’));
// construct unordered list for teaser
$list[$i] = $term_vocabulary->name.’:
‘.$prefix.$term->name.’‘;
}
// build the variable for tpl.php pages
$vars['property_infotable'] = theme_table(NULL, $rows, array(’class’=>’property-info’));
$vars['property_infoteaser'] = theme_item_list($list);
}
}
break;
}
return $vars
}
?>
This creates a $property_infotable and a $property_infoteaser variable for the tpl.php file used for the property node type. Now we have to construct a node-property.tpl.php file like this:
And that’s it. If a teaser is viewed, only the infoteaser shows up, and on the full node view we see the table. We only need to style the appearance, but this is out of the scope of this post. Styling heavily depends on placement, but a short css to include for the $property_infotable is here:
/* property infotable */
.property-info {
width: 250px;
float: left;
margin: 10px 12px 8px 0;
font-size: 88%;
}
.property-info .name {
text-align: right;
padding: 6px 8px;
width: 45%;
}
.proprerty-info .value {
text-align: left;
padding: 2px 8px 3px 0;
margin: 0;
font-weight: bold;
}
This would produce a small table like this:
[img]http://templates.m42.hu/sites/default/files/articles/2007-08-drupal-taxonomy/screenshot.png[/img]
I hope you find this useful. No big magic here, just a couple of small tricks that might come useful. Any feedback would be appreciated.