Pixelmatrix Design

Announcing Get Gravatar

Tim was working on something cool the other day that gave me an idea for a plugin to fetch a Gravatar via AJAX. After a couple hours of work, i’m proud to present Get Gravatar, a jQuery plugin for Gravatars.

Gravatar is a service for universal avatars. If you don't have one, go get one here.

Get Gravatar is meant to be used with a text input. As the text changes in the input, it pings the Gravatar service to fetch the user’s avatar. Due to Gravatar’s restrictions, Gravatars must be retrieved with an MD5 hash of the user’s email. Since Javascript doesn’t have a built-in way to fetch an MD5 hash, this plugin has a PHP counterpart.

Parameters

• url (string): the URL to the PHP counterpart. You can use either a relative or exact URL.
• fallback (string): URL to your placeholder image for if the user does not have a Gravatar. Must be an exact URL.
• avatarSize (number, 0-512): Size in pixels of the gravatar to fetch.
• avatarContainer (string): jQuery style selector of the tag to put the gravatar in once it’s loaded. Default is "#gravatar".
• start (function): Function to run when it starts loading. Perfect place to put code for a Loading indicator.
• stop (function): Function to run when it’s done loading. Perfect place to put code to hide a Loading indicator.

Code examples:

Barebones usage:

Simple parameters:

$("#email-address").getGravatar({
	url: '/includes/get-gravatar.php',
	fallback: 'http://myurl.com/images/default.png'
});

More parameters:

$("#email-address").getGravatar({
	url: '/includes/get-gravatar.php',
	fallback: 'http://myurl.com/images/default.png',
	avatarSize: 80,
	avatarContainer: '#gravatar-container'
});

Specify start and stop functions

$("#email-address").getGravatar({
	start: function(){
		$("loading").show();
	},
	stop: function(){
		$("loading").hide();
	}
});

Other non-sense:

This plugin is pretty versatile. You can access the basic functions of the plugin if you really want to. You can also use this plugin with the jQuery metadata plugin.

Tim Van Damme has prepared a fun demo for your viewing pleasure.

You can download the plugin below:

10/28/09: Updated to 1.2

Or check it out on Github.