Simple image resizing filter for Jekyll 3 and 4
Add the plugin gem to your Gemfile as below, then install it with Bundler.
group :jekyll_plugins do
gem "jekyll-resize", git: "https://github.com/UCSD-E4E/jekyll-resize"
end
The resize
filter will be available in Liquid (in your Markdown and HTML) so you can use it for a JPEG or PNG file.
Here we resize an image to max width and max height of 800 pixels and converting it to webp with an image quality of 80:
{{ "my-image.png" | resize: "800x800>,webp,80" }}
Here we resize an image to max width and max height of 800 pixels with an image quality of 80:
{{ "my-image.png" | resize: "800x800>,,80" }}
Here we resize an image to max width and max height of 800 pixels and converting it to webp:
{{ "my-image.png" | resize: "800x800>,webp" }}
Here we resize an image to max width and max height of 800 pixels:
{{ "my-image.png" | resize: "800x800>" }}
Here we crop the image to only show the frist 50% (see geomgery for imagemagick for all possible options):
{{ "my-image.png" | resize: "800x800>,webp,80,50%X100%" }}
Note crop occurs before resizing. The reason crop is the last parameter is to keep it compatible with previous fork
That takes care of:
- generating the reduced image.
- providing a link to the file.
See the docs linked below for a more detailed example using the filter with an HTML img
tag.
Why you should use this plugin and how to install and use it in a Jekyll project
See Contributing doc.
Released under MIT by @UCSD-E4E.
Original license - MIT.
See Fork notes for more details and a list of improvements this fork provides.