Dev Notes

Software Development Resources by David Egan.

Responsive Images: Jekyll


Jekyll
Rory Egan

How to add a responsive image to a Jekyll post:

Create a folder called assets in the root directory of your project, into which any images, downloads or any other assets are placed. They can then be linked to in the post.

Install jekyll-image-tag. This requires both Minimagick and Imagemagick to work.

You can install Minimagick with the command: sudo gem install jekyll-minimagick

In a plugin file within your projects _plugins directory add:

# _plugins/my-plugin.rb
require "jekyll-minimagick"

Define presets in your _config.yml file:

		image:
 		source: assets
 		 output: generated
  		presets:
   	 		users:
      		attr:
        	class: img-responsive
        	itemprop: image
      	width: 350
    	half:
    width: 500
    height: 500

Once you have the requirements installed, download jekyll-image-tag and copy image_tag.rb to your Jekyll _plugins folder.

Link the image from your assets folder to your post using the format:

{% image preset or WxH path/to/img.jpg attr="value" %}

My code looked like this:

{% image 300x300 Caribbean_reef_shark.jpg class="img-responsive" %}

comments powered by Disqus