Plugin: Category Image(s)

Post author By Scott
Post date Sunday, 27 June 2004
149 Comments on Plugin: Category Image(s)

This plugin has been updated! Comments to this post are now closed. For the latest download, documentation, and link for posting new comments related to this plugin, visit the plugin’s new homepage at:
coffee2code.com/wp-plugins/category-images

Name:

Category Image(s)

Author:

Scott Reilly

Version:

1.2

Last updated:

17 May 2005

Description:

Displays image for each category associated with a post. The number of images displayed can be limited, and the image file extension type and file location can specified.

Notes:

c2c_the_category_image() basically extends the functionality of WordPress’s core function the_category() to add the ability to display a category image instead of the category name in the link to the category archive. The function with its $image_extension argument defaulted to ” could be a drop-in replacement for the_category().
As is done the_category(), the image or text for each category is also a link back to that category’s archive.
If $image_extensions is defined, but no image is found for the category, then nothing is displayed for that category.
The images must be given a nice-name version of the category name. This means all non-alphanumeric characters must be stripped from the name, all letters made lowercase, and all spaces replaced with ‘-‘. For example:
Category name ==> Nice-name to use for filename :
WordPress ==> wordpress
Scott’s Plugins ==> scotts-plugins
The number of category links/images displayed can be limited via the $limit argument
Category a image <img> tags are defined with class="catimage" for stylesheet manipulation
No global site-specific settings need to be configured.
Must be run inside “the loop.”

Installation:

Download the file category-images.zip and unzip it into your wp-content/plugins/ directory.
-OR-
Copy and paste the the code ( category-images.phps ) into a file called category-images.php, and put that file into your wp-content/plugins/ directory.
Activate the plugin from your WordPress admin ‘Plugins’ page.
Create category image (.png unless you specify the extension in your call to c2c_the_category_image()) for each category you wish to have an image for, placing the image into the wp-content/images/ directory (unless you specify another location in your call to c2c_the_category_image()). Remember to give the filename the nice-name version of the category name (see note above).
Modify your index.php at a point within “the loop” to make use of the function (assuming, of course, you’ve already defined categories and assigned posts to them). The simplest use would be to replace the index.php call to the_category() with c2c_the_category_image()

Functions:

function c2c_get_category_image($category,
    $image_extensions='png gif jpg'
    $image_dir='/wp-content/images/')

This is a helper function that retrieves the URL of the image for a specified category. Returns ” if no image was found:

$category : array for a single category
$image_extensions : (optional) a space-separated list of image extensions to consider for use for the image(s) to be displayed, in the order they are to be considered; if defined as ” then no image is retrieved and the category name is displayed instead (a la the_category()); default is ‘png gif jpg’
$image_dir : (optional) the directory in which to look for the image(s); default is ‘/wp-content/images/”

function c2c_the_category_image($seperator='', $parents='', 
        $image_extensions='png gif jpg', 
        $image_dir='/wp-content/images/',
        $use_name_if_no_image=false, 
        $start_from='begin', $limit=999)

This function does the actual display of the post’s category image(s):

$separator : (optional) text to insert between each image to be displayed (examples: ‘, ‘; ‘<br />’); if defined as ” (which it is by default), then like the_category(), it will display the image(s) in an unordered list.
$parent : (optional) honestly, I’m not quite sure if/when this argument is ever used or what it’s meant for, but I’ve taken it into account; default is ”
$image_extensions : (optional) a space-separated list of image extensions to consider for use for the image(s) to be displayed, in the order they are to be considered; if defined as ” then no image is retrieved and the category name is displayed instead (a la the_category()); default is ‘png gif jpg’
$image_dir : (optional) the directory in which to look for the image(s); default is ‘/wp-content/images/”
$use_name_if_no_image: (optional) if no image for a category is found, should the name be shown instead?; default is ‘false
$start_from : (optional) display images starting from the ‘begin’ or the ‘end’; default is ‘begin’
$limit : (optional) the maximum number of images to display for a post; default is ‘999’

Tips & Examples:

You can opt to treat only certain categories as having a graphical representation by defining an image for them but not creating images for the non-graphically represented categories (as in you can have a subset of categories that dictate what image to be displayed for the post)
You can take advantage of the $image_extension and/or $image_dir arguments to display different category icons under different contexts, i.e. if showing a $single post, choose to use a ‘png’ image, otherwise use ‘gif’; or locate your images in different directories ‘/wp-content/images/cat-images/small/’ and ‘/wp-content/images/cat-images/large/’ and decide on context where to get the image(s) from:
```
// In showing the post singularly, then use a larger image, else use a small image
<?php
if ($single) {
   c2c_the_category_image('', '', 'gif', '/wp-content/images/cat-images/large/');
} else {
   c2c_the_category_image('', '', 'gif', '/wp-content/images/cat-images/small/'); 
}
?>
```
```
// Show all images in a comma-separated line
<?php c2c_the_category_image(', '); ?>
```

