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?

Heraclea

Answer 1

The gravatar url looks like this:

http://www.gravatar.com/avatar/<md5hashofemail>

Here are the rest of the options for the URL.

So all you're going to have to do is include a function called md5 that returns the md5 hash of the user's email. There are many online that do this, but I believe https://github.com/blueimp/JavaScript-MD5/blob/master/README.md works well. After that, just do:

// get the email
var email = $('#email').val();
// -- maybe validate the email? 

// create a new image with the src pointing to the user's gravatar
var gravatar = $('<img>').attr({src: 'http://www.gravatar.com/avatar/' + md5(email)});
// append this new image to some div, or whatever
$('#my_whatever').append(gravatar);

// OR, simply modify the source of an image already on the page
$('#image').attr('src', 'http://www.gravatar.com/avatar/' + md5(email));

I thought this was obvious, but I will add it for posterity's sake:

If user emails are private and you're showing this ala-stackoverflow in a listing, you are probably better off encoding the email on the server so that user emails are not publicly visible if you look at the source.

Danas

so there is a problem with using javascript to load gravatars, because it not a good idea to output your users email and md5 hash clientside – Abloom

@Sander Versluys: There aren't problems if you just load it from textbox as the user enters his/her email. – Fane

@Paolo - as @Mehrdad says, no problem if u are generating the has from an email entered into a textbox by the user. bigger problem if you are using this to display gravatars on a publicly visible page. i.e. if a forum used this to display gravatars beside posts - u could view source and see everyones email addresses. – Automatic

Cheers, this just saved me a load of Googling. Using it to preview the Gravatar on a sign up form. – Ravelin

According to en.gravatar.com/site/implement/hash you should use 'trim' and 'strtolower'/'toLower'/etc on your email to generate a consistent hash. – Lorenzo

nice article at here itsolutionstuff.com/post/… – Shipping

Answer 2

check out my fiddle providing the function

get_gravatar_image_url (email, size, default_image, allowed_rating, force_default)

Only providing the email is mandatory - the rest uses default values.

Be sure to also include the de-facto-standard MD5-generator JS file from Joseph Myers with

<script src="http://www.myersdaily.org/joseph/javascript/md5.js"></script>

Frivolous

Answer 3

Wow thanks for this post. But if in case you have your own blank image and you want to use it instead of the gravatar.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.12.0"><script>

<img id="image" src="images/mydefault.png" />

<script>

    var src = 'http://www.gravatar.com/avatar/' + 
                  md5('[email protected]') + '?default=' + encodeURIComponent(GetRootDomain() + '/Content/images/nopic-small.png');

    $('#image').attr('src', src);

</script>

Dorinedorion

For future finders of this answer, the 'md5.js' is not included in the above details. I understand this was from 13' but if you can update it with the source of 'md5.js' it would help people. – Retroflexion

Answer 4

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 = "[email protected]";
$("#image").attr("src", gravatar(email));

Compliment