I have implemented Gravatars in the comments for Wonko’s World.

If you have a Gravatar account already, make sure you use the email address your Gravatar is registered to for it to appear in the comments.

A Gravatar is a Globally Recognised Avatar which, in laymans terms, means a picture that you can use on Gravatar-enabled websites.  They are most commonly used on blogs and forums where you get a picture against your name or posts.

If you haven’t got a Gravatar, just pop over to Gravatar.com, register your email address and upload a picture to join in the fun.

I’ve made a small change to the standard implementation of Gravatars so that it displays a thumbnail in the post which expands as you hover over it like the example on the right.

I used Gravatar’s WordPress plugin to keep it simple (there are instructions for most platforms on the same page) and used CSS to make the Gravatar display as a thumbnail.  I added the following code to the comments.php file in WordPress to display the Gravatar:

<div style="float: left; padding-right: 5px;">
<img src="<?php gravatar("R", 80, "http://www.wonkosworld.co.uk/wordpress/wp-content/uploads/2007/08/nograv.PNG"); ?>" class="gravimg" />
</div>

The parameters of the gravatar function are as follows:

Rating
This is the maximum rating of the image that you will allow to be displayed.  These can be “G”, “PG”, “R” or “X”.

“G” is globally acceptable
“PG” is pretty safe but parental guidance is advised
“R” is for grown ups
“X” is filth

Size
This is the size of the image that’s displayed.  The lowest size you can specify is 1 and the highest is 80.  Gravatars are usually created at 80 pixels so 80 is the safest bet for a decent quality image and 40 for a thumbnail.

Default Gravatar
This is the location to a default image to be used for a Gravatar.  This image will be used if the email address specified doesn’t have a Gravatar associated with it or if the Gravatar is of a higher rating than you will accept.

Border Colour
This is the hex value of the border you want around the Gravatar.  I haven’t used this because I don’t want a border but if you wanted to use it, an example would be #FFFFFF (white) or #000000 (black).

I gave the image a class of “gravimg” for the CSS thumbnail … thing.  I added the following lines to the stylesheet:

.gravimg{height: 40px;}
.gravimg:hover{height: auto;}

You’ll notice that I’ve used height rather than width and there’s a very good reason for that – to make the image appear square, Gravatars are wider than they are high.  What these two lines of CSS do is tell the browser (Internet Explorer, Firefox, etc.) to display any element with the class of “gravimg” with a height of 40 pixels.  When you set the height of an image, the width is automatically scaled to retain the same ratio so an 80×80 image with the height set to 40 pixels would also be displayed with a width of 40 pixels.  The important thing is, the image that the gravatar function called in the code above is still 80 pixels high by (roughly) 80 pixels wide because the second line of CSS tells the browser that when the mouse is hovered over an element with the class of “gravimg” (in this case the Gravatar) it will be resized to “auto”.  As I haven’t used any other CSS to set size properties for images elsewhere in the stylesheet, “auto” will set the image size displayed to its actual size producing a mouseover effect.