Niwatori (/niwɑθorɪə/: a Japanese word for chicken), is a twenty something web designer and programmer who lives in Bandung, Indonesia.

Using Gravatar on Mephisto Template

After getting comfortable using Mephisto, I’m currently developing a mephisto theme (which is used by this blog right now). It combines Hemingway’s summarized information on the bottom and Plain’s neat navigation concept, and off course with Web 2.0 design style cliche :D. And to add some fancy stuff on my theme, I need to add gravatar system on my comments list.

When developing a Mephisto’s single.liquid template which commonly consist of detailed blog posting, commenting form and comments list, I remembered that on mature blogging system such as WordPress (PHP) or Typo (Ruby on Rails) we often use Gravatar system so our visitor can show their avatar on their comment.

Most of Mephisto’s theme didn’t use gravatar on their comments list, and lack of documentation makes me assume that we should doing some Rails coding to enable gravatar feature on our comment list. But the truth is, there was existing Mephisto’s API to handle this gravatar system.

It was located at /lib/mephisto/liquid/filters.rb, it’s syntax is :

gravatar(comment, size=80, default=nil)

Input variables :

comment (is an array of author, email, comment etc.), the most important part is comment.author_email which is will be converted to MD5 hashed characters (the gravatar id)
gravatar size, it’s default is 80×80 pixels
default gravatar image, when visitor didn’t have any gravatar or didn’t provide a valid email, we can assign a default image.

Let’s just jump right in now, all we have to do is find the commenting part on single.liguid template of our Mephisto template :

<div id="comments">
    <ol>
{% for comment in comments %}
      <li>
        <cite>
          <span class="author">{{ comment.author }}</span>
          <span class="date">
          {{ comment.created_at | strftime: '%m.%d.%y' }}</span>
        </cite>
        {{ comment.body }}
        <div class="clear"></div><br />
      </li>
{% endfor %}
    </ol>
</div>

Insert our gravatar code inside the comment’s iteration :

<div id="comments">
    <ol>
{% for comment in comments %}
      <li>
        {{ comment | gravatar:40,'images/avatar.gif' }} 
        <cite>
          <span class="author">{{ comment.author }}</span>
          <span class="date">
          {{ comment.created_at | strftime: '%m.%d.%y' }}</span>
        </cite>
        {{ comment.body }}
        <div class="clear"></div><br />
      </li>
{% endfor %}
    </ol>
</div>

Voila! The inserted line will get any present comment variable who passed trough it, execute the gravatar rails controller’s definition based on it (the comment array), converting it to gid (gravatar id, from hashed email address) and then set the gravatar size to 40×40 pixel and preparing www.ourblog.com/images/avatar.gif as default gravatar for some gravatarless visitor.

About this entry

You’re currently reading “Using Gravatar on Mephisto Template,” an entry on Hear no chickens, see no chickens, talk no chickens. Published at September 29th 05:30 AM updated at October 3rd 10:23 PM
Sections: Chicken on Rails,