149 replies on “Plugin: Category Image(s)”

[…] ged a few things around to make it more like what I wanted. If you’ve got WordPress, go to Scott Reilly’s site and get

[…] , gallery.idahocline.info Some new internal stuffs (plugins as Customizable post listing, Category images and … e you soon … on another server…. […]

I’ve seen other category images plugins, but this is the first that is supposed to do what I want (put in place of list with link). But I am having some trouble, no matter what I seem to do, I get “Filed under: -” etc… it just removes the category completely. Am I calling it correctly with the_category_image(‘, ‘); ???? Thanks! 🙂

My examples might’ve been unclear about the need to make sure you call the function within the php tags, like so:

<php the_category_image(', '); ?>

I just updated the examples above to make that explicit. Just bringing that up to rule it out as the problem…

Later…
Ah, I just followed the link to your site and saw that you figured out the problem. I completely neglected to mention that the images needed to have the nice-name version of the category name (I now explain it above.) Sorry for the lack of documentation on that.

BTW, I like your use of the plugin! 🙂

Thank you for the kind words 😉
I just have two things to say: I LOVE WORDPRESS & I LOVE THIS PLUGIN!!
lol – this has opened the door for me to use multiple categories, a thing I stayed away from before. Don’t ask me why, I just did… lazy I guess. hehe
So many things to see on this site… oooh I’m having fun 😉

At the risk of looking like an even bigger idiot, I have another question.
Okay the plugin was installed and working great, but then I had to create a new category. I created it, posted in it, added a new image for it but nothing turns up. I tried reposting again in it after the image was in there. Tried removing that category and putting it back. Also tried deactivating the plugin and then reactivating it. Everything and I still got nothing. I only got listed the other category of the post. Any clue as to what’s going on and how I can fix it? Thanks 😀

Hey I don’t mind answering questions. Offhand I’m not certain what the problem is. How do you have your categories structured? Anything new about how you handled this latest category? Namely, do you have it as a sub-category of one of the others? If it’s a subcategory, is it the first sub-category you’ve used? Does its parent category have any posts associated with it? I know you’re aware of the need for nice-naming the image files, but does this new category have something unusal about its name that you might not have nice-named properly?

Finally, just to see what happens, when you call the_category_images(), try calling it with its $image_extension argument set to ” (two single-quotes without a space in-between). You should see the text names of the categories instead of the images.

Okay well – it’s not anything wierd, as a category. It’s just Books, and the image is Books.png. I have a couple of subcategories, but I have not used them yet and they are not connected to this new category. So I don’t think I did anything wierd. I did what you said with the text names and I get those names okay, both categories.
Blah… lol confusselled.

The image filename needs to be all lower-case, books.png. Could that be what gets it working for you?

Well, no that was not the problem, but I finally figured it out. And now I feel like a real dumb@$$. LOL. *Too embarrassed*

Your plugin is great!! And it worked like a dream on the first attempt!! Thanks for making it! 🙂

1) Yep
2) Done, fine
3) Uploaded, lowercase, cat name OK, good
4) What? “Modify your index.php …” What am I adding to the index file?

These instructions don’t make it clear … so, er, help?

Well, the simplest usage would be to replace the existing call in index.php to the_category():

<?php the_category() ?>

with a call to the_category_image():

<?php the_category_image(', ') ?>

Naturally, you may want to adjust the function arguments to suit your specific usage, and you may want to change where in index.php the category images should appear, but doing the above should be a start.

Ah, I see Scott, I just didn’t get that from following the instructions; please add a line in saying this so others don’t try your plugin and just wander off wondering what to do. Thanks for the prompt assistance!

Now on to the tweaking my index file … where did I place the hammer …

Hello… Nice plugin and I’m trying to use it but seem to be having some trouble. I can’t get the images the show where I made the function’s call…in fact, they don’t show at all. In the plugin itself, I’ve pointed the directory to ‘wp-images/cat-images/’ because that’s where they are stored (.png format). So can you help me out?
my site www.zillasays.tk. And the category images are supposed to show before the word “Posted.” Thanx.

