Skip to main content
This article is a little old. The information herein might not be too accurate.

Add author Gravatar's to your Jekyll site

We follow up our article on adding authors to your Jekyll blog and show you how to introduce some ugly mugshots.

Whilst some people have a face that only a mother would love, it still adds a nice personal touch to show readers who you really are. Before you begin you’ll want to ensure you’ve already added basic authorship to your site using the guide we published recently.

Once you’re at that stage we can look at adding your Gravatar.

Create a liquid filter for generating Gravatar URLs

Gravatar URLs, which are used to source your photo are generated by creating a hash from your email address. We use a plugin for this.

Create a file in your _plugins folder called something like to_gravatar.rb with the following code.

require 'digest/md5'

module Jekyll
  module GravatarFilter
    def to_gravatar(input, size=135)
      "//www.gravatar.com/avatar/#{hash(input)}?s=#{size}"
    end

    private :hash

    def hash(email)
      email_address = email ? email.downcase.strip : ''
      Digest::MD5.hexdigest(email_address)
    end
  end
end

Liquid::Template.register_filter(Jekyll::GravatarFilter)

As this is a plugin it won’t work out of the box with GitHub pages as they don’t allow the use of plugins. To get plugins working on GitHub pages we compile the site before deployment using a rake task

Add an image to your author information block

Now we have a mechanism in place for generating the URL we can quite simply add an image tag to the authors profile and use the liquid filter to convert their email address.

<!-- Output author details if some exist. -->
{% if author %}
    <span>
        <!-- Mugshot. -->
        <img src="{{ author.email | to_gravatar }}" alt="A photo of {{ author.name }}" />

        <!-- Personal Info. -->
        Written by <a href="{{ author.web }}" target="_blank">{{ author.name }}</a>
    </span>
{% endif %}

Rebuild and admire

Once your site has been rebuilt (to instantiate the new plugin) you should see your beautiful face load onto the screen.

Continuing on from this we’ll soon look at how to get Google to display your face along with your articles when they appear in search results.