Wrapping WordPress Comment Avatars

1 Views

I’m currently making a WordPress theme and all is going swimmingly.

It’s responsive, but I seem to be having a problem with the avatars in the comments section. What I want to be able to do is wrap the avatars in a separate div in order to specify a width and take advantage of img { max-width: 100%; } . Currently it has siblings in the DOM so this I cannot do it on it’s current parent. One would assume that I would need a custom function in functions.php and then use the callback parameter in wp_list_comments?

Read More

Current output: 

    <div class="comment-author vcard">
       <img alt="" src="img_url" class="avatar avatar-74 photo">
       <cite class="fn">James</cite>
       <span class="says">says:</span>
</div>

Thanks.

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. The filter get_avatar will do. Note that this function is also pluggable, meaning that you can overwrite it with your own if needed.

    add_filter( 'get_avatar', 'b5f_get_avatar', 10, 5 );

function b5f_get_avatar( $avatar, $id_or_email, $size, $default, $alt )
{
    $avatar = '<div class="img-max-width">' . $avatar . '</div>';
    return $avatar;
}

    Here are the values received in each parameter:

    /**
 * [avatar] => <img alt='' src='http://0.gravatar.com/avatar/ETCETERA/....' class='avatar avatar-64 photo' height='64' width='64' />
 * [id_or_email] => 1
 * [size] => 64
 * [default] => http://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=64
 * [alt] => 
*/