I can’t seem to reach your site. My first theory about the category images not showing would be: have you given the category image files the “nice-name” of the category names? For instance, if your category is “Family News!”, the file would be family-news.png (the filenames must be ONLY alphanumeric characters, all lowercased — no punctuation; spaces replaced with “-“).

is it possible to work this code:
?php the_category_image(', ') ?> into the actual text of every post? that way it would look more like I have this huge amount of white space before the post … But it would be sweet if the icon was in the (upper right) of each post and the text of the post went around it.

Can this be done? if so how?

sorry… more like slashdot.

You would most likely want to use CSS to control where the image(s) appear. Not sure how much you know about CSS; I’m no guru, but I could look into it.

yeah any advice would be super helpful… I don’t know much about CSS… Did you find anything?

hi scott and thanks for this great plugin 🙂

one question. is it possible to use it to replace each category name by its image in the category list of the nav bar (fonction: wp_list_cats()) and if so, how?

thanks a bunch

Questions?: The CSS turns out to be pretty simple. After looking at the page you sent me, it looks as though you have something like this in your index.php:


<div class="storycontent">
  <div p align="right"><?php the_category_image(' '); ?></div>
  <?php the_content(); ?>
</div>

(granted, you may have supplied arguments to the_category_image()).

All you need is for it to look like this:


<div class="storycontent">
  <?php the_category_image(' '); ?>
  <?php the_content(); ?>
</div>

But in addition, you need to add this to your CSS file (most likely wp-layout.css):


.catimage {
  float:right;
}

If you want a bit of space around the image, add in something like margin: 2px; to that CSS block.

Jean-Pascal: Unfortunately the plugin wouldn’t do much for you in listing the categories by image outside the loop (on the sidebar like you want), except as code reference if you were hacking on your own. I’ve been meaning to modify wp_list_cats() to use images and hope to get around to it soon.

Scott, when trying to validate the HTML it get the recurring error

document type does not allow element “ul” here; missing one of “object”, “applet”, “map”, “iframe”, “button”, “ins”, “del” start-tag
..."><span class="catBut"><ul class="post-categories">

If I understand correctly an block-level element like

<ul>

is not allowed inside an inline element like

<span>

. However that how it is coded in the plugin’s template-functions-category.php file. Any idea?

Thanks

Plugin updated to v0.91

This update features:

* Now supports listing multiple image extensions
* Prepended all functions with “c2c_” to avoid potential function name collision with other plugins or future core functions… NOTE: If you are upgrading from an earlier version of the plugin, you’ll need to change your calls from the_category_image() to c2c_category_image()
* changed from BSD-new license to MIT license

Jean-Pascal:

Have you defined the first argument to the function? If you don’t, the function will automatically format using <ul>. You can specify something simple, like a single-quoted space as the first argument (the $seperator) :

<?php c2c_the_category_image(' '); ?>

(I’m using the new function name there, but the way the arguments work is the same with the version of the plugin you have.)

I just upgraded to the new version and am using the following code and it never returns an image, the image is called {category}.png and its in /wp-images/categories/ … anyone see anything wrong that I am missing?

it didnt add my code sooo uhhhh …
<?php c2c_the_category_image(', ', '', 'png', '/wp-images/categories/'); ?>

wow …

<?php c2c_the_category_image(', ', '', 'png', '/wp-images/categories/'); ?>

Plugin updated to v0.92

This release fixes a pair of typos that prevented properly referenced images from appearing on a site.

This should fix your problem, BoBB.

I may have missed it, but if I have only an image for one of the categories where a post has multiple categories, is there a way to display the other category names after that image in text form?

BB: You’re correct in that the plugin does not allow the intermingled display of category icons and category names. It should be easy enough to add though. If you want to try it out while I consider changing the plugin to support the request:

In the plugin’s file, there are two instances of this line:

if (empty($image_url)) { continue; }

Replace each of them with:

if (empty($image_url)) { $category_display = $category->cat_name; }

Note that the above change makes the plugin output the category name if no category image is present. If I add this to the plugin, I’d also add an option to control the behavior.

I really like this plug-in, and it’s relatively simple to implement. I have been having a slight problem with it, although it’s more an annoyance than a problem. Whenever I edit a category, or create a new one and click the “add category” button, it brings me to an error page which says this…

Warning: Cannot modify header information – headers already sent by (output started at /home/.odelia/lotraimant/greenkri.com/blog/wp-content/plugins/category-images.php:152) in /home/.odelia/lotraimant/greenkri.com/blog/wp-admin/categories.php on line 134

I tried returning to my wp-admin, and the changes had been implemented with no problem. It’s just annoying to be hit with that error message every time, then having to return to my wp-admin. Does that make sense?

