Loading gravatar using jquery

Question

Just trying to crate a simple comment form on a blog. I want to load the user\'s gravatar (using jQuery) when he/she writes this in the email box.

How can I do that?

Answer 1

The tricky part is generating the URL using an MD5 hash implementation, which is separate from jQuery. I found that the blueimp-md5 library has the most stars of the various MD5 packages on GitHub, and it's pretty much self-contained (about 6kb minified). If you are using Node and/or Browserify, this solution might work well for you:

var md5 = require("blueimp-md5");
function gravatar(email){
  var base = "http://www.gravatar.com/avatar/";
  var hash = md5(email.trim().toLowerCase());
  return base + hash;
}

Then you can set an image src attribute using jQuery like this:

var email = "someone@example.com";
$("#image").attr("src", gravatar(email));