Displaying Author Avatars

Front End
Version 1.5.8+
6 min read

You are viewing the documentation for Meerkat version 1 for Statamic 2. The latest version is Meerkat 2 for Statamic 3.

Read v2 docs

Since the process of displaying comment author's avatars will generally vary for most sites, Meerkat does not provide many built-in options for getting author's avatar photos. However, Meerkat does provide a powerful extensibility framework for manipulating comment data, including returning avatar images.

Gravatars

Gravatar is a widely used platform for storing and retrieving avatars based on a person's email address. To make integrating your comment thread with Gravatar incredibly simple, Meerkat does provide a special tag just for this purpose:

{{ meerkat:gravatar email="you@example.org" }}

Integrating this into your theme might look something like the following example (note the following example uses Bootstrap's media component):

{{ meerkat:responses as="comments" }}
	
    {{ comments }}
    <div class="media">
      <div class="media-left">
      	<img src="{{ meerkat:gravatar email="{email}" }}"
        	 class="media-object" data-holder-rendered="true"
             style="width: 64px; height: 64px;">
      </div>
      <div class="media-body">
        <h4 class="media-heading"><a name="comment-{{ user_comment:id }}"></a>{{ name }}
        <small class="text-muted">on {{ date format="F j, Y g:i A" }}</small>
        </h4>
        {{ comment }}
      </div>
    </div>
	{{ /comments }}
    
{{ /meerkat:responses }}

The meerkat:gravatar tag does not add any query parameters to the end of the generated image URL; this means that you can add anything you want to the end of the URL without worrying about Meerkat overriding your hard work. The following example demonstrates requesting a specific sized avatar from the Gravatar service:

{{ meerkat:gravatar email="{email}" }}size=200

Meerkat does add the initial ? symbol to the end of the generated image URL to save you one extra key-stroke.

You can learn more about Gravatar's query parameters by viewing their documentation here.

Awesome, your comment thread has now been updated to support Gravatar! However, if you need something more, strap on your adventure gear and continue reading as we will have to extend Meerkat by writing an add-on (writing an addon for an addon? Things are getting meta!).

Custom Avatar Drivers

Meerkat gives you the ability to customize anything about the comment data that is returned to your site's template. One thing we can do with this power is return a URL for comment author's avatar photos.

Before we get started though, you should read through the Statamic documentation covering addon Event Listeners, as they are the primary driver of Meerkat addons. Now that you are a Statamic event system pro, it is time you learned about one of Meerkat's special events:

Meerkat.comments.collecting

This event is raised when Meerkat is assembling (an affectionate) the data for each comment that is returned to your site's template. Let's take a look at this quick example just to get an idea of the basic setup:

<?php

namespace Statamic\Addons\AvatarAddon;

use Statamic\Extend\Listener

class AvatarAddonListener extends Listener
{
    public $events = [
        'Meerkat.comments.collection' => 'modifyComment'
    ];

    public function modifyComment($comment)
    {
        // modify anything about the comment.
        
        // make sure to return the comment back to Meerkat
        return $comment;
    }
}

It might not seem like much, but that is all the scaffolding we have to do to start adding some awesome features to Meerkat that we can take advantage of in our templates. As an example, the following implements the Gravatar service using the event listener setup:

<?php

namespace Statamic\Addons\AvatarAddon;

use Statamic\Extend\Listener;

class AvatarAddonListener extends Listener
{
    public $events = [
        'Meerkat.comments.collection' => 'modifyComment'
    ];

    public function modifyComment($comment)
    {
    	// Get the comment's email address.
        $email = array_get($comment, 'email', null);
        
        // Add a new entry, 'Gravatar', with the avatar URL.
        $comment['gravatar'] = '//www.gravatar.com/avatar/'.md5($email).'?';
        
        // make sure to return the comment back to Meerkat
        return $comment;
    }
}

And when we build the template, we can use our new value like so:

{{ meerkat:responses as="comments" }}
	
    {{ comments }}
    <div class="media">
      <div class="media-left">
      	<img src="{{ gravatar }}"
        	 class="media-object" data-holder-rendered="true"
             style="width: 64px; height: 64px;">
      </div>
      <div class="media-body">
        <h4 class="media-heading"><a name="comment-{{ user_comment:id }}"></a>{{ name }}
        <small class="text-muted">on {{ date format="F j, Y g:i A" }}</small>
        </h4>
        {{ comment }}
      </div>
    </div>
	{{ /comments }}
    
{{ /meerkat:responses }}

That's it! You've just implemented a custom avatar service, the sky is the limit with what you are able to do with this system. You can even add derived values, filter out words, anything! Have fun!