ASP.NET Gravatar Control Update – Full Source Included

Gravatar ASP.NET Control

With gravatars now becoming ubiquitous in blogs and forums, I have developed an ASP.NET Control that encapsulates their functionality in a simple, reusable component. It’s so easy to use, you can download and be using it on your ASP.NET sites within minutes.

I introduced the control in February of 2008, and updated the functionality in March of 2008.

I’ve since had a lot of interest in the source code for the control, and so this post describes how the control works, as well as providing a download containing the control, as well as the full control source and example website that uses the control.

OK, let me download it already!

Download the Control and get started. Note that the demo projects included in the ZIP were written in Visual Studio 2005, so if you’re using Visual Studio 2008, you’ll need to convert the solution. If you’ve not done a conversion before, just follow the instructions that Visual Studio provides. Please also note that the solution will not open in Express Editions, since they do not support control projects. However, you can still use the control that’s included in the ZIP file.

Unzip the .zip download, and you’ll have the following folder structure:

Unzipped Folder structure

The root contains a small readme file, Visual Studio solution, FreshClickmedia.dll – the gravatar control assembly, Freshclickmedia.Web control project and GravatarSite website, which contains a few control examples.

Opening the solution in visual studio will give you this solution structure:

Gravatar Solution

Fire up the website, and you should see something like this:

Gravatar Demo Website

Examining the Code

    <h1>Gravatar Examples</h1>
    <h2>My email address, size of 80 pixels:</h2>
        <fcm:Gravatar ID="Gravatar1" runat="server" Email="youremailaddress@domain.com"
             OutputGravatarSiteLink="true" Size="80" />
    <h2>No email address, with default image (absolute url) specified:</h2>
        <fcm:Gravatar ID="Gravatar2" runat="server" Size="80" DefaultImage="http://farm3.static.flickr.com/2375/2552064340_192825f989_o.jpg" />
    <h2>Email address not associated with Gravatar, with no default image:</h2>
        <fcm:Gravatar ID="Gravatar3" runat="server" Email="thisemaildoesnotexist@freshclickmedia.com" Size="80"  />

The control requires an email address:

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

For my email address, I get the following generated HTML:

Output for my email address

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" />

Examining the control code

The Gravatar control derives from System.Web.UI.WebControls.WebControl and overrides the Render method.

The various properties such as Email are all implemented as simple C# properties, with various attributes depending on the property.

[Bindable(true), Category("Appearance"), DefaultValue("80")]
public short Size
{
	get
	{
		return _size;
	}
	set
	{
		_size = value;
	}
}

These properties are then used in the Render method to write out HTML using the method’s HtmlTextWriter parameter.

The Render method begins by adding the default attributes to the render, ensuring that the size is within the valid range of 1 to 512, and initialises the gravatar URL:

AddAttributesToRender(output);
// if the size property has been specified, ensure it is a short, and in the range
// 1..512:
try
{
    // if it's not in the allowed range, throw an exception:
    if (Size < 1 || Size > 512)
        throw new ArgumentOutOfRangeException();
}
catch
{
    Size = 80;
}
// default the image url:
string imageUrl = "http://www.gravatar.com/avatar.php?";

If an Email address has been supplied, the MD5CryptoServiceProvider hashes the email and a StringBuilder converts this to the required format:

if( !string.IsNullOrEmpty( Email))
{
    // build up image url, including MD5 hash for supplied email:
    MD5CryptoServiceProvider md5 = new MD5CryptoServiceProvider();
    UTF8Encoding encoder = new UTF8Encoding();
    MD5CryptoServiceProvider md5Hasher = new MD5CryptoServiceProvider();
    byte[] hashedBytes = md5Hasher.ComputeHash(encoder.GetBytes(Email));
    StringBuilder sb = new StringBuilder(hashedBytes.Length * 2);
    for (int i = 0; i < hashedBytes.Length; i++)
    {
        sb.Append(hashedBytes[i].ToString("X2"));
    }
    // output parameters:
    imageUrl += "gravatar_id=" + sb.ToString().ToLower();
    imageUrl += "&rating=" + MaxAllowedRating.ToString();
    imageUrl += "&size=" + Size.ToString();
}

The final part of the method assigns a default image, if one has been specified, outputs the site ink, if required, outputs the required attributes and tags.

