This tutorial will outline the steps to create and awesome looking taxonomy menu, using Imagecache, Taxonomy Image, Views, and some SQL. I will make this blog post the first one to be labeled ‘expert' in my skill level taxonomy, but that's really just there to look cool ;). I will explain the code step by step, and if afterwards, all 11 (!) lines of code make no sense at all, you can copy and paste the code.

Prerequisites:

  • A vocabulary with some terms
  • Imagecache
  • Taxonomy Image
  • Views
  • publipublic file system, this is needed for imagecache. However, there is an imagecache patch somewhere in the issue tracker that facilitates use with private file system. That's what this site uses.
  • Taxonomy with hierarchy is supported but the menu won't visualize the nesting, if someone know how to do this please post in comments.

1. If you have installed the above modules successfully, we'll want to create a custom view to display the content we want to link our taxonomy menu to. You might already have such a view, that's cool, we can use that one. If you don't know how to make a proper view, see the views documentation for details.

taxonomy image menu screenshot

In order to make our view display the content in a term from our menu, we will need it to accept arguments. In your edit-view form, go to the fieldset ‘Arguments', and add the argument Taxonomy: Term Name. You might find term id a cleaner solution to use as an argument but I chose to use term name as it is more search engine friendly. Now complete the argument configuration by settings a title in the argument textfield, you'll want to use the %1 token to represent the term name in the title. For example, if you have a term called Blue Widgets, and you use %1 Blog as title in your argument, the /viewname/termname page will have the following title: ‘Blue Widgets blog - my site title'.

2. Next, we are going to setup imagecache to resize and cache our term images. We want our term images to be all the same size but we don't want to bother opening up the photoshop or GIMP each time we find a cool image to add to our menu. Create an imagecache preset with the following settings:

  • Preset namespace: taximg
  • $Action: scale and crop
  • Width: 90
  • Height: 70

Naturally, you may set whatever image dimensions you like, as long as it doesn't exceed the space you plan to fit your menu in.

3. Thirdly, go to admin/content/taxonomy/image and upload some taxonomy images.

4. Now it's time to do some coding. Paste the following code in page.tpl.php somewhere above $content in the main area. We're going to move it in a block later but it's safer to develop code in a template file. If you save screwed up code in a block you risk getting a blank page from your website, in which case you'll have to remove the code from the database.

<ul class="coolmenu">
<?php
$coolmenu
= "SELECT term_data.name,term_image.path FROM {term_data},{term_image} WHERE term_data.vid = 1 AND term_image.tid = term_data.tid";
$result = db_query($coolmenu);
  while (
$data = db_fetch_object($result)) {
 
// $data is a node ... similar to a proper node object but not fully populated
 
$output .= '<li><a href="'.$base_path.'/viewname/'.urlencode($data->name).'">'.theme('imagecache', 'taximg', $data->path,$data->name,'','')).$data->name.'</a></li>';
  }
print
$output;
?>

</ul>

It starts with some html to start our unordered list,but shortly after you'll see some scary looking line of php and php and SQL code. This code is what we use to tell the db_query function what stuff we want to retrieve from the database. If you look closely you'll see that we will select the name from the table term_data, the path from the table called term_image, and that we want to select this data only if we find table rows that have the same term id in them. On the next line we will load this query into our db_query function.

The subsequent line (@while) starts some code that loops through all instances of datasets that are retrieved, and use the data to construct list items. Make sure to replace viewname with whatever you named your view at step 1. If you can't see the pattern that constructs our list elements using our data, try copying the code into an editor to get a better overview. Tip: if you want the link text to say more than just the term name, you can put text in between $data->name.' and </a>.

Now, you need to set the vocabulary id in the query. If you only have one vocabulary (or you're using your first), you may leave it at one. Otherwise, find your vocabulary id by hovering over the edit vocabulary links over at ‘admin/content/taxonomy' and see to which vocab number it links. It's the number in the end of the url.

Now it's time to upload and run your code to see if it displays our taxonomy menu with image(s). If so, congratulations, you may continue to step 5. If not, see what error you get and try to fix it.

5. Most of the hard work work is done and it's time to put our code in a block. Go to blocks administration , create a new block, use php for input filter, save it, and put it in a region. Please don't put it in a block without first trying it out in page.tpl.php as described above or you risk screwing up your site.

6. Sixthly, we&#39;re going to add some styling to our
menu so that it won&#39;t look as crappy as it does now. Check out the CSS I used
for the menu in the screenshot to inspire your own creativity:
</p>
<p>
ul.coolmenu {
padding:0;
float:left;
}
ul.coolmenu li {
background:#EAEADA url(http://www.example.com/themes/theme/images/libg.gif) 0 0 no-repeat;
border:#DDDDCA solid 7px;
margin:0 0 14px 0;
padding:5px 10px 6px 9px;
float:left;
clear:both;
width:242px;
font-size:1.2em;
}
ul.coolmenu li img {
margin:0 3px 0 0;
padding:0 5px 0 0;
border-right:#DDDDCA solid 6px;;
float:left;
}

Tags

Drupal

5.x