Adding Gravatar images to the SilverStripe Blog

Posted by Gav on 25 June 2010 | 5 Comments

Tags: , ,

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.


Post your comment

Comments

mr5rule says:

Thanks for the tutorial. Very simple and easy to understand.

How can i decorate redirect screen?

Posted by mr5rule, 18th April 2011 9:41 am (4 years ago)

gav says:

@colin - no worries. most of the hard work was done over at ssbits.

Posted by gav, 29th March 2011 8:01 am (4 years ago)

Colin Burns says:

Thanks for the article and the reference to SSBITS for adding the email address. Pretty simple to follow given how complicated it much have been to work out adding the email address.

Regards.
Colin

Posted by Colin Burns, 29th March 2011 7:49 am (4 years ago)

Felix Lee says:

Awesome, thanks for this tutorial, very helpful!!

Posted by Felix Lee, 29th June 2010 6:06 am (4 years ago)

Gav says:

This is just a sample post to show the gravatar image.

Posted by Gav, 26th June 2010 12:19 pm (4 years ago)

RSS feed for comments on this page | RSS feed for all comments