How to use Gravatar on your Web Application

This will be a very small post but still I think you will appreciate it. Imagine you have a nice Web Application with a small user component, and you want to add the possibility of showing a user’s photo using Gravatar.

Before the How to, What is Gravatar? Gravatar is simple and also powerful global service that associates your emails to an avatar/photo. Gravatar stands for Global Recognized Avatar. The part where I said that it associates your emails with an photo is quite important because that’s how you use Gravatar, you actually don’t need the OAuth protocol to obtain a photo, you only need the users Email (usually provided when the user registers in your application).

The how to get the user avatar? First, you’re gonna need to know whose URI to access, if you have to make a request to Gravatar for the user avatar. How do you do that? well quite simple actually, just by using this URI:

  • http://www.gravatar.com/avatar/{HASH}

Was you can see the template part of the URI {HASH} is where Gravatar differentiates my photo from yours. But you might be questioning your self, what does this HASH mean. Well it means that you have to get your user’s email and process it with a hash algorithm and apply it to URI and make a request to Gravatar.

The hash algorithm used is the MD5, and you must write the result in a Hexadecimal Format. Thinking in a pseudo-code you will have something like this:

string GetAvatarURI(string email) {
        string hash = Md5( email ).ToHexString();
	return "http://www.gravatar.com/avatar/" + hash;
}

A nice and simple way of using this, is applying on you Web App Views the “img” HTML tag where the “src” element will have the Gravatar URI. With this your application doesn’t need to make the request, leaving that responsibility for the client’s browser. Where is an example:

</pre>
<img src="http://www.gravatar.com/avatar/9e44cb29fb64a186f90ba70c4ac3d2b6" alt="Users Gravatar Photo" />
<pre>

The result of this will be something like this:

Users Gravatar Photo

Quite a good looking fella don’t you think. Was you can see using Gravatar is quite simple, and requires almost no effort. To conclude this post, I will leave where the source code of a Html Helper I wrote, so you can use on your ASP.NET MVC applications.

public static class GravatarExtensions
{
	private static readonly MD5CryptoServiceProvider Md5 = new MD5CryptoServiceProvider();
	private const string GravatarUriTemplate = "http://www.gravatar.com/avatar/{0}?s=150";

	public static MvcHtmlString GravatarOf(this HtmlHelper html, string email)
	{
		var tag = new TagBuilder("img");

		email = email.Trim().ToLower();

		byte[] bytes = Md5.ComputeHash(Encoding.UTF8.GetBytes(email));
		string hash = String.Concat(Array.ConvertAll(bytes, x => x.ToString("X2"))).ToLower();

		tag.MergeAttribute("id", "profile-photo");
		tag.MergeAttribute("src", String.Format(GravatarUriTemplate, hash));
		tag.MergeAttribute("alt", email + " Gravatar Photo");

		return MvcHtmlString.Create(tag.ToString());
	}
}

In a final note, for the people paying attention, was you can see on the GravatarUriTemplate I used the parameter s on the query string, this parameters allow me to specify the avatar’s size when requested. You can find much more query string parameters at this Gravatar Developers page.

Please feel free to use this code, and if you find ways of improving it, please share it, comments are also welcome.

Until next time.

I’m a Software Engineer through and through, I’m moved by the challenge and always aiming for excellence. I enjoy learning new technologies, understand it and really get how everything works.

Your email address will not be published. Required fields are marked *