How to add icon over specific thumb

Question

I wanted to do the following, and I know its possible, but I don't know how. I'm looking at in_category, but it doesn't make to much sense.

Basically what I want to do, for an example on my homepage, category page and similar posts are shown with title and a thumb.

And for this thumbs I want to add function like this

If post/thumb is inside category video -> add video icon above it. I guess with css I would need to position it, for an example at the bottom right corner.

Any ideas how to this

Answer 1

The implementation can be purely CSS, and depends on your specific HTML markup. However, the class you'll need to target is supplied by the post_class() template tag.

Let's say you have something like the following, basic markup:

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

    <div class="post-title">

        <img ... />
        <h1><?php the_title(); ?></h1>

    </div>

    <!-- Etc. -->

</div>

The post_class() template tag will output a category-based class, category-{name}, and also, category-{id}. So, you can target either one in your stylesheet:

.category-{name} .post-title img {}

or

.category-{id} .post-title img {}

It'll be specific to your markup, of course; but hopefully you get the idea.

Answer 2

You could do something with this, depending upon how many icons you wish to use.

http://codex.wordpress.org/Category_Templates#Different_Text_on_Some_Category_Pages

<?php if (is_category('video')) : ?>
  <img class="icon" src="img/video-icon.png" />
<?php elseif (is_category('music')) : ?>
  <img class="icon" src="img/music-icon.png" />
<?php else :   // Set a general icon used in any other instance ?>
  <img class="icon" src="img/general-icon.png" />  
<?php endif; ?>