Add Gravatars to your Site

Since WordPress 2.5 we have been able to add gravatars into our comments without the need for a plugin. Before this you’d need to use a plugin (or a bit of complex coding) to do the same job.

If you don’t know much about gravatars or why you would want them then read Kevin’s post on Why you should add Gravatars to your Blog. He briefly mentioned the new WP2.5 Gravatar tag, however I’ll go into its usage further.

The Gravatar Tag

The new tag to do this job is get_avatar();. It accepts a few parameters:

Author Email/ID

The ID or email of the author of the comment. Can also accept the full $comment data structure.

Size

The size to display the gravatar at. The default is 96px. (Optional)

Default

The default icon/image to show if no gravatar is found for the user. Usually the whole image path. (Optional)

An example of usage of this tag is:

<?php echo get_avatar($comment->comment_author_email, $size = '40', $default = 'http://www.domain.com/images/blank-gravatar.gif' ); ?>

This would then display a gravatar for the comment author’s email at a size of 40*40px. If no gravatar is found for the email address then it would display the blank-gravatar.gif image instead. The output of this would look similar to:

<img alt='' src='http://www.gravatar.com/avatar/pathcode' class='avatar avatar-40' height='40' width='40' />

There’s a variety of ways to display the gravatar on your comments, which I can’t really cover here, however a simple solution is to have it float to the right of the comment text, similar to how we have it here on Blogging Tips. Using the Classic theme as an example you’d need to edit your comments.php file, find the lines

<?php foreach ($comments as $comment) : ?>
<li id="comment-<?php comment_ID() ?>">
<?php comment_text() ?>

Insert the new gravatar code between the second and third line e.g.

<?php foreach ($comments as $comment) : ?>
<li id="comment-<?php comment_ID() ?>">
<?php echo get_avatar($comment->comment_author_email, $size = '40', $default = 'http://www.domain.com/images/blank-gravatar.gif' ); ?>
<?php comment_text() ?>

Then in your CSS you can add in the follow to float the gravatar to the right by targeting the class ‘avatar’ which is included in the output.

img.avatar {
float: right;
width: 40px;
margin: 0 0 5px 5px
}

Change the width to the width you’ve set for your gravatars.

Gravatar Settings

You can change the settings for your Gravatars in the WordPress Admin under Settings->Discussion. You’ve got the option to show or not show the Gravatars (they’re set to show by default, but of course you also need the above code to make it all work), and you can also choose the rating allowed as some people’s gravatars you may not deem suitable to have displayed on your site (such as those of an adult nature). ‘G’ rating is the safest to choose and ‘X’ rating allows anything and everything, so choose wisely!

Written by Sarah from Stuff By Sarah
Posted on June 22nd, 2008 and filed under Blogging
Do not forget to subscribe to our RSS feed for updates

7