Adding Gravatar images to the SilverStripe Blog

Posted by Gav on 25 June 2010 | 5 Comments

Tags: SilverStripe, Gravatar, SilverStripe Blog

In this tutorial, we will be using the Gravatar service to add an icon next to each comment which is posted in the SilverStripe blog. We get the gravatar by using a persons email address. Since the SilverStripe blog doesn't have a field for email, we need to add it.

Adding an email field to the SilverStripe Blog

There is a tutorial on how to add an email address field to the SilverStripe blog comments over at ssbits.com http://ssbits.com/adding-fields-to-page-comments/ We need to complete this first. Basically what you will be doing is extending the PageCommentInterface class. Once this is complete, we can proceed.

Creating the hashed email address for Gravatar.

Gravatar uses a hashed email address to retrieve the image. The email address must be converted to lower case and then hashed using the md5 function. Gravatar documentation - Creating the hash

Now what we need to do is apply this to the CommenterEmail field. This is the new email field which is created by extending the PageCommentInterface class.

What we need to do is add the following code to the PageCommentDecorator class which is in the mysite/code/PageCommentDecorator.php file

function GravatarHash() {
	return md5(strtolower(trim($this->owner->CommenterEmail)));
}

Updating the page comment template files to include the Gravatar.

We will make a copy of the template files and place them within our theme folder. We need to copy the following files:

• cms/templates/PageCommentInterface.ss
• cms/templates/PageCommentInterface_singlecomment.ss

They will be copied into themes/yourtheme/

Now to display the Gravatar in the theme, the following code is to be added to themes/yourtheme/templates/PageCommentInterface_singlecomment.ss

<img src="http://www.gravatar.com/avatar/$GravatarHash" width="80" height="80" />

You will probably want to change the html and css so that the gravatar images appear on the left of the blog entry.

I have just used the default implementation of the Gravatar but there other parameters which we can pass to retrieve different image sizes, using a default image and selecting a image rating. The full documentation is on the image requests page.

Cheers.