Categories
Package/plugin/module WordPress

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:
  1. 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.
  2. Activate the plugin from your WordPress admin ‘Plugins’ page.
  3. 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).
  4. 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(', '); ?>

Related Links:
  • WordPress Support Forums announcement of Category Image(s)
Release Log:
  • 17 May 2005: v1.2 released — Compatibility fix for WP1.5.1
  • 23 Mar 2005: v1.1 released — Same as v1.0 but compatible with WP1.5+
    • Change to accommodate new get_category_link() arguments
  • 23 Mar 2005: v1.0 released — Last version compatible with WP1.2. Changes include:
    • Added argument $use_name_if_no_image=false to allow showing cat name if no image was located
    • Tweaks to update c2c_the_category_image() with changes made to the_category() (mostly rel= stuff)
    • Changed default category images directory from /wp-images/ to /wp-content/images/
  • 12 Oct 2004 : v0.92 released — Fixed a pair of typos that prevented images from showing
  • 23 Sep 2004 : v0.91 released —
    • 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
  • 27 Jun 2004 : v0.9 released to the public
Copyright & Disclaimer:

Copyright (c) 2004-2005 by Scott Reilly (aka coffee2code)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Acknowledgements:
This plugin is essentially an extension of WordPress’s core the_cagetories() function, so the core developers are responsible for a majority of the code present in the function.

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

[…] 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

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:

&lt;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.

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?

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?

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….

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/post.php on line 342

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.

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?

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.

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.