Incorporating Gravatar into the Signin (or Registration) Process
I signed up for an online service the other day (Commando.io), and they had a really nice little interaction during the signup and signin processes. As soon as you enter your email address, it automatically displays your Gravatar. Nice little touch.
So, I thought I'd write a quick tutorial on how to replicate the effect.
There is a demo here.
Getting Started
For simplicity, I based the form on one of the example templates for the Bootstrap framework.
It's pretty straightforward to download the Bootstrap framework using Bower:
bower install bootstrap
Because Bootstrap's JS - not that it's used for this tutorial - has JQuery has a dependency, Bower will download it automatically - so no need to download it separately.
Next up, a little additional markup for the form:
<html>
<form id="login" class="form-signin" role="form">
<h2 class="form-signin-heading">Please sign in</h2>
<div class="avatar-holder">
<img src="./img/avatar.png" width="64" height="64" id="avatar" />
</div>
<!-- ...rest of the form goes here... -->
</html>
A few CSS styles - I've just put them in the HEAD for simplicity:
.avatar-holder {
text-align: center;
padding: 1em 0;
}
#avatar {
width: 64px;
height: 64px;
border-radius: 32px;
border: solid 2px #ddd;
}
.note {
margin-top: 2em;
text-align: center;
}
.note p {
font-size: 0.8em;
color: #666;
}
That's the basic structure ready to go.
How to Use Gravatar
Generating a Gravatar is really easy. You simply create an image tag and point it to a specific URL, which you construct as follows:
http://www.gravatar.com/avatar/HASH?s=64
HASH is an MD5 hash of the user's email address, which should first be converted to lowercase. There are a few additional parameters you can use, which are detailed in the documentation, but I'm just setting the size here - indicated by the attribute s. In this case, I want the Gravatar to be 64px x 64px, to match the image.
Implementation
The first thing to note is that Javascript doesn't support MD5 hashing out-the-box. Fortunately there are libraries for that, such as this one.
Again, this can be installed using Bower:
bower install blueimp-md5
Now the JQuery:
$(document).ready(function(){
// React to the email field (on the login form) having been filled out
$('form#login input[name="email"]').blur(function(){
var email = $(this).val();
// Assuming an email has been provided...
if (email !== '') {
// Construct the Gravatar URL
var gravatar_url = 'http://www.gravatar.com/avatar/' + md5(email.trim().toLowerCase()) + '?s=64';
// Set the source of the avatar image.
$('img#avatar').attr('src', gravatar_url);
}
});
});
Most of this should be relatively straightforward. Because we want to grab the avatar after the user has entered their email address, it's set to fire on the blur event on the email input. After a quick check to ensure a value has been entered (we might also want to validate it here), we build the URL to the Gravatar. First we take the email address - the value of the input - trim any erroneous whitespace, convert it to lowercase, then obtain its MD5 hash. This is then used to generate the URL, which is set as the src attribute of the avatar image. Pretty simple effect, but it adds a little something to your forms.