Creating Stylish Vocabulary Overview Pages in Drupal

Recently we received the following request on the Christian Assemblies website:

Hello. You have a wonderful website, I love the design. I'm sure you are very busy, but I am hoping you could provide me a little information. We are currently planning on redesigning our church website, and are looking at using Drupal, as I see you use on this site. Our designers would like boxes similar to you use on pages like testimonies. Can you please tell me how you created those? Is there a module plug-in used, or did you just create clever HTML/CSS?

An example of the boxes on the site which we were asked about

The answer is "both". Let’s take it step-by-step.

Creating Selections of Content Tagged with a Taxonomy Term

If you turn on taxonomy and start tagging nodes with a taxonomy term, then by default the path taxonomy/term/x will show teasers for all nodes tagged with the taxonomy term x (where x is a number, the terms are numbered starting at 1). So you get something very similar to the following: Drugs testimonies. The main difference you’ll notice is that we’ve customised the teasers a bit with a photo.

Ordering the Taxonomy Terms with Views and CCK

The default taxonomy term pages are ordered by the date in which they were posted. In our case we have a lot of testimonies and bible studies in some of the categories and the client wished to choose the order in which they would be listed, since naturally the ones at the top will gain the most attention and most views. For this you need two things:

1. A mechanism to rank the testimonies.
2. A mechanism to list the testimonies according to their rank.

The answer to the first part is the CCK module. The answer to the second part is the Views module.

We defined a field called "importance" via the CCK module and via the views module we created a view called "Ordered taxonomy term" which mimicked the standard taxonomy term view. In fact by default the views module contains a view called "taxonomy term" which, if you enable, creates a view which replicates the default taxonomy term view. You may wish to use this as a starting point. To this view you add a sort criteria based on the "importance" field and voila, a sorted taxonomy term view.

Creating Boxes Containing the Titles of the Top Ranked Nodes

Now we wish to create little boxes that contain the top three rated nodes for each taxonomy term.

1. Create a block display for the view.
2. Edit this display to use a row style of fields.
3. Under Fields, the only field it should display is Node: Title. Tick the box to link this field to the node.
4. Edit Items to display to be 3, no pager.

Now you have a block view that will display the titles of the top 3 ranked nodes.

Putting the Views into a Vocabulary Overview Page

There are plenty of ways to incorporate these views into your page. We did it programmatically – the views2 documentation explains how to insert a view – the simple way is views_embed_view(). Of course you want to do this once for every term in a vocabulary. There’s a function called taxonomy_get_tree() which will grab all the taxonomy terms from a given vocabulary. For each term:

1. Print its name inside a heading tag like <h2>.
2. Pass it as an argument to views_embed_view() with the name of the view you created to embed the relevant view into the page.

This is all a bit much if you’re not really a programmer, in which case you might like to search through the list of views-related modules  to find something that might help. The insert_view module would certainly help to some extent. Another thought is that any block view you create in views is made available under the Site Building > Blocks section in Drupal admin so you might be able to find a way to incorporate your blocks into pages via that interface - I'm not sure.

Time for a Touch of Style

Now you’ve got the data you need – a heading and three node titles being printed on your page for each term in the vocabulary. It just doesn't look very good yet.

We used some background images on the headings to create the nice title look. If you look at the output of embedding a view there is heaps of HTML in there, lots of <div>s and so forth. Just stick borders on the right classes and you’re right. Sorry, I know that will only make sense to people that already know how to do it anyway, but unfortunately CSS styling is a whole subject in itself and a bit out of scope of this article. Suffice to say that with two background images and then setting the right borders, margins and padding we created the rounded box effect. Then float the boxes on the page and you’re set.

Well there you have it. Taxonomy overview pages with Drupal. If it helped you, feel free to drop me a line in the comments.