Drupal Howto: Adding a nifty metadata box to your nodes
In this tutorial, we will be adding a container with
metadata about your node to our node template. To see what I mean, look at the
bottom of this node page. Code snippet is plug-and-play, so you can plug it
right into your custom theme, or one of my own Drupal themes.
The box in question can contain any node information
we want, such as link information, to ensure the blogosphere can link to us
effortlessly, or statistical data about our node (hits etc.).
For starters, we're going to add a simple container to
our node that contains a html link, a BBcode link, and the trackback url of our node. Open
up your node.tpl.php file, and add a new div element at the end:
<?php if ($page != 0) { ?>
<div class="metadata">
</div>
<?php } ?>
This is going to be our container, we only want to
display it at full-node-view, hence the $page!=0 test.
Now we're ready to put stuff in our metadata
container, the following code outputs the aforementioned link goodies:
<h5>BB code link for this article</h5>
<input onclick="this.focus();this.select()" type="text" value="[url=<?php print $base_url.drupal_get_path_alias($_GET['q']); ?>]<?php print $title ?>[/url]" />
<h5>HTML link code for this article</h5>
<input onclick="this.focus();this.select()" type="text" value="<a href="<?php print $base_url.drupal_get_path_alias($_GET['q']); ?>"><?php print $title ?></a>" />
<h5>Trackback URL for this article</h5>
<input onclick="this.focus();this.select()" type="text" value="<?php print url('trackback/'. $node->nid, NULL, NULL, TRUE); ?>" />
The onlick parts make sure that it the effort required
to copy and paste a link is truly minimal, upon clicking the input element all
link code is immediately selected, ready for you to control-c it {or macbutton-c
it ;)}. The other part that is important is what is in the value attributes, these code snippets are subsequently a bulletin
board link, a html link, and a trackback url. The url that is linked to is
derived by sticking the Drupal path to the base url. The link text is plain and
simple our node title, but if you feel like SEOing it up, you can sneak some
keywords in the link title part... for instance by replacing ‘<?php print
$title ?></a>' with ‘free<?php
print $title ?></a>'
To wrap it up, you might want to add some simple styles to your metadata box, something like this for example:
div.metadata {
background:#eee;
padding:5px;
width:60%;
margin:1em 0;
}
div.metadata input {
width:97%;
}
div.metadata h5 {
margin:0.5em 0;
}
For a next tutorial I will think of some other cool
data to put in our metadata box, if you have any suggestions, feel free to post
it in the comments here.
