First download and install GraphicsMagick. In Mac OS X, you can simply use Homebrew and do:
brew install graphicsmagick
This plugin requires Grunt.
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
`js grunt.loadNpmTasks('grunt-gm-picturefill'); `
The "gm_picturefill" task
$3
In your project's Gruntfile, add a section named gm_picturefill to the data object passed into grunt.initConfig().`js grunt.initConfig({ gm_picturefill: { task_one: { options: { // Task-specific options go here. }, files: { 'path/to/dest/dir': ['path/to/source/one','path/to/source/two'] } }, }, }) `
The break point for which the images is to be resized eg.
'40.063em' or '320px'.
##### prefix Type:
String
A string that uniquely identifies an image resized for a particular viewport size eg.
'xs' or 'small'.
If left
'' (empty), the breakpoint will be added as the prefix.
##### size Type:
Object
An object containing
width and height attributes used for resizing the images.
__Note:__ Aspect ratio of the image will allways be maintained.
##### quality Type:
Number
The quality to be maintained for the resized images. Ranges from
0 to 100.
#### options.createSample Type:
Boolean
Default value:
true
Flag to create the sample file containing the necessary markup to use the resized images with the Picturefill plugin.
#### options.sampleOutputPath Type:
String
Default value:
'./'
Path to the directory where the sample file will be created for reference.
$3
#### Default Options
`js grunt.initConfig({ gm_picturefill: { default:{ options: {}, files: { 'path/to/rsized': ['path/to/original'] } } } }) ` In this example, the default options are used to create resized images in the folder named resized from the folder original for the breakpoints 320px,768px,1024px and 1280px. So if there exists a file named sample.png in the original folder, then after the task is run it would create sample-xs.png,sample-sm.png,sample-md.png and sample-lg.png in the resized folder and create the following markup in the picturefill_sample directory.`html
`
#### Custom Options
`js grunt.initConfig({ gm_picturefill: { custom:{ options: { picturefill:[ { breakpoint:'768px', size:{ width:768, height:768 } prefix:'small', quality:50 }, { breakpoint:'1280px', size:{ width:1280, height:1280 } prefix:'large', quality:100 } ] }, files: { 'path/to/rsized': ['path/to/original'] } } } }) ` In this example, custom options are used to do create two resized images for the breakpoints 768px and 1280px with the prefix small and large respectively. So if there exists a file named sample.png in the original folder, then after the task is run it would create sample-small.png and sample-large.png in the resized folder and create the following markup in the picturefill_sample directory.`html
``
Contributing
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.
Release History
_(0.0.4)_
License
Copyright (c) 2014 Nisheed Jagadish. Licensed under the MIT license.