Blog design. Affordable design for pioneering companies.
Litmus. Elegant compatibility testing for your sites and emails.

Unsalted (That's our clever name for our blog)

August 19: Live preview with a Gravatar

On this new site I've implemented a little JavaScript trick to grab a commenter's Gravatar and display it as part of the live preview.

It's pretty straightforward. The Gravatar site sends back the avatar image in response to a GET request which includes the MD5 hash of the commenter's email, along with some other optional parameters. I've got a JavaScript function called in the onBlur event of the email address form field (onBlur rather than onChange to avoid requests being made with incomplete email addresses), which replaces the placeholder image's src with the generated Gravatar URL. The only difficulty was generating that MD5 hash. For that I found Paul Johnston's excellent JavaScript MD5 function.

My finished JavaScript function is:

function gravatar() {
  hash = hex_md5(document.getElementById('email').value);
  document.getElementById('gravatarImg').src = \
    "http://www.gravatar.com/avatar.php?gravatar_id=" + \
    hash + "&size=40&default=http://salted.com/default.gif"
}

I also used the Movable Type Gravatar Plugin to display the Gravatar in the comment after it's posted.

Posted by Paul.

Comments

This is a nifty trick Paul! We'll sure be using it on our soon to be released portfolio/blog!
Keep up the good work!

Tim
November 16, 2005 12:10 AM

Add A Comment


(required)


(required, Gravatar-enabled)


Remember Me?

Preview