Integrating Tridion with Gravatar

Lately I’ve worked on a Gravatar library for .NET which I released in July. I have also recently had the chance to work on Tridion GUI extensions for a customer.

This got me thinking; wouldn’t it be cool to integrate the two? Almost immediately I thought; yes, it will be cool!

So I’ve set to work on a nice GUI extension that will bring Gravatar to Tridion users and give the GUI a bit of a social touch make it feel more personalized by displaying a personalized photo for each user.

And so the integration is really 3 different extensions that can be each used individually or together.

Current User Photo

The first integration shows the Gravatar photo for the current user logged on to the Content Manager Explorer:

What the extension does is it grabs the user name of the current trustee authenticated in IIS and attaches the domain name that is configured in the extension.

In this example you can see the Gravatar photo for my work email address: yniran@sdl.com. The user I use is: ‘MyLocalMachine\yniran’ and in the extension I’ve defined that the domain is ‘sdl.com’.
The extension combines the two and creates the Gravatar URL.

Item Creator Photo

The second integration shows in the info tab of different Tridion items (components, folders, pages, etc.) the Gravatar photo of the user that originally created them, this makes the GUI a bit more social by giving a “face” to the users using it:

In this integration the user name is extracted from the creator user stored in the Tridion database for the item being shown and as with the first integration, the domain is defined in the extension code to determine what the email address would be.

Audience Manager Contact Photo

The third integration shows the Gravatar photo for a contact being created or that was already created in the Audience Manager database:

In this case, the complete email address is supplied by the user entering the details of the contact, In this example I’ve used my personal address and so my Gravatar is displayed. The extension simply retrieves the Gravatar URL for the address that was entered in the General tab.

Installation Steps

Download the jQuery base extension (more information in my previous article: “Using jQuery for Tridion GUI Extensions”).

Copy the extension to the server serving the CME website and install the jQuery extension:

<tridion_home>\bin\TCMExtensionInstaller.exe –add
                                  “c:\temp\jquery.zip”

Download the Gravatar Extension.

Copy the extension to the server serving the CME website and install the Gravatar Extension.

<tridion_home>\bin\TCMExtensionInstaller.exe –add
                              “c:\temp\gravatar.zip”

Open the IIS manager and navigate to the SDL Tridion CME website, then browse to the \Extensions\gravatar folder and turn it into an application:

The Gravatar integrations use an ASPX page which does all the processing for retrieving the Gravatar photo URL. The page uses the Gravatar.NET library to do so.

The last step is to define the domain for your organization:

1. Open <tridion_home>\web\extensions\gravatar\creator.js and locate the line where the ‘creator_domain’ variable is defined and change its value from “sdl.com” to the domain you need.
2. Open <tridion_home>\web\extensions\gravatar\main.js and locate the line where the ‘main_domain’ variable is defined and change its value from”sdl.com” to the domain you need.

Make sure the cache of any IE client using the GUI is cleared before refreshing the display, the extensions should then be applied and ready to be used.

Debugging

First thing to note is that if after installing the extensions you or your users experience errors in the GUI, the first thing to do is uninstall them and check whether the errors persist or not.

If after uninstalling the errors go away, you know that the extensions were the reason.

To then attempt and debug the errors you can use the IE developer tools (only in IE8) to try and check what is going wrong.

The extensions provided in this article all do some logging to the IE console. To see these messages, simply press F12 in the screen where you get the errors and switch to the ‘Script’ tab. Then refresh the page and the log messages will show in the console window.

To check whether the ASPX proxy page returns valid results you can type its URL(http://<hostname>/extensions/gravatar/gravatar.aspx) in the browser’s address bar and then if no errors are thrown, check the source of the page, the response will be JSON formatted and will be identical to what the extension code receives when making an AJAX call:

If you only wish to use one or two of the extensions but not all, before you install the extension, using the Tridion utility, you will need to unzip the file (provided below) and edit the extension.xml file.

Remove the <Script> element for the extension(s) you don’t wish to use.

Extension Code

Can be downloaded here.

(update 12/08/2010)

The extension is also officially available on SDL Tridion World