SooperThemes Blog

Where we talk about Drupal, front-end development, open source software and other cool topics

You are here

6 steps to a fancy custom taxonomy menu with term images

Author:JurriaanRoelofs

Datum:14-1-'08

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;
}

Comments

Thank you for the procedures of showing the taxonomy image in a page. But how can I filter those taxonomy terms to show only the taxonomy image/images that I selected from the Check box(taxonomy) ?

Thank you so much and more power!

Cheers!

Resources like the one you mentioned here will be very useful to me! I will post a link to this page on my blog. I am sure my visitors will find that very useful Permettant de comparer et d'acheter très facilement le stage aérien de vos rêve Ecole de Vol libre Millau, stages initiation et perfectionnement, vol en ulm parapente et delta, revendeur mat?riels ailes, sellettes Page 1 de réactions, L'accident s'est

Add new comment