Jekyll Tag Plugin Example

Jekyll custom liquid tag plugin example using Gravatar. Gravatar powers your public profile, visible wherever you post, comment, and interact online.

Jan 29, 2023

Jekyll custom liquid tag plugin example using Gravatar. Gravatar powers your public profile, visible wherever you post, comment, and interact online.

Create Jekyll Pugin

Create a folder _plugins in Jekyll root directory and place the below ruby code in jekyll-gravatar-tag.rb file.

..
├── 404.html
├── about.md
├── _config.yml
├── Gemfile
├── Gemfile.lock
├── index.md
├── _plugins
│   └── jekyll-gravatar-tag.rb
├── _posts
│   └── 2023-01-28-jekyll-tag-plugin-example.md
└── _site

Gravater Plugin Code

File name: jekyll-gravatar-tag.rb

require 'digest'

module Jekyll
  class Gravatar < Liquid::Tag

    def initialize(tag_name, content, tokens)
      super
      @content = content
    end

    def render(context)
      md5digest = Digest::MD5.hexdigest @content.downcase
      %Q{<img src="https://www.gravatar.com/avatar/#{ md5digest }" title="Gravatar" />}
    end
  end
end

Liquid::Template.register_tag('gravatar', Jekyll::Gravatar)

Putting plugin to use

Create a blog page and include the following snippet in the code.

{% gravatar mail@example.com %}

Plugin results

HTML output

<img src="https://www.gravatar.com/avatar/a27bc417a4d6c5ad1b7c3af185e99a0b" title="Gravatar" />

Using Plugin in Card View

John Smith

mail@example.com

Last updated 3 mins ago


References