Displaying Gravatar images with PHP

VIEW THE DEMO

DOWNLOAD THE SOURCE CODE

A big issue with web sites today is that they repeatedly ask you for the same information over and over again. You fill in your name, your email, upload a photo, invite some friends, blah, blah, blah. I must have run through this process 20 times.

Gravatar aims to solve at least a small part of this problem by providing a central location to manage an avatar image. You upload an image and register it against an email address, allowing web sites to display your avatar against any content that can be attributed to your email address. This can be used to provide an image against blog comments, or in place of yet another custom avatar in a site profile.

For web developers, displaying the Gravatar image is quite simple. Here we will use PHP to map an email address to a face.

The first thing you need is the email address, which will be supplied by the user. Hre we grab an email address from the URL email parameter, but you will probably get this from a database in your own application.

$email = $_GET["email"];

Next you need to convert the email address to an MD5 hash. PHP has the md5 function which makes this calculation easy.

$emailMD5 = md5($email);

Finally, the MD5 hash is used to create a URL where the image resides.

$gravitarURL = "http://www.gravatar.com/avatar/" . $emailMD5 . ".jpg";

If the user has not set up a Gravatar account, you can fall back onto a default image of your choice using the d parameter.

$gravitarURL = "http://www.gravatar.com/avatar/" . $emailMD5 . ".jpg?d=http%3A%2F%2Fwebdemos.sourceforge.net%2FPHP%2FGravitar%2Fgravatar-blank.jpg";

This URL is then used as the src attribute for an img element.

<img src="<?php print htmlspecialchars($gravitarURL); ?>"/>

Gravatar offers a number of additional options, which you can find here. You can return images of different sizes, as well as returning images with different classifications like g, pg, r, or x (matching movie classifications).

Gravatar frees web developers from having to manage avatar images. It also means that users aren’t forced to upload their avatar images over and over again. It's a convenient way to centralise avatar management.

Creating a Digg client with Adobe Flex in 10 steps

This tutorial steps you through the process of creating a Digg client with Adobe Flex.