// output default parameter if specified
if (!string.IsNullOrEmpty(DefaultImage))
{
    imageUrl += "&default=" + HttpUtility.UrlEncode(DefaultImage);
}
// if we need to output the site link:
if (OutputGravatarSiteLink)
{
    output.AddAttribute(HtmlTextWriterAttribute.Href, "http://www.gravatar.com");
    output.AddAttribute(HtmlTextWriterAttribute.Title, LinkTitle);
    output.RenderBeginTag(HtmlTextWriterTag.A);
}
// output required attributes/img tag:
output.AddAttribute(HtmlTextWriterAttribute.Width, Size.ToString());
output.AddAttribute(HtmlTextWriterAttribute.Height, Size.ToString());
output.AddAttribute(HtmlTextWriterAttribute.Src, imageUrl);
output.AddAttribute(HtmlTextWriterAttribute.Alt, "Gravatar");
output.RenderBeginTag("img");
output.RenderEndTag();
// if we need to output the site link:
if (OutputGravatarSiteLink)
{
    output.RenderEndTag();
}

Using the control on your own projects

As previously mentioned, the download solution will not open properly in Express versions of Visual Studio, since it does not support control projects, but the control, included in the download is supported by all versions of Visual Studio, 2005 and later.

The easiest way to use the control is to add the control to the toolbox. To do this, ensure that you are in design mode (looking at a web page), and right click on the ‘Standard’ group header of the Toolbox. From the context menu, select “Choose Items” and browse to the assembly (Freshclickmedia.Web.dll), and click “OK” to add.

Adding the control to the toolbox

Once you’ve added the assembly, you should see the following:

Gravatar Toolbox Item

From there, you can drag the control onto your page and start having fun!

3G iPhone first reaction

iPhone

I was extremely excited about the Worldwide Developer Conference (WWDC) 2008, and so headed off to macrumors.com for a live feed of Steve Jobs’ keynote.

After a rather slow build-up, the almost inevitable announcement from Jobs that the 3G iteration of the iPhone was made. And so, there must follow an end to the enormous amount of speculation in blogs and forums about the features of the second generation iPhone.

As I saw the updates on macrumors.com, I was pleased, but not particularly surprised to see the following features:

  • 3G speed. No great revelation – many of us Europeans saw the lack of 3G in first geneation as a serious drawback;
  • GPS. Once again, this is now becoming standard on high-end mobiles such as Nokia’s N95, so there was almost an expectation that this would feature.
  • App Store. I welcome the addition of an app store – extending the functionality of the device is most useful, and it’s an additional revenue stream for apple.
  • ‘iPhone in Enterprise’. Push e-mail and integration with Microsoft Exchange ActiveSync is a big plus for business users. Should Blackberry be worried?
  • Now available in white. No doubt there will be a pink version soon. I’ll stick with black, thanks.

The App Store interests me – particularly the iPhone version of Super Monkey Ball. The built-in accelerometer suits the game very well, and I look forward to playing some games on a mobile platform.

What struck me more than anything, and something that was lacking from much speculation was the price. Although it’s somewhat irksome, considering I paid over £200 for my phone, I was shocked at the price of the new iPhone. $199 for the 8Gb version, and $299 for the 16Gb version is quite amazing, but let’s wait a little to see what carriers charge for a contract, and how long the minimum contract term will be.

O2 website, 9 June 2008

Shortly after the announcement, Apple’s UK site was updated with the 3G iPhone details, and UK iPhone carrier O2‘s followed with a ‘come back tomorrow’ teaser.

Well, I reckon that the 8Gb price will be £129 in the UK with an 18 month or perhaps even a 24 month contract. How much an upgrade will cost is anybody’s guess, but hopefully, as the O2 website states, all will be revealed tomorrow.

So, much of the speculation was correct, and although the price point is certainly attactive, I’m surprised about the camera remaining at its current specs of 2 megapixel. Whilst I think that this is ok, it doesn’t deal with any kind of movement at all well, and the delay is not acceptable. Perhaps a flash would have been too large a drain on battery life; increasing the megapixels, but not including a flash would have been an even stranger position than doing nothing at all. Perhaps we’ll see that in the third generation, along with the pink colour scheme.