Skip to content

jrjohnson/ember-cli-image-transformer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Jun 19, 2019
c894a90 · Jun 19, 2019
Jun 14, 2019
Nov 5, 2017
Nov 5, 2017
Feb 8, 2019
Jun 19, 2019
May 3, 2019
Nov 5, 2017
Nov 5, 2017
Nov 5, 2017
Feb 8, 2019
Jun 6, 2019
May 3, 2019
Feb 8, 2019
Sep 27, 2018
Jun 19, 2019
Nov 5, 2017
Feb 8, 2019
Feb 8, 2019
Jun 6, 2019
Jan 25, 2018
Sep 27, 2018
Jun 19, 2019
Jun 19, 2019
Jul 26, 2018

Repository files navigation

ember-cli-image-transformer

Build Status Ember Observer Score

Transform Images for your Ember Application from One Source Image

I hate having to create a bunch of identical images for use as icons and favicon images for my application, so I created this addon to take a single source image and transform it into many images of differing sizes, types, and backgrounds.

It is built using EmberJS and takes advantage of the awesome Sharp library to do the heavy lifting.

Compatibility

  • Ember.js v2.18 or above
  • Ember CLI v2.13 or above
  • Node.js v8 or above

Installation

ember install ember-cli-image-transformer

Usage

Create an ember-cli-image-transformer section in your ember-cli-build.js file with an images array. Each element in the array represents a different set of images to be generated.

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    'ember-cli-image-transformer': {
      images: [
        {
          inputFilename: 'public/square.svg',
          outputFileName: 'icon-square',
          convertTo: 'png',
          sizes: [16, 32, 45, 900],
        },
        {
          inputFilename: 'public/circle.svg',
          outputFileName: 'transparent-circle',
          convertTo: 'png',
          background: {r: 255, g: 255, b: 255, alpha: 0},
          sizes: [100],
        }
      ]
    }
  });

All generated images will be placed into the public/assets path of your application.

Usage in a template

<!-- application.hbs -->
<img src='assets/transparent-circle100.png'>

Image Options

Key Required Default Value Example Description
inputFileName ✔️ none public/circle.svg Where (relative to the application root) to find the input image
outputFileName ✔️ none transparent-circle This is combined with the convertTo and size to create the output file eg transparent-circle92.png
convertTo ✔️ none png The output file type
sizes ✔️ none [92, 150] An array of image sizes to produce
destination assets/icons images/wherever/you/want The destination directory for the output images relative to /public
background none {r: 255, g: 255, b: 255, alpha: 0} Add a background color to the image.

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.