Integrating Gravatar with the Joomla com_content component

The Joomla! content management component, com_content, by default doesn’t support the display of avatars for authors that are creating content for your site; an important component for creators in building their online presence. Thankfully, using the external API we can easily integrate this feature into the component.

Gravatr and Joomla

Integrate Gravatar with Joomla

If you’re not familiar with Gravatar, it’s essentially a service for storing and retrieving a unique avatar image; if you’re creating content for a website that supports it you can just enter your email address and retrieve your avatar. It’s a simple functionality, but one that has a lot of use in the ever-growing online market where defining your online presence and brand can be spread across multiple websites, not just your own. It also is a particularly elegant solution when a CMS doesn’t support adding avatars by user, as is the case in the Joomla! com_content component.

The process of implementing this solution is very easy and requires the addition of a small fragment of code. Downloading the avatar connected to a specific email address is also a piece of cake; we can just display the image located at a specific URL:

http://www.gravatar.com/avatar/HASH

Where “HASH” is the result of running an MD5 hash function on the email address, which makes sure that email addresses are protected against bots that scan the network for email addresses to use in spam campaigns.

Two other important parameters here are:

  • d – This parameter specifies the path to a default avatar that can be used when a user does not have a Gravatar account connected to their email address.
  • s – This parameter allows for the for the size of the avatar (in pixels) to be defined before downloading (avatars in Gravatar are always square).

To display the avatar in a Joomla template we’ll need to use the following code; bear in mind that this is specifically written for use in the com_content component:

$author_obj = JFactory::getUser($this->item->created_by);
$author_email = $author_obj->email;    

$avatar_hash = md5(strtolower(trim($author_email)));
$avatar_size = 120; 

$avatar_url  = '//www.gravatar.com/avatar/'.$avatar_hash.'.jpg';
$avatar_url .= '?s='.$avatar_size;

echo '<img src="'.$avatar_url.'" alt="" />';

The first thing this code does is download the user object of the user who created the post (hence the use of $this->item->created_by).

Then, we load the email address from the downloaded user object and use it to generate an MD5 hash function value as discussed at the beginning of this section, making sure to parse all capital letters to lowercase and removing unnecessary spaces at the beginning and end of the email address.

Next, the last major thing we need to do is generate the avatar’s address in Gravatar; as mentioned earlier the MD5 hash value generated by the email address in the previous step is the key to finding the avatar. Optionally, we may also assign the $avatar_size variable to the parameter taken from the template settings to give the user more control.

Finally, with everything generated, we use the resultant email address to display the Gravatar image.

Gravatar also supports SSL; you just need to change the avatar address from http to https or avoid using a protocol in the URL within your code, as we’ve done in the above code.

Summary

The solution covered in this article expands the flexibility of the article view available in the com_content component to bring it closer to K2, which supports Gravatar by default. We’ve applied this technique successfully in our TechNews, Photo and Writer Joomla templates to add an additional layer of style to their layouts, so it’s well-worth familiarizing yourself with this functionality. If you want to discover all the possiblities provided by the Gravatar API then check out this website for more information.

Integrating Gravatar with the Joomla com_content component 3.555 (70.91%) 11 votes
Share
This article was first published October 26th, 2015