Adding Gravatars to your ASP.NET site in a few lines of code - Jon Galloway

Adding Gravatars to your ASP.NET site in a few lines of code

Summary

Gravatar (Globally Recognized Avatar) provides a simple way to add avatars to community based sites. Users set up an account at http://site.gravatar.com with an avatar image and an e-mail address, then their avatar shows up on any site which support Gravatars - blogs, community sites, etc. Gravatar take care of hosting and resizing the images, handles things like decency ratings, and they've got a nice UI for image upload / cropping.

It's also nice for your users, since they don't have to upload avatar images over and over again, and they can update their avatar for all their favorite sites in one place.

Disclaimer - Gravatar images sometimes load slowly

I'll talk about the simplest case here, and in a subsequent post I'll point you to some code which works around the one major problem with Gravatar.com - the avatar images sometime slow to download. Hey, live.com guys, how about avatar.live.com? You've got that great content distribution network, this seems like a natural service to provide...

Really easy account setup

The best part of Gravatar is that account setup is really simple. After the standard "enter your e-mail, they e-mail you a confirmation link" dance,  you either upload an image or point at in image URL. You have the option to crop your image, and then you're done. That's it. I think the AJAX cropping thing is pretty slick:

Gravatar-crop

Setting up a website to show Gravatars

It's pretty easy to add Gravatars to your site. The Gravatar help page has sample code for a lot of languages and community sites; while they don't have ASP.NET code, it's a pretty trivial exercise. Gravatars are keyed by e-mail address, but in order to provide some basic protection, the e-mail addresses are passed as MD5 hashes. So here's the URL for my Gravatar:

Here's the avatar. I mostly use it because it really bugs Jeff Atwood.
Note that I've specified the size in the URL as 80px, so Gravatar automatically resized the image for me.

Calculating an MD5 hash doesn't take a lot of code, but it's not intuitive code. I call this sort of API the Bring me the Jade Monkey API. "And one more thing...  bring me a byte array before the next full moon..."

Anyhow, there's an easier way provided by the System.Web.Security namespace:
System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(stringToHash, "MD5");
 
So, with that out of the way, we can set an image source to the result of our GetGravatarUrl() function. My page is databound to a datasource which contains an Email field, so I'm passing in Container.DataItem to be evaluated.
<img alt='<%# Eval("UserName") %>' src="<%# GetGravatarUrl(Container.DataItem) %>" />
 
Here's the GetGravatarUrl function, which grabs the e-mail from the DataItem, calculates an MD5 hash, and formats it into a simple Gravatar image URL.
protected string GetGravatarUrl(object dataItem) { string email = (string)DataBinder.Eval(dataItem, "email"); string hash = System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(email.Trim(), "MD5"); hash = hash.Trim().ToLower(); //TODO:Include a default image. Querystring parameter example: &default=http%3A%2F%2Fwww.example.com%2Fsomeimage.jpg string gravatarUrl = string.Format("http://www.gravatar.com/avatar.php?gravatar_id={0}&rating=G&size=60",hash); return gravatarUrl; }

Note: if you want this basic functionality wrapped up in a control, check out Sean Kerney's Gravatar control.

Recap

Gravatar images are an easy way to add some personality to the members of your community website. Since the Gravatar images sometimes download slowly, however, you might want to look into some more sophisticated solutions such as local caching; I'll talk about that in a follow-on post.

Published Sunday, September 23, 2007 11:29 PM by Jon Galloway

Comments

# re: Adding Gravatars to your ASP.NET site in a few lines of code

I have implemented a gravatar server side cache for DotNetKicks. It could do with a little refactor, but it works fine:

dotnetkicks.googlecode.com/.../ViewGravitar.ashx.cs

Tuesday, September 25, 2007 6:02 AM by gavinjoyce

# re: Adding Gravatars to your ASP.NET site in a few lines of code

I know it is late, but ... make sure you lower case your input e-mail address. With capitals you will get a different hash and thus not work.

-Mark

Friday, January 9, 2009 6:57 PM by Mark Nijhof

# re: Adding Gravatars to your ASP.NET site in a few lines of code

Hello, great implementation. How I can verify that the email address is a known Gravatar.

Friday, May 22, 2009 5:20 PM by Rene Drescher-Hackel

# re: Adding Gravatars to your ASP.NET site in a few lines of code

Motivational quotes

Saturday, July 7, 2012 1:16 PM by Benumbed hgh dosage leave a reply name email comment

# re: Adding Gravatars to your ASP.NET site in a few lines of code

Motivational quotes

Saturday, July 7, 2012 6:46 PM by Credit Repair

# re: Adding Gravatars to your ASP.NET site in a few lines of code

Motivational quotes

# re: Adding Gravatars to your ASP.NET site in a few lines of code

Motivational quotes

Thursday, July 12, 2012 3:33 PM by Wa lottery results

# re: Adding Gravatars to your ASP.NET site in a few lines of code

Motivational quotes

Friday, July 13, 2012 1:08 AM by קורס ברמנים

# re: Adding Gravatars to your ASP.NET site in a few lines of code

Broken heart quotes

Friday, July 13, 2012 1:43 AM by Sildenafil

# re: Adding Gravatars to your ASP.NET site in a few lines of code

Broken heart quotes

Saturday, July 14, 2012 8:22 PM by Logiciel euromillions

# re: Adding Gravatars to your ASP.NET site in a few lines of code

Broken heart quotes

Thursday, July 19, 2012 2:49 AM by Machines a sous pour le fun

# re: Adding Gravatars to your ASP.NET site in a few lines of code

Motivational quotes

Friday, July 20, 2012 2:42 PM by מרפאת שיניים

# re: Adding Gravatars to your ASP.NET site in a few lines of code

Broken heart quotes

# re: Adding Gravatars to your ASP.NET site in a few lines of code

Motivational quotes

Saturday, July 21, 2012 8:45 AM by Vimax

# re: Adding Gravatars to your ASP.NET site in a few lines of code

Broken heart quotes

# re: Adding Gravatars to your ASP.NET site in a few lines of code

Broken heart quotes

Saturday, July 21, 2012 1:34 PM by hgh

# re: Adding Gravatars to your ASP.NET site in a few lines of code

Motivational quotes

# re: Adding Gravatars to your ASP.NET site in a few lines of code

Valentine funny quotes

Sunday, July 22, 2012 12:22 PM by Swan energy complaints

# re: Adding Gravatars to your ASP.NET site in a few lines of code

Motivational quotes

# re: Adding Gravatars to your ASP.NET site in a few lines of code

Motivational quotes

Sunday, July 22, 2012 5:03 PM by Kamagra quick

# re: Adding Gravatars to your ASP.NET site in a few lines of code

Broken heart quotes

Sunday, July 22, 2012 5:22 PM by PC Backup

# re: Adding Gravatars to your ASP.NET site in a few lines of code

Thanks for sharing. To find more info please go to  Argentina Soccer jerseys  , Cheap Thailand Football Shirts Wholesale

Monday, September 10, 2012 3:28 AM by Cidymorll

# re: Adding Gravatars to your ASP.NET site in a few lines of code

Good source to follow

Friday, October 26, 2012 2:05 PM by Nonar

# re: Adding Gravatars to your ASP.NET site in a few lines of code

Christmas tree, strawberry, strawberry flavor and strawberry hanging ball - this is an excellent and unconventional garnish for the benefit of your holiday table.

Friday, December 7, 2012 5:50 PM by indinessy

# re: Adding Gravatars to your ASP.NET site in a few lines of code

Keep it on!! Good source!!

Saturday, December 8, 2012 4:02 AM by Phen375