[wp-hackers] Category template w/ image -subcat with image

[Daiv Mowbray]

Hello lis, out of lurk mod, I hope I can ask this type of question here.

I've been editing my category template. I wanted the cat description  
to have an image, I found a plugin which put a full editor into the  
description text window, didn't like that idea. Found a hack to not  
strip out html tags from the text window content, didn't like that  
much either. So with a little more searching I found some code snips   
in the forums and went to work.

Any comments, suggestions on how to make this cleaner or better, more  
than welcome. Also my last issue with this is that when in sub cat  
page, the Sub cat image displays, but the image also displays in the  
sub cat list below. How can I remove the repeated sub cat image?  
Thank you.
view issue here.
http://portfolio.daivmowbray.com/media/sites/personal-sites/

What I wanted was a template which pulled an image based on the  
category name and placed the cat description, plus any sub categories  
would also have an image and it's description as link title. If there  
is no image a default would be placed, if there is no default the cat  
title would be placed. The image size is read from the image so each  
cat can have a different size image.

Here's the result;
php to be pasted into your category.php file inside your template  
folder:
<div class="category-image">
<?php
$category = $wp_query->get_queried_object();
$parent = ($category->category_parent) ? $category->category_parent :  
$category->cat_ID;
$catnice_image = $category->category_nicename.'.jpg';
$catname = $category->cat_name ;
$image_path = (TEMPLATEPATH);
$image_url=get_bloginfo('stylesheet_directory');
$catdefault = $image_url .'/images/category/default- 
category.jpg' ; // default image browser url
$catdefaultpath = $image_path .'/images/category/default- 
category.jpg' ; // default image server path
$catfile = $image_path .'/images/category/'. $catnice_image;
$catimage = $image_url .'/images/category/'. $catnice_image;
// check if cat has a description and set it into $catdesc
if ( !(''== category_description()) ) : $catdesc = apply_filters 
('archive_meta', category_description()); endif;
// check if images are in their place and present them if they are.
if( file_exists($catfile)) {
list($width, $height, $type, $attr) = getimagesize($catfile);
$cat_img = '<img src="' .$catimage . '" alt="' . $catname . '" '. 
$attr.' />'.$catdesc.''."\n\n";
} else if ( file_exists($catdefaultpath) ){
list($width, $height, $type, $attr) = getimagesize($catdefaultpath);
$cat_img = '<img src="' .$catdefault . '" alt="' . $catname . '" '. 
$attr.' />'.$catdesc.''."\n\n";
} else {
$cat_img = $catdesc ;
}
echo $cat_img ;

// check to see if there are sub cats , close category-image div and  
open sub cats div.
$cats = get_categories('child_of='.$parent.'');
if (count($cats) == 0) {
}
else {
echo '<br class="brclear" /></div><div class="sub-cats">';

// start the sub cats image and descriptions with linked images
$count=1;
foreach ((array)$cats as $cat) {
$subcatdesc = attribute_escape(strip_tags($cat->category_description));
$image = $cat->category_nicename .'.jpg';
$subcatimage = $image_url .'/images/category/'. $image;
$subcatpath = $image_path .'/images/category/'. $image;
$subcatdefault = $image_url .'/images/category/default-subcat.jpg';
$subcatdefaultpath = $image_path .'/images/category/default-subcat.jpg';
if( file_exists($subcatpath) ) {
list($width, $height, $type, $attr2) = getimagesize($subcatpath);
$subcat_img = '<div class="sub-cat" id="sub-cat-'.$count.'"'.'><img  
src="' .$subcatimage. '" alt="' . $cat->cat_name . '" '.$attr2.' / 
 ><p>'.$cat->cat_name.'</p></div>'."\n\n";
} else if ( file_exists($subcatdefaultpath) ){
list($width, $height, $type, $attr2) = getimagesize($subcatdefaultpath);
$subcat_img = '<div class="sub-cat" id="sub-cat-'. 
$count.'"'.'>category_nicename .'"><img src="' . $subcatdefault . '"  
alt="' . $cat->cat_name . '" '.$attr2.' /><p>'.$cat->cat_name.'</p></ 
div>'."\n\n";
} else {
$subcat_img = '<div class="sub-cat" id="sub-cat-'.$count.'"'.'><p>'. 
$cat->cat_name.'</p></div>'."\n\n";
}
echo $subcat_img ;
$count++;
}
}
// close either sub-cats div if opened or, close category-image div
echo '<br class="brclear" /></div>';
?>

You would need to place the following images into /yourtemplate/ 
images/category/
<ul>	<li>default-category.jpg</li>
	<li>default-subcat.jpg</li>
	<li>your_cat_slug.jpg</li>
	<li>your_subcat_slug.jpg</li></ul>

The css for this is pretty straight forward:
`
.category-image{
margin-top:12px ;
padding: 10px;

font-size: 0.9em
}
.category-image img{ float: left; margin-right: 20px;}
.category-image p{ }
.sub-cats{ font-size: 0.9em;}
.sub-cats p{ margin: 6px}
.sub-cat{
float: left;
text-align: center;
padding: 6px;
margin: 10px;
border: solid 1px #898989;
}
.sub-cat p{}`
----------
Daiv Mowbray
daiv at daivmowbray.com
----------