Tutorial #25
Gravatars Intermediate   2013-11-21

Introduction

An Avatar, in the context of the web, is a graphic representation of a user that can help identify them on web pages. You see them used all over the place - next to comments on sites like YouTube, Tumblr and Wordpress, on Facebook, Twitter, GitHub and StackOverflow and many others.

They can be photographs, cartoon characters, text or even animated GIFs. They are typically small square graphics.

Large sites like Facebook, Twitter and Google have their own ways of managing user avatars, but there is a general form of avatar that is not tied to any one service.

A Gravatar, which stands for Globally Recognized Avatar, is created on, and distributed by, gravatar.com which is owned by Wordpress.

Gravatars are used extensively by Wordpress in the blogs that they host, but they are not restricted to that site. So they are a good choice if you want to include avatars in your site.

This tutorial shows how to include them in a web page and how to handle the case where a user does not have a gravatar.

Demo 1 screenshot for this tutorial


Step by Step

1: To experiment with gravatars you will want to create your own. Go to gravatar.com and click the Wordpress Sign In button in the top right. Sign into that page if you have a Wordpress account, if not then click 'Need an Account?' to set one up.

Gravatars are tied to specific email addresses so you need to use a valid address.

The great thing about Gravatars is that any site can use them if they have your email address and you have a gravatar.

The bad thing about them is that you don't know who is using them. That fun, silly photo that you use as a gravatar in your Wordpress blog will be the one that appears wherever your gravatar is used. That may not be appropriate if you are commenting on a serious blog somewhere else. The gravatar is a representation of you, so choose wisely !

2: Upload the photo or graphic image that you want to use. The image should be square and I would recommend it being at least 256 x 256 pixels. In most cases it will be displayed at 80 x 80 pixels or smaller, but don't upload a small image. If a site displays a large gravatar from a small image it will look terrible.

Make sure that your image looks good when it is shrunk to, say, 64 x 64 or 32 x 32 pixels. If not then consider a different image.

You will be asked to set the rating for your image. Unless you have chosen something quite inappropriate, you will want to select 'G'.

Image 1 for this tutorial

3: Click on Check this gravatar. You will see two lines of apparently random letters and numbers. The one marked Email Hash is the unique identifier for your Gravatar which is based on your email address.

Below that is a URL that can used to display the image. Copy and Paste this into the URL bar of a new browser tab and you should see you gravatar displayed as an 80 x 80 pixel square.

Image 2 for this tutorial

4: That Email Hash is a MD5 hash of your Email Address. A MD5 hash is cryptographic transformation of that string of characters. MD5 hashes are used for many applications. They serve as a unique identifier as, in principle, the chances of any two strings generating the same MD5 digest is very, very low.

You can quickly generate the MD5 from a string using a library function, but it is very difficult to go the other way. So if you have the MD5 hash used to identify a gravatar you cannot easily generate the original email address.

The caveat here is that hackers, goverment agencies, etc. who specialize in cracking passwords probably DO have the resources to derive your email address. That is not really an issue here, but don't use MD5 hashes for any application that needs to protect user identity.


Understanding the Code

Take a look at the demo page. The code consists of some HTML followed by some JavaScript.

The HTML shows the Gravatar for Web Apprentice along with the URL that was used. You can see that as long as you have the Gravatar Hash for the user, it is trivial to construct the required URL. The ?s=80 specifies that the image will be an 80 x 80 pixel square.

The second gravatar shows what you see if the user does not have a Gravatar set up. Given the email address, you can compute Gravatar Hash, but gravatar.com will not be able to find a matching image. Rather than return a 404 return code, meaning 'Not Found', Gravatar returns the default image which is the Gravatar logo.

You can choose an different default image by adding the d= parameter to the URL. There are several alternative images to choose from - see This Page for details. The third image uses the mm default image.

It is easy to specify the size of the displayed image by using the s= parameter. The demo shows the same gravatar at three different sizes. You could specify size with the width and height attributes in the img tag but using the URL parameter means that the Gravatar server will do the resizing for you.


So far the URLs used for the images have been known in advance, but how do you generate them in a dynamic application? You could store them in a database for each user, or you could generate them on the fly. That is what the script does in this demo.

We have an array of email addresses and for each one we compute the MDS digest to use in the URL. JavaScript does not have a built-in MD5 function (which is surprising) so we need to include one from the crypto-js library written by Jeff Mott.

NOTE that the addresses should be converted to lower case and any whitespace must be removed before computing the MD5 hash.

We compute the hash and place the string version of it in the URL and then append that img tag to the div with the id of gravatars on the web page.


The final panel on the demo page is a small diversion. Gravatar is kind enough to return a default image if a real gravatar does not exist, but most sites do not. Normally you get a 404 - Not Found error and the browser displays a default placeholder image which is not what you typically want. It is quite easy to use your own 'not found' image by including a onerror handler in the img, like this: onerror="img_not_found(this);". When that function is called this refers to the image object in the DOM. The function simply changes the value of the src attribute to the path to your default image. This is a simple and very useful trick to use whenever there is a chance that an image may not exist.

For more information see the Gravatar Documentation


Code for this Tutorial


Share this tutorial



Comment on this Tutorial


comments powered by Disqus