Title: Conditional Image for comments.
Last modified: August 19, 2016

---

# Conditional Image for comments.

 *  Resolved [popper](https://wordpress.org/support/users/julialasarte/)
 * (@julialasarte)
 * [17 years, 2 months ago](https://wordpress.org/support/topic/conditional-image-for-comments/)
 * Hi there,
 * I’m designing a custom theme for a friend, and he wants the talking-bubble icon
   I put next to “% Comments” to change according to the amount of comments.
 * Like this:
 * If a post has 1 comment, you would see [image.gif] “1 Comment”
 * If the post has more than 10 comments, you’d see [image2.gif] “15 Comments”
 * If the post has more than 50 comments, you’d see [image3.gif] “51 Comments”
 * I tried a couple of things, but only got as far as:
 * `<?php comments_popup_link(__('<img src="0.gif">'), __('<img src="1.gif">'),>
   __('<img src="%.gif"> '));?>`
 * Which is no good at all, since I don’t need an image for each number.
 * If anyone could help me, that would be great. If you want to refer me to a codex
   page or an older thread that would be appreciated too. I searched, but couldn’t
   find anything besides the above piece of code.
 * Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)

 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [17 years, 2 months ago](https://wordpress.org/support/topic/conditional-image-for-comments/#post-1042543)
 * Why not use a span class instead:
 * `<?php comments_popup_link( 'No comments yet', '<span class="one">1 comment</
   span>', '<span class="lots">% comments</span>', 'comments-link', 'Comments are
   off for this post'); ?>`
 * Then use CSS to add images to the relevant classes.
 *  Thread Starter [popper](https://wordpress.org/support/users/julialasarte/)
 * (@julialasarte)
 * [17 years, 2 months ago](https://wordpress.org/support/topic/conditional-image-for-comments/#post-1042573)
 * Thanks esmi!
 * But, and correct me if I’m wrong, besides using a span class instead of an image,
   the end result is about the same, isn’t it? I’d have an image for 1 comment, 
   an another for more than one. What I’m trying to do is an image for 1 comment,
   another image if the post has more than some number of comments, another if it
   has more than another number.
 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [17 years, 2 months ago](https://wordpress.org/support/topic/conditional-image-for-comments/#post-1042599)
 * Ah! You’re right. All my solution does is move the images into the CSS.
 * I don’t know of any method to apply images, or CSS, to specific numbers of comments
   without re-writing `comments_popup_link`.
 *  Thread Starter [popper](https://wordpress.org/support/users/julialasarte/)
 * (@julialasarte)
 * [17 years, 2 months ago](https://wordpress.org/support/topic/conditional-image-for-comments/#post-1042608)
 * Thanks anyway, esmi! Anyone else got another idea?
 *  Thread Starter [popper](https://wordpress.org/support/users/julialasarte/)
 * (@julialasarte)
 * [17 years, 2 months ago](https://wordpress.org/support/topic/conditional-image-for-comments/#post-1042610)
 * I managed to implement a sorta solution. I’m sure it isn’t very elegant, and 
   if someone has a better idea i’ll gladly try it ;).
 * Goes like this. Right after
 *     ```
       <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
       ```
   
 * I added:
 * `<?php $com_num = get_comments_number( $id ); ?>`
 * to know the number of comments on a post.
 * then, I styled the comment bubble like this:
 *     ```
       <?php if($com_num < 5):?><span class="comments_number"><?php comments_popup_link(__('0',TEMPLATE_DOMAIN), __('1',TEMPLATE_DOMAIN), __('%',TEMPLATE_DOMAIN)); ?></span><?php endif;?>
   
       <?php if( $com_num >= 5 & $com_num < 25):?><span class="comments_more"><?php comments_popup_link(__('%',TEMPLATE_DOMAIN)); ?></span><?php endif;?>
   
       <?php if($com_num > 20):?><span class="comments_more_more"><?php comments_popup_link(__('%',TEMPLATE_DOMAIN)); ?></span><?php endif;?>
       ```
   
 * Now, the only issue I see is that when the comments are more than 0 i get “# 
   Comments”, even when i left the ‘%’ alone, ’cause I just want the number. Any
   idea why that is?
 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [17 years, 2 months ago](https://wordpress.org/support/topic/conditional-image-for-comments/#post-1042631)
 * The `TEMPLATE_DOMAIN` bit has me completely lost but I can see you’re missing
   a second ampersand on that middle `if` statement. I also realised that there 
   was a way to avoid that span markup. `comments_popup_link` has an inbuilt parameter
   to add a class directly to the link. So you could use:
 *     ```
       <?php
       $com_num = get_comments_number( $id );
       if($com_num <5) $class='comments_number';
       elseif($com_num >= 5 &amp;&amp; $com_num < 25) $class='comments_more';
       else $class='comments_more_more';
       comments_popup_link( '0', '1', '%', $class , 'Comments are off for this post');
       ?>
       ```
   
 * Not sure if that helps
 *  Thread Starter [popper](https://wordpress.org/support/users/julialasarte/)
 * (@julialasarte)
 * [17 years, 2 months ago](https://wordpress.org/support/topic/conditional-image-for-comments/#post-1042639)
 * It helps, thanks! Works perfectly now. Thanks again for your help, esmi. I’ll
   mark this as resolved.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Conditional Image for comments.’ is closed to new replies.

## Tags

 * [Comments](https://wordpress.org/support/topic-tag/comments/)
 * [comments number](https://wordpress.org/support/topic-tag/comments-number/)
 * [php](https://wordpress.org/support/topic-tag/php/)
 * [theme-design](https://wordpress.org/support/topic-tag/theme-design/)

 * 7 replies
 * 2 participants
 * Last reply from: [popper](https://wordpress.org/support/users/julialasarte/)
 * Last activity: [17 years, 2 months ago](https://wordpress.org/support/topic/conditional-image-for-comments/#post-1042639)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics