mitsake

Adding more stuff to the web

Images in Jekyll

I like using Markdown to write posts, but one of the problems I have with it is that the image syntax is a bit basic. For example, you can’t give images a CSS class which is how I position both of the images I’ve currently got on the site. Using regular <img> tags works but isn’t particularly neat.

Fortunately, Brandon Mathis (the designer of Octopress) has written a plugin for Jekyll that adds a Liquid image tag. To add the plugin, simply add image_tag.rb to your Jekyll _plugins directory. The syntax (below) is straightforward; one thing I’ve picked up from the Octopress documentation is that you only need to quote arguments that have spaces in them.

{% img class /path/to/image.png width height 'title text' 'alt text' %}

Update (28 January 2018): After six years of using this plugin, I’ve since moved a method that uses the standard Markdown image ![Alt text](link) syntax. Credit to James Thorne for writing it up