Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

Display Image Next To Each Tag

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

Comments

  1. TeMc
    Permalink to comment#

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

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

  3. 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 -->
    
    
    
  4. 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.

  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.

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

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```