Gravatars to the Rescue

Web and social networking platforms like Facebook, Twitter and Google with very massive user bases have become commonplace for delegated user authentication across so many applications today — web and mobile alike, usually referred to as social login.
Hence, it’s pretty common to see login screens that look like this:

One huge benefit of using social login is that the web application is granted access to some pre-existing information about the authenticated user such as the user’s profile — email, name, photo.
On the other hand, web applications that implement their own user authentication will require more information from the user to build up the user’s profile.
Consider a useful piece of information that usually comes with the user profile on social logins — the user’s profile photo, commonly referred to as avatar.
For web applications implementing their own user authentication, this means the user has to upload an image to use as profile photo. The truth is that most users wouldn’t want to do this. So what do we end up with — user profiles without profile photos.

Gravatars as Fallbacks

What? Gravatar? What’s that?
OK — enough of the long introduction. That’s not a typo. You probably already know what an avatar is. Well, just prefix it with a “gr” — short for globally recognized, and what you get is a gravatar — a globally recognized avatar.

Gravatars give the feeling that your profile photo follows your identity everywhere on the web from blog posts to web forums, especially on Gravatar-enabled sites.
You can create your own Gravatar profile just once here. Find out more about gravatars on the official Gravatar website.
Wow… That didn’t seem too bad.
I can say with some level of certainty that you must have seen a gravatar being used as a user’s profile photo on the web — though it may not have been so obvious to you.
“Where?”, you may ask.
Websites and services like WordPress, StackOverflow, Disqus and DigitalOcean use gravatars heavily for user profile photos.

Hacking the Gravatar – For Developers

If you are a developer reading this, you should already be bored of all the too much talk by now. I guess it’s time to get hacking already. Yea.. you heard me — there is definitely some hacking required to get the gravatar all loaded up.

Computing the Hash

The URL for a typical gravatar looks like this:

 
Yea… you guessed it right — the task here is to compute the {HASH}.
The hash is computed from an email address. Typically, this email address will be that of the target user. The resulting hash is referred as the email hash.

 

With the tough part of the job out of the way, all that remains now is to substitute the computed hash into the URL we had before.

 
Here, is what I got as my email hash:

 
Hence, my gravatar photo URL becomes:

 
If necessary, you can append the optional .jpg file extension to the hash in URL as follows:

 
This means I can use this URL wherever I need my gravatar like so:

 
Go ahead and either load the gravatar URL or provide it wherever an image is required to see my gravatar. You should try yours too!!

The Benefit

Leveraging on gravatars, it is possible to obtain a fallback profile photo for a user provided the user’s email address is already known.

The application may still require the user to upload a choice profile photo or attempt to fetch the photo from a social media platform. But while that is yet to happen, a gravatar can be used as fallback.

Tweaking the Gravatar

You can tweak the gravatar photo URL in several ways by passing several flags to modify what the outputted photo will look like. These flags are attached to the gravatar photo URL as querystring paramaters.

Changing the Photo Size

Gravatars are usually output as 80px by 80px square photos. However, you can change the size of the square by passing a number between 1 and 2048 to the size flag or s for short.
Hence, the following URLs are the same and ensure that the gravatar is square with dimensions of 100px.

Preventing Photo based on Rating

Users are allowed to specify a rating for their gravatars based on the sensitivity of the content of the photo and the target audience. Here are the rating categories:

• g — is appropriate for all audiences and websites.
• pg — may contain rude gestures, provocatively dressed individuals, the lesser swear words, or mild violence.
• r — may contain such things as harsh profanity, intense violence, nudity, or hard drug use.
• x — may contain hardcore sexual imagery or extremely disturbing violence.

By default, only images rated G are outputted. Images with higher rating are simply ignored and a default image shown instead.

The rating flag, or r for short, can be used to specify the rating limit for loading the gravatar image before switching to the default.

The following URLs are the same and ensure that the gravatar is shown only if it is rated G or PG, otherwise a default photo is shown.

 

Default Photo

Take a moment to ponder on what the gravatar photo output will be when a user’s email address doesn’t match any gravatar photo. By default, a default gravatar photo will be output for such gravatars.

However, it is possible to choose from a set of options, what you want the default fallback photo to be — by setting the default flag, or d for short.

Here are the possible options for the default flag:

• 404 — Don’t output any image. Return a HTTP 404 (Not Found) response instead.
• blank — Transparent blank PNG image.
• mp — Cartoon-like silhouette outline of a person.
• identicon — Geometric pattern based on email hash.
• retro — 8-bit archade-style pixelated face.
• monsterid — Generated monsters with different faces and colors.
• robohash — Generated robots with different faces and colors.
• wavatar — Generated photos with different features and backgrounds.

Here is a very simple demo of what these options look like:

If you don’t want to use any of the available default options, you can pass an encoded image URL to use a custom photo instead.
The image URL has to be publicly available via HTTP and HTTPS, must not include querystring, and must have one of these extensions — .gif, .jpg, .jpeg, .png

The image URL has to be properly encoded so that it can be added to the gravatar URL without causing any form of conflict.

In PHP, you can encode a URL using the urlencode() function like so:

 
In JavaScript, you can use the encodeURIComponent() function:

 
You should get a URL that looks like this:

Now you can pass this encoded URL into the default flag as follows:

 

Forcing Default Photo

If for some reason, you always want the specified default photo to be outputted irrespective of whether the email hash matches a gravatar image or not, then you will need to set the forcedefault flag, or f for short.

Setting this flag to a value of y forces the default photo to always be displayed. Here it is:

 

Recap: The Flags

Here is a little recap of all the flags and options that can be set on the Gravatar photo URL to modify the output image of the gravatar.

• s or size — Change the dimension of the output image square.
• r or rating — Restrict the loading of photos based on this rating.
• d or default — Use this default if email hash doesn’t match any gravatar.
• f or forcedefault — Always load the default image no matter what.

Note that it is possible to combine these options as required as shown in the following code snippet:

 

Conclusion

If you made it to this point, you’ve reached the end of this article. Here are a few things you should remember about Gravatars:

• Sensible Placeholders — They can be very good placeholders for avatars.
• Straightforward Logic — The logic for computing their URL is pretty straightforward.
• Simple Customization — Their final output is easily customizable using one or more flags.
• Save Effort — They can save some effort during initial development (maybe not so much).
• Several Websites Use Them — WordPress, DigitalOcean, StackOverflow, Disqus, etc.

]]>