Snippets → WordPress → Display Image Next To Each Tag

Display Image Next To Each Tag

Chris Coyier on 
<?php $posttags = get_the_tags(); // Get articles tags $home = get_bloginfo('url'); // Get homepage URL // Check tagslug.png exists and display it if ($posttags) { foreach($posttags as $tag) { $image = "/images/tag-images/$tag->slug.png"; if (file_exists("images/tag-images/$tag->slug.png")) { echo '<a href="' . $home . '/tag/' . $tag->slug . '" /><img title="' . $tag->name . '" alt="' . $tag->name . '" src="' . $image . '" /></a>'; // If no image found, output something else, possibly nothing. } else { echo '<p>Not found</p>'; } } } ?>

This code belongs inside the loop. It will look in a specific directory for any images that match the slugs of article tags, display them and link them to the relevant tag archive.

Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

Comments

  1. TeMc
    Permalink to comment#

    Is there a reason you’re not using $image in the file_exists-call ?

    Reply
  2. Vic Maine
    Permalink to comment#

    Howdy, to whomever posted this, this is AWESOME, a phenomenal time-saver.

    However, for anyone trying to use this that isn’t a wordpress mastermind, you may be having trouble getting this to work on your wordpress site because of the directory structure.

    This code below works. It’s the same as his code above but finds your ‘uploads’ directory for you (already build into the code copy/paste this exactly)… (oh yeah, btw, I changed it from .png to .jpg, you an switch back if needed obviously).

    NOTE: My ‘home’ & ‘uploads’ directories are exactly where they were when I loaded wordpress (ie, wp-content/uploads) so if you have moved yours (as wp allows you to do) then I can’t promise anything. I think it might still work in that situation, but not sure (I’m fakin’ my way through this too).

    ALSO (if you don’t totally understand what this does):

    If you name an image the same as the tag you want to associate it with (ie, tag-slug = tag-slug.jpg … then this code will find that image in your ‘wp-content/uploads’ folder (ie, the same folder wp media library currently uses) and associate it with that tag so that you can display it in your loop next to any articles matching that tag.

    Otherwise you would have to use one of those tag-to-image type plugins and do each tag individually. So now, instead, you can just FTP a bunch of images into your wp-content/uploads folder (named properly, as described above) and this will match them up for you automatically. It’s awesome saves a ton of time and headache (much much much appreciation to the poster!).

    Note:

    In my case, I’m using ‘tags’ for ‘source authors’ (the author of an external article I’m sharing as a link post), so I only have one(1) tag per article.

    I don’t know what will happen if you have multiple tags (both with corresponding images in the uploads folder).

    Okay, so here you go, no more beating your head trying to figure out why you can’t get this thing working….

    If you want to see a working example:

    I’m using this on my site I’m currently just in the process of building (feedweek.com linked in my author name I would assume). I’m using it on all the main feeds and in the right-hand-sidebar (whereever you see photos of bloggers next to posts). The site is live btw, but not quite ready for prime-time, so it may be a mess if you stop by at some inopportune time.

    This is the Working code:

    <div class="image_wrap"> <?php $posttags = get_the_tags(); // Get articles tags $home = get_bloginfo('url'); // Get homepage URL // Check if tag-slug.jpg exists and display it. if ($posttags) { foreach($posttags as $tag) { $upload_dir = wp_upload_dir(); $image_relative_path = "/" . $tag->slug .".jpg"; $image_path = $upload_dir['basedir'] . $image_relative_path; $image_url = $upload_dir['baseurl'] . $image_relative_path; if (file_exists($image_path)) { echo '<a href="' . $home . '/' . $tag->slug . '" /><img title="' . $tag->name . '" alt="' . $tag->name . '" src="' . $image_url . '" /></a>'; // If no image found, output something else. } else { ?> <img src="<?php bloginfo('template_directory'); ?>/img/default-author.jpg" title=" image missing " /> <?php } } } ?> </div><!-- #image_wrap -->

    vic maine

    Reply
  3. Vic Maine
    Permalink to comment#

    EDIT:

    I use a plugin to get rid of the tag & category bases from my url’s so the code above has those left out of the url for the anchor link to the tag page.

    If you still have /tag/ in your tag page url’s you will have to change this…

    <a href="' . $home . '/' . $tag->slug . '" /><img title="' . $tag->name . '" alt="' . $tag->name . '" src="' . $image_url . '" /></a>

    to this …

    <a href="' . $home . '/tag/' . $tag->slug . '" /><img title="' . $tag->name . '" alt="' . $tag->name . '" src="' . $image_url . '" /></a>

    So then it should look like this…

    If Your Site Has /tag/ in your url’s to your tag pages, use this code instead of the one I put in my first comment:

    <div class="image_wrap"> <?php $posttags = get_the_tags(); // Get articles tags $home = get_bloginfo('url'); // Get homepage URL // Check if tag-slug.jpg exists and display it. if ($posttags) { foreach($posttags as $tag) { $upload_dir = wp_upload_dir(); $image_relative_path = "/" . $tag->slug .".jpg"; $image_path = $upload_dir['basedir'] . $image_relative_path; $image_url = $upload_dir['baseurl'] . $image_relative_path; if (file_exists($image_path)) { echo '<a href="' . $home . '/tag/' . $tag->slug . '" /><img title="' . $tag->name . '" alt="' . $tag->name . '" src="' . $image_url . '" /></a>'; // If no image found, output something else. } else { ?> <img src="<?php bloginfo('template_directory'); ?>/img/default-author.jpg" title=" image missing " /> <?php } } } ?> </div><!-- #image_wrap -->
    Reply
  4. Vic Maine
    Permalink to comment#

    BTW, it’s really nice that you don’t have to create an account here in order to leave comments. I probably wouldn’t have bothered leaving these fixes if I had needed to create an account and login to post comments…

    … all that’s needed is just a name and email address! nice.

    Reply
  5. Silvan
    Permalink to comment#

    This is working really nicely. Now, how do I adapt this code so it shows the tag image on the tag archive page? It would be great if that template would pull in the same image, so I only have to create a new images once (rather than having to add it manually to the tag description + uploading it to the folder)?

    I tried the code above by dropping it into archive.php, but I get the feeling it’s not picking up the ‘tag’ on that page.

    Reply
  6. Vic Maine
    Permalink to comment#

    @Silvan, this works anywhere. I’m using it as-is in index.php, archive.php, single.php and even in my sidebars on every page of my site… pop it in there just like you did in your index.php.

    Reply
  7. whatsQ
    Permalink to comment#

    I added your code , but I see it is looking in my Themes instead on upload directory of WP:
    I have few file for test as :
    http://whatsq.com/wp-content/uploads/2015/05/Programming.png

    but I see ONLY ELSE PART OF CODE is getting executed.
    http://whatsq.com/wp-content/uploads/2015/04/pen.png (I changed it )

    Could you please tell me what is missing from my side .

    http://www.whtasq.com

    Thanks.
    Raj

    Reply
  8. whatsQ
    Permalink to comment#

    Code is kept in the last side bar

    Reply

Leave a Reply