Then again, it seems to create this error message when I post or edit a post….

Kristen: That error is common when there are spaces and/or other characters in the file before the <?php that should mark the very beginning of the code, and/or after the ?> that marks the very end of the code. Check out the category-images.php file and make sure there aren’t those spaces. If you continue to get the error try extracting the plugin file from the .zip.

Thanks for the help, that was the problem. One itty bitty space at the end. I should have known this was the answer too, because I’ve had a similar problem with something else.

Again, thanks.

Doesn’t work on PHP 5.

Lunks: I don’t run PHP 5 so I have to take your word for it. If you’ve figured out why, I’ll be glad to incorporate the changes.

Followed the directions for installation in WP 1.5, engaged, pasted the function, uploaded the images, added the CSS…works as promised.

im a bit confused. i want to actually put a different image in the header section for each category.
and im using 1.5 strayhorn.
what would i do differently?

Works like a charm, though I had to do a little hacking (I added an align=left to the img production code to get it inline with mytitle the way I wanted.)

One question, though. If you go to my site, you’ll see that the title text says “View all posts in Comics” but clicking doesn’t actually do that, since it seems to have cat=0 in the URI. My site is WP1.5 Strayhorn, is that the reason? Any suggestions on how to get it to do the right thing?

Thanks!
Dave

I´ve updated my local mirror from 1.2.2 to 1.5 Strayhorn, and the Category Images plugin still shows the proper images, but the link for ALL category images goes to /index.php?cat=0

Tech specs:
Mac OS X, 10.3.7
php 4.3.10

Any guesses?

I run php 5.0.1 on my hosting account will it work there?

[…] ss. Also many thanks to the folks who tested out comment stuff, critiqued design, and to this guy for his Category Images plugin that got me my topc icons back! […]

“I run php 5.0.1 on my hosting account will it work there? ”

Sadly it didn´t work there either. Any thoughts?

Thanks
Nick.

Nick: There is an updated version of the plugin in the dev.wp-plugins.org repository. I plan on officially announcing the update soon, but if you like you can try it out in advance by downloading it from here. Let me know if that is any better for you.

Thanks Scott. I´m using it now, but I am sorry to say that it seems acts the same as the previous one in my case, on both my local mirror, and on the remote server. May I be doing anything wrong?

All the category links are “cat=0” even though the link title shows correctly, e.g. I have more than 1 categories. Nothing unusual on the installation — ISP hosted on PHP 4.3.10, WP 1.5 S. I have the call just after:

In my index.php default theme. The call is:

Aesthetically I am very happy with this plugin! Would love to resolve this little bug.

All the category links are “cat=0″ even though the link title shows correctly, e.g. I have more than 1 categories. Nothing unusual on the installation — ISP hosted on PHP 4.3.10, WP 1.5 S. I have the call just after:

div class=”post”

In my index.php default theme. The call is:

?php c2c_the_category_image(‘ ‘, ”, ‘png’, ‘/wp-images/cat-images/’); ?

Aesthetically I am very happy with this plugin! Would love to resolve this little bug.

Hey Scott, just wanted to confirm the above (ie all categories go to 0). The thing is I’m not having that problem on my local server, which is running on a beta of WP1.5 but a pretty recent beta, my normal site is running the stable release.

Seriously thanks for all your work for the plugins you’ve done, brilliant work on all fronts.

Comments are closed.

function c2c_get_category_image($category, $image_extensions='png gif jpg' $image_dir='/wp-content/images/')

function c2c_the_category_image($seperator='', $parents='', $image_extensions='png gif jpg', $image_dir='/wp-content/images/', $use_name_if_no_image=false, $start_from='begin', $limit=999)

// In showing the post singularly, then use a larger image, else use a small image <?php if ($single) { c2c_the_category_image('', '', 'gif', '/wp-content/images/cat-images/large/'); } else { c2c_the_category_image('', '', 'gif', '/wp-content/images/cat-images/small/'); } ?>

// Show all images in a comma-separated line <?php c2c_the_category_image(', '); ?>

149 replies on “Plugin: Category Image(s)”

&lt;php the_category_image(', '); ?>

<?php the_category() ?>

<?php the_category_image(', ') ?>

<div class="storycontent"> <div p align="right"><?php the_category_image(' '); ?></div> <?php the_content(); ?> </div>

<div class="storycontent"> <?php the_category_image(' '); ?> <?php the_content(); ?> </div>

.catimage { float:right; }

<?php c2c_the_category_image(' '); ?>

<php the_category_image(', '); ?>