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 = "http://cdn.css-tricks.com/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 ?

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".