Jekyll plugin to generate thumbnails from a directory of images and display them with a Liquid tag
- Install ImageMagick and the RMagick gem (Here is good instruction how to Install rmagick on OS X Mountain Lion).
- Drop
galleries.rb
into your Jekyll site's_plugins
folder. - Add the following to your
_config.yml
and customize to taste.
gallerytag:
source_dir: images/gallery
destination_dir: images/thumbs
thumb_width: 150
thumb_height: 150
columns: 4
custom_attribute_name: data-lightbox
source_dir
— The path (relative to your top Jekyll directory, where is_config.yml
stored) to the folder containing your gallery images. Default value images/gallerydestination_dir
— The path to you thumbnails (relative to your top Jeyll directory). Recommend to use a different path in relation tosource_dir
to have possibility easily remove all thumbnails in one time. Default value: images/thumbsthumb_width
— The width, in pixels, you want your thumbnails to have. Default value: 150.thumb_height
— The height, in pixels, you want your thumbnails to have. Default value: 150.columns
— How many columns galleries should display when the Liquid tag is used. Default value: 4.custom_attribute_name
- add into "a" tag custom attribute with specified name which contain the "galleryname" (userful for lightbox plugins, when need to tag). By default custom attribute name is rel for backward capability with old version of JekyllGalleryTag.
Jekyll will automatically generate (during builds) thumbnails for any images in the folder specified in source_dir
variable of _config.yml
and put them into destination_dir
. To display them in a post, you would use a Liquid tag set up like this:
{% gallery galleryname %}
subfolder/myfirstimage.jpg:: A caption!
subfolder/myseconfimage.png:: Another caption
subfolder/mythirdimage.jpg
subfolder/myfourthimage.png
subfolder/myfifthimage.jpg
{% endgallery %}
subfolder/
is a directory with images in you source_dir
.
Jekyll will output some HTML that is (intentionally) similar to what WordPress does for galleries in posts, making it relatively simple to tweak your CSS. It will also add custom attribute (default - rel
) to the links, which contain the "galleryname" text as shown in the above example. This makes is easy to integrate a lightbox script like FancyBox or Lightbox2.
You can see it in action on my personal blog, here.