jekyll-thumb

This Jekyll plugin automatically generates image thumnails using the vips library and the accompanying ruby wrapper, ruby-vips.

libvips is like imagemagick but more modern.

The plugin adds a thumb Liquid tag that can be used like so:

{% thumb src="/image.png" width="100" %}

This will generate the thumbnail and output something like:

<a href="/image.png" target="_blank" class="thumb">
  <img src="/image-100w.png" width="100" height="50">
</a>

This project was made because I needed thumbnails for my blog and I didn't want to use imagemagick. I made it in like an hour and it definitely has bugs. OTOH it's 119 lines of code so if you don't like something you can just change it.

Add the gem to your Gemfile:

gem 'jekyll-thumb'

Then bundle:

$ bundle

Or install it yourself with:

$ gem install jekyll-thumb

Finally install vips using your operating system's package manager, eg.

$ brew install vips

Use it like this in any Liquid template:

{% thumb src="/image.png" width="100" %}

You must specify either a width or a height, but not both. Whichever dimension you specify, the other will be scaled to a matching ratio.

To use variables for the image or the dimensions, simply leave out the quotes:

{% thumb src=page.cover_image height=page.cover_image_height %}

By default this will wrap the resized img in a link to the original, with a target="_blank" attribute. To supress this, pass a link=false option to the thumb tag.

If you have optipng installed and in your PATH, you can tell the plugin to run it on all generated png images.

Just add:

thumb:
  optipng: true

To your _config.yml

Currently the plugin doesn't optimize other image formats, except for stripping color palettes.

Optimizing and resizing can take a while for some images. You can specify a cache folder in your Jekyll config to let jekyll-thumb cache images between runs.

thumb:
  cache: "/tmp/images"

Make an issue, send a pull request, you know the drill.

Project shamelessly ripped off of netlify/jekyll-srcset, it's basically a find-and-replace job.

Copyright (c) 2018 Jonathan Davies. See LICENSE for details.