WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] thumbnails with wp_list_categories? (25 posts)

  1. davidemorgan
    Member
    Posted 6 years ago #

    Hi, I've been working on this all day and can't find it or figure it out.

    I have thumbnails associated with categories and I'd like to show all categories. Seems like wp_list_categories would be the way to go. (2.3)

    I've named the category thumbnails by cat_ID. Here's what I have, and it doesn't work:

    $cats = wp_list_categories('title_li=&echo=0');
    foreach ((array)$cats as $cat) {
    $catdesc = $cat->category_description;
    echo '<li><a href="'. get_category_link($cat).'" title="'. strip_tags($catdesc) .'">'. $cat->cat_name . '</a><a href="' . get_category_link($cat) . '" title="'. strip_tags($catdesc) .'"><img src="/images/' . $cat->cat_ID . '.jpg"
    alt="' . $cat->cat_name . '" /></a></li>'; }

    Any suggestions?

  2. Jauhari
    Member
    Posted 6 years ago #

    Why WP Support really slow to cover some problem from members?

  3. davidemorgan
    Member
    Posted 6 years ago #

    I'm still having no luck despite trying different things to get this array to work. Does anyone see what the problem is?

    Thanks in advance.

  4. moshu
    Member
    Posted 6 years ago #

    I am not a coder, so I can't tell what's wrong (if anything).
    Did you see this?
    Template_Tags/get_the_category#Show_Category_Images

  5. davidemorgan
    Member
    Posted 6 years ago #

    Yes, the problem is that get_the_category works within the loop, so it will only show the cats of the current posts, not all cats.

    Unless there's a way around it, and there might be if I use a multiple loop. I'd rather not use a multiple loop as it messes with one of my plugins. I'm not a coder either.

    Seems like, if there's been an echo parameter added to wp_list_categories, should be possible to do something with it in an array. I'm bummed I can't figure it out. Probably it's something simple.

    Thank you for the suggestion, though.

    Any more ideas? Keep 'em coming.

  6. Kafkaesqui

    Posted 6 years ago #

    $cats will be returned as a string, not an array, so:

    foreach ((array)$cats as $cat) {

    will not work. Instead you should use the 'internal' WordPress function get_categories():

    $cats = get_categories();

  7. davidemorgan
    Member
    Posted 6 years ago #

    Wonderful. Thank you. I didn't know about this one -- not on the category template tags list.

    Here's the documentation if anyone else has been looking for this sort of thing:

    http://codex.wordpress.org/Function_Reference/get_categories

    Thank you, Kafkaesqui!

  8. davidemorgan
    Member
    Posted 6 years ago #

    Here's the code in case anyone else wants to do this:

    <?php
    $cats = get_categories();
    foreach ((array)$cats as $cat) {
    $catdesc = $cat->category_description;
    echo '<li><div style="float:right;"><a href="'. get_category_link($cat).'" title="'. strip_tags($catdesc) .'">'. $cat->cat_name . '</a></div><a href="' . get_category_link($cat) . '" title="'. strip_tags($catdesc) .'"><img src="/images/' . $cat->cat_ID . '.jpg" alt="' . $cat->cat_name . '" /></a></li>';
    } ?>

    This works well if you have an image for every category.

    The only problem now is making it check to see if the image exists first before trying to echo an image that might not be found. I tried the if (file_exists()) but it couldn't find the images that in fact exist, so nothing displayed.

    An easier way to do it would be to use the include or exclude parameters of get_categories, but I'd like to add this to the functions file of my theme to 'set and forget.'

    Any ideas?

  9. davidemorgan
    Member
    Posted 6 years ago #

    Here's the final product. Put the category image files in your theme's image folder:

    <?php
    $cats = get_categories();
    foreach ((array)$cats as $cat) {
    $catdesc = $cat->category_description;
    $catnumber = $cat->cat_ID;
    $photofile = (TEMPLATEPATH . '/images/' . $cat->cat_ID. '.jpg');
    if (file_exists($photofile)){
    echo '<li><div style="float:right;"><a href="'. get_category_link($cat).'" title="'. strip_tags($catdesc) .'">'. $cat->cat_name . '</a></div><a href="' . get_category_link($cat) . '" title="'. strip_tags($catdesc) .'"><img src="' . get_bloginfo ('template_url') . '/images/' . $cat->cat_ID. '.jpg" alt="' . $cat->cat_name . '" /></a></li>';
    } else echo '<li><div style="float:right;"><a href="'. get_category_link($cat).'" title="'. strip_tags($catdesc) .'">'. $cat->cat_name . '</a></div>';
    } ?>
  10. Kafkaesqui

    Posted 6 years ago #

    Provide an absolute (or full) directory path to the image on the server -- not its url -- with file_exists():

    <?php
    $image_path = '/users/username/www-root/images/';
    $cats = get_categories();
    foreach ((array)$cats as $cat) {
    	$catdesc = attribute_escape(strip_tags($cat->category_description));
    	$image = $cat->cat_ID . '.jpg';
    	if( file_exists($image_path . $image) )  {
    		$cat_img = '<a href="' . get_category_link($cat) . '" title="'. $catdesc .'"><img src="/images/' . $image . '" alt="' . $cat->cat_name . '" /></a>';
    	} else {
    		$cat_img = '';
    	}
    	echo '<li><div style="float:right;><a href="'. get_category_link($cat).'" title="'. $catdesc .'">'. $cat->cat_name . '</a></div>' . $cat_img . '</li>';
    }
    ?>

    If you're unsure what that path is, a quick way to find out is to create a PHP document with the following three lines (and nothing more):

    <?php
    echo dirname(__FILE__);
    ?>

    Name it something like path.php, upload it to your site's root directory, and access it through your browser.

  11. davidemorgan
    Member
    Posted 6 years ago #

    That works. Thank you so much for your time.

  12. Samuel Wood (Otto)
    Tech Ninja
    Posted 6 years ago #

    Kafkaesqui: No, he was right the first time. TEMPLATEPATH is the server path to the current template directory, not the URI to that directory.

    So file_exists(TEMPLATEPATH.'/images/whatever.png'); is perfectly valid and correct.

  13. Kafkaesqui

    Posted 6 years ago #

    Otto, I was basing my stuff on the original code, which has:

    <img src="/images/' . $cat->cat_ID . '.jpg"

    My last reply was written/sent before ever seeing the "final product." But you're correct that if one has the images directory within their active theme's directory, using the WordPress constant TEMPLATEPATH is an easy way to point to it.

  14. richarduk
    Member
    Posted 6 years ago #

    OK, I need some help on this.

    I've adapted it, because it wasn't doing what I wanted, plus the HTML wasn't validating.

    What I want is for an image to show on the home page for each category.

    What I've got is a bunch of code that can be placed anywhere outside the Loop. It does what I want - mostly.

    If there's no image for a category, it echoes a default image.

    If there IS an image for a category, it STILL echoes that default image. It's not meant to. That's where I've got stuck.

    I THINK the line causing the problems is if( file_exists($image_path ."/images/". $image) )

    I've checked by using echo $image_path."/images/".$image; and that comes out fine with the url to the image.

    Here's the code, and below it is the output.

    <?php
    $image_path = get_bloginfo('stylesheet_directory');
    $cats = get_categories();
    $count=1;
    foreach ((array)$cats as $cat) {
    	$catdesc = attribute_escape(strip_tags($cat->category_description));
    	$image = $cat->category_nicename .'.jpg';
    	if( file_exists($image_path ."/images/". $image) )  {
    		$cat_img = '<div class="category-image" id="cat-image-'.$count.'"'.'><a href="' . get_category_link($cat) . '" title="'. $catdesc .'"><img class="image-for-category" src="' . $image_path . '/images/' . $image . '" alt="' . $cat->cat_name . '" /></a></div>'."\n\n";
    	} else {
    		$cat_img = '<div class="category-image" id="cat-image-'.$count.'"'.'><a href="' . get_category_link($cat) . '" title="'. $catdesc .'"><img class="image-for-category" src="' . $image_path . '/images/default-category-image.jpg' .  '" alt="' . $cat->cat_name . '" /></a></div>'."\n\n";		   		/*If no category image, display a default image called  default-category-image.jpg*/
    	}
    	echo  $cat_img ;
    	$count++;
    }
    ?>

    And here's the output:

    <div class="category-image" id="cat-image-1"><a href="http://www.mysite.com/index.php/category/fish/" title=""><img class="image-for-category" src="http://www.mysite.com/wp-content/themes/whatever/images/default-category-image.jpg" alt="fish" /></a></div>
    
    <div class="category-image" id="cat-image-2"><a href="http://www.incenseheaven.com/there/index.php/category/elephants/" title=""><img class="image-for-category" src="http://www.incenseheaven.com/there/wp-content/themes/whatever/images/default-category-image.jpg" alt="elephant" /></a></div>
    
    etc.
  15. Kafkaesqui

    Posted 6 years ago #

    richarduk, if you scroll up to Otto's last reply, you'll see a solution there:

    $image_path = TEMPLATEPATH;

    Most likely file_exists() does not support urls on your server. In that case, you always want to provide the absolute directory path on the server to your theme directory (which the constant TEMPLATEPATH provides), and not the url.

  16. Samuel Wood (Otto)
    Tech Ninja
    Posted 6 years ago #

    No, that won't fix his problem either, because he's using the $imagepath in the IMG SRC as well.

    What he doesn't seem to understand is that there's two paths to the file to be concerned about.

    There's the actual filepath, which will be TEMPLATEPATH.'/images/whatever.jpg' . This is what will be used with file_exists.

    Then there's the URL to that image. This will be output by something like this:
    <img src="<?php bloginfo('stylesheet_directory'); ?>/images/whatever.jpg" />

    The two things are different and must be treated as such.

  17. Kafkaesqui

    Posted 6 years ago #

    {Note to self: Always scroll through the entire code listing... }

  18. richarduk
    Member
    Posted 6 years ago #

    Okay, thanks, I'll work with that. I hadn't realised TEMPLATEPATH was necessary.

    One other thing - how to get this to show for only subcategories of a category.

    That way I can have only images from the subcatgories of a category on the main page.

    Where do I begin ?

    Many thanks.

  19. richarduk
    Member
    Posted 6 years ago #

    Doesn't using TEMPLATEPATH give too much personal information away? The path to the image is then output as something like:

    "<img src="/home/username/public_html/mysite.com/wp-content/themes/whatever/images/image.jpg" />

    where username is used to log into Control Panel?

  20. richarduk
    Member
    Posted 6 years ago #

    OK, sorted, I think.

    What you can use this for.

    Supposing that you have an ecommerce site. On your front page index.php you want to show images of all your categories. For example, if you're selling fruit trees you can have an image of a plum tree, an apple tree, and a pear tree.

    These images are smallish, and floated left (say) with a nice padding, so that the front page has a clean look with pictures of all your main categories in the main body of the page.

    Clicking on the image of an apple tree will take you to another page (category.php) with images of a russets apple tree, a cox's apple tree, a golden delicious apple tree (basically just smallish images in posts, with no text, also floated left, say). You can take this a lot further, but that's all I wanted to achieve for the moment.

    This would be ideal for clients wanting to manage their own ecommerece sites even with very little HTML or WP expertise. All they need to do is upload appropriate images to the theme images directory. Everything else should be manageable from within the Admin Panel.

    You could do a LOT more with this, but this is a good starting point.

    How it's done.

    Create a category. Get its ID. Add subcategories. It's the subcategories that will be shown on the homepage index.php

    You can still have sidebar links to various categories using `<?php wp_list_categories('child_of=1'); ?>
    <?php wp_list_categories('child_of=3'); ?>
    <?php wp_list_categories('child_of=6'); ?>`

    etc.

    Use the main category ID in the following code. Place it outside of The Loop e.g. bang in the middle of the page.

    Hope this works for other people. If not, back to the drawing board.

    It's not as sophisticated as the previous examples i.e. there's no default image, but hopefully it's more solid.

    <?php
    $image_path = get_bloginfo('stylesheet_directory');
    $cats = get_categories('child_of=22');
    $count=1;
    foreach ((array)$cats as $cat) {
    	$catdesc = attribute_escape(strip_tags($cat->category_description));
    	$image = $cat->category_nicename .'.jpg';
    		$cat_img = '<div class="category-image" id="cat-image-'.$count.'"'.'><a href="' . get_category_link($cat) . '" title="'. $catdesc .'"><img class="image-for-category" src="' . $image_path . '/images/' . $image . '" alt="' . $cat->cat_name . '" /></a></div>'."\n\n";
    	echo  $cat_img ;
    	$count++;
    }
    ?>

    And the output is like this:

    <div class="category-image" id="cat-image-1"><a href="http://www.mysite.com/index.php/category/apples/" title=""><img class="image-for-category" src="http://www.mysite.com/wp-content/themes/whatever/images/apples.jpg" alt="apples" /></a></div>
    
    <div class="category-image" id="cat-image-2"><a href="http://www.mysite.com/index.php/category/pears/" title=""><img class="image-for-category" src="http://www.mysite.com/wp-content/themes/whatever/images/pears" alt="pears" /></a></div>

    Note that you can use nice names e.g. the slug that describes your category. So the slug for apple trees will by default be apple-trees, but if you choose can simply be apples. (Choose your slug when adding subcategories). Name your images after these 'slugs' e.g. apples.jpg

  21. Samuel Wood (Otto)
    Tech Ninja
    Posted 6 years ago #

    Doesn't using TEMPLATEPATH give too much personal information away?

    No, because you don't use it on the IMG tags. You only use it for the file_exists check. For the IMG tags you use the stylesheet_directory from bloginfo.

    That's how you get a default image to work, you do a file_exists on the TEMPLATEPATH.'/images/'.$category.'.jpg'. See?

    The file_exists function won't work on a URL. But it will work on the full internal path.

    In other words, you have two paths to the same image. One you check, with file_exists, the other you output to the browser in the img tag. Get it?

  22. richarduk
    Member
    Posted 6 years ago #

    Ahh....

    Live and learn. :-)

    One thing I came across when wandering around the web trying to figure this out was that file_exists doesn't always work i.e. it's not bullet proof, which is why I decided to drop that.

    P.S. I should have added that I'm designing this for a publicly released theme.

  23. richarduk
    Member
    Posted 6 years ago #

    OK, this might have been an exercise in futility. It works, but it's not QUITE flexible enough. You get a front page (say) of images linked to a category page of posts, and underneath every image there's a text link to that same category page of posts.

    Might be better to integrate ecommerce templates into it instead.

    Anyhow, here's the code if anyone bumps into this in the future, and underneath it is the output.

    <?php
    $image_path = (TEMPLATEPATH);
    $image_url=get_bloginfo('stylesheet_directory');
    $cats = get_categories('child_of=22');
    $count=1;
    foreach ((array)$cats as $cat) {
    	$catdesc = attribute_escape(strip_tags($cat->category_description));
    	$image = $cat->category_nicename .'.jpg';
    	if( file_exists($image_path .'/images/'. $image) )  {
    		$cat_img = '<div class="category-image" id="cat-image-'.$count.'"'.'><a href="' . get_category_link($cat) . '" title="'. $catdesc .'"><img class="image-for-category" src="' .$image_url. '/images/' . $image . '" alt="' . $cat->cat_name . '" /></a><p class="category-image-description"><a href="' . get_category_link($cat) . '" title="'. $catdesc .'">'.$catdesc.'</a></p></div>'."\n\n";
    	} else {
    		$cat_img = '<div class="category-image" id="cat-image-'.$count.'"'.'><a href="' . get_category_link($cat) . '" title="'. $cat->category_nicename .'"><img class="image-for-category" src="' . $image_url. '/images/default-category-image.jpg' .  '" alt="' . $cat->cat_name . '" /></a><p class="category-image-description"><a href="' . get_category_link($cat) . '" title="'. $catdesc .'">'.$cat->category_nicename.'</a></p></div>'."\n\n";
    	}
    	echo  $cat_img ;
    	$count++;
    }
    ?>
    image+description
    image+NO description
    NO image + description
    
    <div class="category-image" id="cat-image-1"><a href="http://www.mysite.com/index.php/category/fruit/apples/" title="We love apple trees!  "><img class="image-for-category" src="http://www.mysite.com/wp-content/themes/whatever/images/apples.jpg" alt="apple-lovers" /></a><p class="category-image-description">
    <a href="http://www.mysite.com/index.php/category/fruit/apples/" title="We love apple trees!  ">
    We love apple trees!  </a></p></div>
    
    <div class="category-image" id="cat-image-2"><a href="http://www.mysite.com/index.php/category/fruit/pears/" title=""><img class="image-for-category" src="http://www.mysite.com/wp-content/themes/whatever/images/pears.jpg" alt="pear-lovers" /></a><p class="category-image-description">
    <a href="http://www.mysite.com/index.php/category/fruit/pears/" title="">
    </a></p></div>
    
    <div class="category-image" id="cat-image-3"><a href="http://www.mysite.com/index.php/category/fruit/plums/" title="plums"><img class="image-for-category" src="http://www.mystie.com/wp-content/themes/whatever/images/default-category-image.jpg" alt="plum-lovers" /></a><p class="category-image-description">
    
    <a href="http://www.mysite.com/index.php/category/fruit/plums/" title="everyone loves plum trees">
    plums</a></p></div>
  24. Troy Dean
    Member
    Posted 6 years ago #

    Hi Guys,

    here is the code I have used to show category images on my front page. As you can see I have limited the results to three categories only. I am wondering if there is way to order the categories randomly so a different set of three show up each time the page is loaded?

    <?php
    $cats = get_categories('orderby=count&number=3&order=asc');
    foreach ((array)$cats as $cat) {
    $catdesc = $cat->category_description;
    echo '<a href="' . get_category_link($cat) . '" title="'. strip_tags($catdesc) .'"><img src="' . get_bloginfo ('template_url') . '/images/' . $cat->slug. '.png" alt="' . $cat->cat_name . '" class="front-img" /></a>';
    }
    ?>

    Regards,
    Troy

  25. lilqhgal
    Member
    Posted 6 years ago #

    Is this not compatible with 2.5+ or is it perhaps something in my theme file? Any of the above examples return a Catchable fatal error -- Object of class stdClass could not be converted to string in /home/USER/public_html/wordpress/wp-includes/category-template.php on line 31

    Any ideas?

Topic Closed

This topic has been closed to new replies.

About this Topic