Leaving Breadcrumbs in Movable Type

Breadcrumbs are staple (pardon the pun) of many web sites. You've seen them, they're the line typically near the top of an article page that shows you where in the tree of semi-organized information that article resides. Something like:

News Home : World : National : Local : Seattle : Space Needle on Fire

Each of those encompasses everything to its right, and each would be a link to a summary page for that level of topic. The last might be the actual page you're on.

If you've used Movable Type for any length of time, you might be thinking something about categories, sub categories and the like.

As was I, when a friend prodded me with "If you come up with an MT hack for that, please post it."

I hate a challenge that I can't resist if I'm already overbooked - particularly for something I want myself. :-)

Ask Leo! now has breadcrumbs. I still have work to do, though, as I'll explain in a moment.

First, here's the template snippet that I've placed in my Individual Entry template:

<p>
 <MTEntryCategories>
  <a href="/">Home</a> &raquo;
  <MTParentCategories glue = "&raquo; ">
   <a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><$MTCategoryLabel$></a>
  </MTParentCategories>
  <br />
 </MTEntryCategories>
</p>

That's it. That generates a breadcrumb line based on your category assignment, and the arrangement of the category and subcategory hierarchy that you've created.

Here's an example on Ask Leo!: How do I determine the capabilities of my wireless network adapter?

So, a couple of important "how too" points:

• It's important that you organize your categories and subcategories well. You're looking to create a sensible, hierarchical tree of categories. In my example, "Wireless Networking" is a subcategory underneath "Networking". (And herein lies my work for Ask Leo! - I need to retrofit a meaningful hierarchy for my categories.)

• In general you want to assign each post to a single category, and that would typically be a leaf from that hierarchy tree. You can assign a intermediate or node value instead, if you like, but I'm assuming that leaves will give your readers the clearest understanding of your organization. In my example the post is assigned a category of "Wireless Networking" - that's all.

That's it. The template code above prints the path down your hierarchy to that particular category leaf.

•

And now, a word about multiple categories.

MovableType allows you assign multiple categories to entries. In such a case, the code above will print a separate breadcrumb line for each category you've assigned to a post. Typically if you do this, you'll want the categories to be leaves on different branches of the hierarchy tree. For example, it'd look kinda silly to assign both "Networking" and "Wireless Networking" when the later us a branch off the former. The breadcrumb lines would look like this:

Home » Networking
Home » Networking » Wireless Networking

That not only looks kinda silly, but is also redundant.

On the other hand, if I had a separate branch in my category hierarchy that this article also applied to, it might make sense to assign it a second category within that branch. For example:

Home » Hardware » Network Adapters » Configuration
Home » Networking » Wireless Networking

Not only is it not redundant, but shows your visitor that the post might very well have two larger contexts of interest.

References:

• I got a boost from the information here: David Raynes: Subcategories. That was written before MovableType actually supported any of this, but includes a plugin for pre-3.x MT that I believe enables most of what I've just described.

Posted January 19, 2007