A generator plugin for Jekyll that generated thumbnails of images related to each post. Also includes Liquid templates showing these thumbnails in a page.
Tested with Jekyll 3.1.2.
- rmagick. Tested with version 2.16.0
- Jekyll asset path plugin. Works also without, but the image paths are assumed to use the asset path plugin structure.
Images to process into thumbnails are read from Jekyll front matter. The format is the following:
gallery:
- file: first-image.jpg
title: First image file
- file: second-image.jpg
title: Second image file
Paths are relative to asset path plugin's asset path.
That is, for posts the gallery directory is
assets/posts/<post-title>/ and for pages assets/<page-title>/.
Thumbnails are generated in directory thumbnails in the asset path.
Thumbnails are resized to fit dimensions of 200×120 pixels, or as specified in
_config.yml option thumbnail_size:
thumbnail_gallery:
width: 300
height: 180Generated thumbnails are included in the page as normal assets. You can use
gallery.html in _includes directory as a starting point for a gallery
implementation.
For styling the thumbnail gallery, you can use _gallery.scss in directory _sass as a starting point. It can be referenced from main.css, which must define sass variables thumbnail-gallery-width and thumbnail-gallery-height in Liquid like this:
$thumbnail-gallery-width:
{% if site.thumbnail_gallery.width == nil %}
200px
{% else %}
{{ site.thumbnail_gallery.width}}px
{% endif %}
;
$thumbnail-gallery-height:
{% if site.thumbnail_gallery.height == nil %}
120px
{% else %}
{{ site.thumbnail_gallery.height}}px
{% endif %}
;Also, a shrank copy for post cover image can be made. The photo to resize is by
default cover.jpg. This can be overridden in front matter:
cover: other-image.pngThumbnail dimensions are by default 400×240 pixels. These can be overridden in
_config.yml:
thumbnail_cover:
width: 200
height: 120Cover photo thumbnail is included in pages as normal assets. See includes
post_summary.html and post_summary_content.html in _includes directory
for example.
- Changing something that regerates a thumbnail leads to page being regenerated twice. The reason is that thumbnails are included in Jekyll's watch, so regenerated thumbnail itself is detected.