assemble-image-resizer

Assemble plugin that allows to resize your images

npm install assemble-image-resizer
9 downloads in the last month

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].

200x300
fit Resize image fit within 200x300 (touch from inside).
200x

Resize image to width of at least 200.
x300
Resize image to height of at least 300.
200x300#
fill Resize image to fill 200x300 (touch from outside).
200x.jpg
Resize image to width of at least 200 and convert it to a JPEG.

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.

Authors

Marcel Jackwerth

Copyright 2013 Marcel Jackwerth

MIT License

npm loves you