Middleman Simple Thumbnailer is a Middleman extension that allows you to create image thumbnails by providing
resize_to option to image_tag helper.
Put this line into your
Enable the extension in
And modify your
image_tag's by adding
= image_tag image, resize_to: '50x50', class: 'thumbnail'
You can also use the
image_path helper the same way in place where you need only the path of the resized image:
<picture> <source srcset="<%= image_path 'original.jpg', resize_to: 1200 %>" media="(min-width: 900px)"> <%= image_tag "original.jpg", resize_to: "400%", class: 'the-image-class' %> </picture>
This extension use ImageMagick (via mini_magick) to resize the images.
resize_to format is therefore the one defined ny ImageMagick. The documentation can be found there.
This mode is the default operating mode for this extension. The images are generated according to their declaration in the helpers. See the known limitations paragraph below for known limitation in this mode.
In this mode, the resized file are declared. They are then added to the sitemap and generated at the same time than the other files.
To activate this new mode, the option
:use_specs must be used when activating the extension.
activate :middleman_simple_thumbnailer, use_specs: true
Then the resizing specifications must be declared in a special Middleman data file. By default the extension will look for
This file must contains a list of mappings with the following keys:
path: the relative path of the image file in the
source\imagesfolder. This can be a glob pattern (https://ruby-doc.org/core/Dir.html#method-c-glob) (still relative to the
resize_to: the ImageMagix resize parameter
example (in yaml, file
--- - path: original.jpg resize_to: 10x10 - path: "*.jpg" resize_to: 5x5
The use of the
image_path helpers stay the same.
In this mode if a resizing specification found in an
image_path helper is not declared in the specification data file, a warning is emitted and the data file is rewritten to include the resizing specification. If the specification file doesn't exist, it is created (this behavior can be configured).
||In development, add a Rack middleware to serve the resized image from cache|
||Directory (relative to project root) for cached thumbnails.|
||Wether or not use resize specfication data file|
||name of the specification data file. It must follow the Middleman data file name convention.|
||defaut specification format (and extension). Can be 'yml', 'yaml', 'json'|
||save previous specification data file|
||Warn about missing image files in the specification file and add them to it. The spécification file will be overwritten.|
In the dynamic mode, this extension is unable to update the sitemap. Some extensions (like middleman-s3_sync) uses the content of the sitemap to do their work. Therefore, the generated resized images will not be seen by such extensions, even if they are corectly generated.
- if option
use_cache_devis set to
truethumbnails will be created when accessed, and are served with a rack middleware from the cache folder.
- Otherwise thumbnails will be created on fly and presented as a base64 strings.
During build thumbnails will be created as normal files and stored in same dir as their originals.