Adding class to gravatar img in wordpress

Question

I've been trying to use get_avatar to display the author's gravatar under each post in wordpress template with applied class but I couldn`t find a way to add class="pic-2" to gravatar image code or even changing gravatar heigth and width to 100px and 77px respectively

<?php echo get_avatar( get_the_author_meta('ID'), 32 ); ?>

Any help guys ??

Answer 1

I think the best way to handle this would be to use a filter, rather than using jQuery as George suggests. You would simply add this to your theme's functions.php file.

add_filter('get_avatar','add_gravatar_class');

function add_gravatar_class($class) {
    $class = str_replace("class='avatar", "class='avatar pic-2", $class);
    return $class;
}

*Note, I've not tested this, but believe it will work. See this thread for more info.

Answer 2

Check out the WordPress Codex for more info:

http://codex.wordpress.org/Using_Gravatars

For the size, try wrapping the second parameter like so:

<?php echo get_avatar( get_the_author_meta('ID'), $size = '96' ); ?>

The default html output is like so:

<img alt='' src='http://gravatarurl_or_default' class='avatar avatar-$size' height='$size' width='$size' />

You can style the default class 'avatar' in place of 'pic-2'. If you still want to add a class , you can do it via javascript like so:

$("img[class='avatar']").addClass("pic-2");

Hope this helps! : )

Answer 3

If @Ryan answer (marked as solution) does'nt work for you, try to change

add_filter('get_avatar','add_gravatar_class');

function add_gravatar_class($class) {
    $class = str_replace("class='avatar", "class='avatar pic-2", $class);
    return $class;
}

into

add_filter('get_avatar','add_gravatar_class');

function add_gravatar_class($class) {
    $class = str_replace('class="avatar', 'class="avatar pic-2', $class);
    return $class;
}

This start's work for me after replace " with '.

Sorry that I didn't write this as a comment to that answer, but I don't have 50 reputation to comment other posts.

Answer 4

Another way to do this for future searchers, very simple string manipulation which is probably a bit safer if they change the function in the future e.g. it'll likely always have a 'class'.

    $grvimg = get_avatar('email address', 200);
    $grvimg = explode("class='", $grvimg);
    $grvimg[1] = 'your-class ' . $grvimg[1];
    $grvimg = $grvimg[0] . $grvimg[1];
    echo $grvimg;