Update – 12 June 2008

An updated version of this post, containing full source for the control and explanation is available here.

Original Post

I just got myself a freshclickmedia.com Gravatar over at gravatar.com. A Gravatar is a little avatar associated with an email address, and quite a few blogs use them to decorate post comments. Signing up is easy – all you need to do is supply an email address, and image, and give your image a content rating.

The source of the gravatar image tag points to gravatar.com’s image generator and includes an MD5 hash of the email address to prevent email harvesting. A ‘max rating’ parameter prevents the display of unsavoury content.

There are a wide number of blogging gravatar plugins, so I decided to write an ASP.NET custom control to do the job. Here I present the control and its features.

Using the Control

To get up and running, the control requires an email address:

<fcm:Gravatar ID='Gravatar1' runat='server' Email='username@domain.com' />

For my email address, I get the following:

And if we look at the generated source:

<a id="Gravatar1" href="http://www.gravatar.com" title="Get your avatar"><img width="80" height="80" src="http://www.gravatar.com/avatar.php?gravatar_id=ccf3b8c638f15d005e5d070aeb1a3923&rating=G&size=80" alt="Gravatar" /></a>

The default produces a hyperlink off to the Gravatar site with a title “Get your avatar”. The image contains the MD5 email hash, a rating of “G” (suitable for all audience types), and a size of 80.

Customisation

The control supports a number of properties supporting the customisation of its output.

Size

The size property of the control can be in the range 1 to 80. If it is outside this range, a default of 80 will be used.

MaxAllowedRating

The ‘highest’ allowed rating of image.

• A G rated gravatar is suitable for display on all websites with any audience type.
• PG rated gravatars contain may contain rude gestures, provocatively dressed individuals, the lesser swear words, or mild violence.
• R rated gravatars may contain such things as harsh profanity, intense violence, nudity, or hard drug use.
• X rated gravatars may contain hardcore sexual imagery or extremely disturbing violence.

OutputGravatarSiteLink

True by default, determines whether a hyperlink linking to the gravatar website will be output around the image.

LinkTitle

“Get your avatar” by default, allows the customisation of the ‘title’ attribute of the link (obviously doesn’t apply if OutputGravatarSiteLink property is set to false.)

DefaultImage

URL encoded URL, protocol included, of a GIF, JPEG, or PNG image that should be returned if either the requested email address has no associated gravatar, or that gravatar has a rating higher than is allowed by the “MaxAllowedRating” property.

The code snippet below shows the associated properties.

<fcm:Gravatar ID="Gravatar1" runat="server"
    Email="username@domain.com"
    DefaultImage="http://www.site.com/default.jpg"
    OutputGravatarSiteLink="true" Size="40" />

Download and Get Started

You can download the Gravatar Custom Control here. Once you’ve extracted the assembly from the ZIP file, add to the Visual Studio toolbox by right clicking on the toolbox and selecting “Choose Items” from the context menu. Browse to the assembly (Freshclickmedia.Web.dll), and click “OK” to add.