Assemble-image-resizer NPM

assemble-image-resizer

Assemble plugin for resizing images found in your templates.

Installation

From the same directory as your project's Gruntfile and package.json, install this plugin with the following command:

npm install assemble-image-resizer --save-dev

Modify your assemble-options in your Gruntfile so that the assemble-image-resizer plugin is used. You can also specify imageResizer-options (optional).

grunt.initConfig({
  // ...
  
  assemble: {
    options: {
      // ...
      plugins: [require("assemble-image-resizer")],
      imageResizer: {
        srcRoot: "public", // default
        destRoot: "dest", // default
        subpath: "resize-cache", // default
        defaultFormat: "jpg", // default is "same as source"
      }
      // ...
    },
  },
  
  // ...
}

With the above configuration an image will

be loaded from public/image.png,
be stored in dest/resize-cache/resized-image.jpg, and
have the URL /resize-cache/resized-image.jpg.

Usage (with `assemble-liquid`)

<div>
  {{ "/images/selfie.png" | resize:"128x128#" | image_tag }}
</div>

With the example-configuration from above this will output

<div>
  <img src="/resize-cache/selfie.png-128x128h.jpg">
</div>

Possible resize formats

The syntax of the resize-argument is [width]x[height][flags][.extension].

To-Do

Add option to specify output format (png for alpha-support).
Add option to modify JPEG-quality.
Add an option that allows customization of missing-file handling (ignore, fail, or generate placeholder).
Add !-flag to allow non-proportional resizing.
Add support for conditional < and >-flags, that only resize if smaller and if larger respectively.