Image resizing filter for Jekyll 3 and 4
If your page is loading too slowly because of large images and you can't be bothered to manually create thumbnails (images with reduced dimensions), then this Jekyll filter is for you.
This easy-to-use filter will create and link to a thumbnail version of your image, so your page can load quickly.
What this filter can do:
- Create downsized images from your existing images.
- Resizing is done at build time so thumbnails are always up to date.
- Resize only images that need to be resized.
- Provides an easy way to embed the image.
- Allow any dimensions you wish.
- The full-size image is preserved.
- Validates images - you'll get an error at build time.
Add the plugin gem to your Gemfile and then install it with Bundler.
gem "jekyll-resize", git: "https://github.com/MichaelCurrin/jekyll-resize"
Now you can use the filter like this, in markdown or HTML:
{{ image_path | resize: "800x800>" }}
That takes care of both generating the thumbnail image for you as well as providing a link to the file - magic.
See more details in the Usage part of the docs.
Showcasing this plugin in an image gallery Jekyll site
This filter is especially useful if you have a gallery of say 20 images and loading all full-sized images would be terribly slow. Once you have the thumbnails embedded on the page, you can easily link each to the original full-size image so it can open in a modal overlay or a separate page.
Here is a Jekyll project that uses this filter for a gallery and allows viewing of then full-size images.
See docs.
Submit a Pull Request if you have improvements.
- CloudCannon/jekyll-resize - the original for this repo.
- rbuchberger/jekyll_picture_tag
- mmistakes/jekyll-picture-tag - a fork of the above by
@mmistakes
.
Released under MIT.
Original license - MIT. Forked from CloudCannon/jekyll-resize (RubyGems jekyll-resize) to add Jekyll 4 support for my projects.
Notable changes:
- Updated jekyll-resize.gemspec to use Jekyll 4.
- Added
require "mini_magick"
to the jekyll-resize.rb file to avoid a runtime error as constantMiniMagick::Image
not defined (this error was not present on Jekyll 3). - Created this
README.md
file and the docs directory.