The Movable Type Knowledge Base

Category Image Display

Question

Can I put an image next to each entry based on its category?

Answer

Create an image for each category in your weblog. Save each image using the category name, but without any special characters and replacing spaces with underscores (this is called "dirifying" the file name). For example, if your category name is Exciting News, save the file as exciting_news.gif.

Upload the images to your server. You may wish to create a special subdirectory within your weblog folder named images.

To put the image next to your entry, add this code inside of the MTEntries container in your templates (the Individual Entry Archive Template does not use an MTEntries container, so you can just place the code in that template wherever you wish it to appear)1:

<img src="<$MTBlogURL$>images/<$MTEntryCategory dirify="1"$>.gif"»
  alt="<$MTEntryCategory remove_html="1"$>" />

Rebuild your site. Each entry will now show the image associated with the primary category to which the entry has been assigned.

An alternative method is to use the Topic Icon plugin.

1 The » indicates line breaks added for display purposes; you should remove these breaks when using this code.

Submit Feedback on This Article

Your comments on how we can improve this article are appreciated; but please do not use the feedback form to submit support requests or questions. We will not respond to or publish such queries submitted through this form. If you have a technical question or problem, visit Movable Type Support.

Yahoo! Small Business web hosting services

Six Apart
Makers of weblog software and services for individuals, organizations and businesses.
This website is powered by Movable Type.