Skip to content
Transform Images for your Ember Application
Branch: master
Clone or download
Latest commit 5cc7d8d Jun 14, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.dependabot Add config file for dependabot Jun 14, 2019
addon Initial Commit from Ember CLI v2.16.1 Nov 5, 2017
app Initial Commit from Ember CLI v2.16.1 Nov 5, 2017
config Update ember-cli and blueprints Feb 8, 2019
lib Replace removed background function Jun 6, 2019
tests Update ember-cli to v3.9.0 May 3, 2019
vendor Initial Commit from Ember CLI v2.16.1 Nov 5, 2017
.editorconfig Initial Commit from Ember CLI v2.16.1 Nov 5, 2017
.ember-cli Initial Commit from Ember CLI v2.16.1 Nov 5, 2017
.eslintignore Update ember-cli and blueprints Feb 8, 2019
.eslintrc.js Ran ember-cli-update to update blueprints Jun 6, 2019
.gitignore Update ember-cli to v3.9.0 May 3, 2019
.npmignore Update ember-cli and blueprints Feb 8, 2019
.template-lintrc.js
.travis.yml Ran ember-cli-update to update blueprints Jun 6, 2019
.watchmanconfig
CONTRIBUTING.md
LICENSE.md Update ember-cli and blueprints Feb 8, 2019
README.md Ran ember-cli-update to update blueprints Jun 6, 2019
ember-cli-build.js Update blueprints for ember-cli 2.18.1 Jan 25, 2018
index.js Update ember-cli to 3.4.3 Sep 27, 2018
package-lock.json Bump rsvp from 4.8.4 to 4.8.5 Jun 7, 2019
package.json 3.0.0 Jun 6, 2019
testem.js Update ember-cli to v3.3.0 Jul 26, 2018

README.md

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.

You can’t perform that action at this time.