Have you ever seen those small images located on posts and comment forms? Normally the image is a picture of the company or author of that post. Problem is, many sites require you to upload an image and then you have to keep track of them all.

That is where Gravatar comes in. They offer a free service that allows you to connect your email address with a global image that can automatically be displayed on all sites that support Gravatar images.

I am in the process of developing a much larger and feature packed version of Scriptplayground, which will be using a modified version of this script.

In this tutorial you will learn how to include Gravatar support for your members as well, so let's get started.

Here is the complete code, which will be explained in just a moment.

<?php

// The users email, passed to Gravatar
$usersEmail = "user@domain.com";

// A default avatar to load if Gravatar
// doesn't find one.
$defaultImage = "http://domain.com/default.png";

// The size of the image
$avatarSize = "50";

// Minimum rating for your site
// Possible values (G, PG, R, X)
$avatarRating = "G";

// Border around the image
$avatarBorder = "000000";

// URL for Gravatar
$gravatarURL = "http://www.gravatar.com/avatar.php?gravatar_id=%s
&default=%s&size=%s&border=%s&rating=%s";

$avatarURL = sprintf
(
	$gravatarURL, 
	md5($usersEmail), 
	$defaultImage,
	$avatarSize,
	$avatarBorder,
	$avatarRating
);

print "<img src=\"" . 
	$avatarURL . "\" width=\"" . 
	$avatarSize . "\" height=\"" . 
	$avatarSize . "\" />";

?>

The "key" that Gravatar uses is the email address of your member. So, start off by defining that in the $usersEmail variable. If Gravatar is unable to find an avatar for the user, a default one will be loaded from your site. The $defaultImage is where you need to provide an absolute path (domain name included).

The $avatarSize sets the width and height of the avatar. This variable is also passed to the Gravatar service, which ensures the correct size is returned.

Gravatar allows sites to limit the avatars that are loaded, based on a minimum rating system, similar to the one you find on movies and games. The $avatarRating variable can accept four values, ensuring the proper avatar is displayed on your site.

The last variable that is user customizable is $avatarBorder which will render a border around the image, based on the color you set. This value will accept and HTML color value such as 000000 for black or FF0000 for red.

The remaining bits of code are used to construct the Gravatar URL and print the response (the image) to the screen. The URL is constructed using sprintf(), with the variables you have previously assigned being passed in

As you can see the Gravatar service is meant to be easy to interact with. No advanced API's or lengthy documentation required to implement this in to your own web site. You could also wrap this into a class, allowing you to use it across many of your projects

I hope you have found this tutorial useful, and if you have any questions, please post a comment using the form below