Gravatar Support in Shopify

By Joshua on June 23 2010

While Shopify provides a great ecommerce solution, the built-in blogging software isn’t as feature-rich as WordPress or Blogger. One of the more annoying issues for me was lack of avatar support. Fortunately, the Shopify staff recently made it much easier to show user avatars.

Gravatar

If you’ve commented on very many blogs, it’s likely that you already know what Gravatar is. The name stands for “Globally Recognized avatar”. It is a simple service that lets blog comment systems pull user’s avatars from Gravatar based on their email addresses. So, for example, if you comment below and you have a Gravatar, it will appear beside your name.

Shopify doesn’t provide direct integration with Gravatar, but it provides something almost as good: access to the MD5 filter.

The Liquid Code

<div class="comment">
<p class="comment-meta">
<img src="http://www.gravatar.com/avatar/{{comment.email | md5}}.jpg?s=40" alt="" class="gravatar" />
<cite class="comment-name">{{ comment.author }}</cite> on {{ comment.created_at | date: "%B %d, %Y" }}
</p>
{{ comment.content }}
</div>

How it works

Gravatar image urls are based on an MD5 hash of the user’s email address. So, for example, since the MD5 hash of blank@blankety.com is “9e12b1f0ebf9e4b36e539fcb767a2709,” the image url would be “http://www.gravatar.com/avatar/9e12b1f0ebf9e4b36e539fcb767a2709.jpg.”

All the magic happens in that “{{comment.email | md5}}.” This tells Shopify to convert the email address into it’s MD5 hash, which is all you need to construct the full avatar URL.

Wondering what the “?s=40” is? That’s just the size of the image Gravatar should give you.

See it in action

If you want to see a live example, check out the comment section in the Alternative theme.