Add a height attribute to images output (#19)

README.md

@@ -19,7 +19,7 @@ responsive-loader uses [jimp](https://github.com/oliver-moran/jimp), a pure JS i
 const responsiveImage = require('responsive?sizes[]=100,sizes[]=200,sizes[]=300!myImage.jpg');
 
 // responsiveImage.srcSet => '2fefae46cb857bc750fa5e5eed4a0cde-100.jpg 100w,2fefae46cb857bc750fa5e5eed4a0cde-200.jpg 200w,2fefae46cb857bc750fa5e5eed4a0cde-300.jpg 300w'
-// responsiveImage.images => [{path: '2fefae46cb857bc750fa5e5eed4a0cde-100.jpg', width: 100}, {path: '2fefae46cb857bc750fa5e5eed4a0cde-200.jpg', width: 200}, {path: '2fefae46cb857bc750fa5e5eed4a0cde-300.jpg', width: 300}]
+// responsiveImage.images => [{height: 50, path: '2fefae46cb857bc750fa5e5eed4a0cde-100.jpg', width: 100}, {height: 100, path: '2fefae46cb857bc750fa5e5eed4a0cde-200.jpg', width: 200}, {height: 150, path: '2fefae46cb857bc750fa5e5eed4a0cde-300.jpg', width: 300}]
 // responsiveImage.src => '2fefae46cb857bc750fa5e5eed4a0cde-100.jpg'
 // responsiveImage.toString() => '2fefae46cb857bc750fa5e5eed4a0cde-100.jpg'
 React.render(<img srcSet={responsiveImage.srcSet} src={responsiveImage.src} />, el);

index.js

@@ -68,7 +68,8 @@ module.exports = function loader(content) {
             return queueCallback(null, {
               src: '__webpack_public_path__ + ' + JSON.stringify(fileName + ' ' + width + 'w'),
               path: '__webpack_public_path__ + ' + JSON.stringify(fileName),
-              width: width
+              width: width,
+              height: this.bitmap.height
             });
           });
     }
@@ -89,7 +90,7 @@ module.exports = function loader(content) {
     return q.awaitAll((queueErr, files) => {
       const srcset = files.map(f => f.src).join('+","+');
 
-      const images = files.map(f => '{path:' + f.path + ',width:' + f.width + '}').join(',');
+      const images = files.map(f => '{path:' + f.path + ',width:' + f.width + ',height:' + f.height + '}').join(',');
 
       const firstImagePath = files[0].path;
 

test/index.js

@@ -2,32 +2,47 @@ const test = require('tape');
 
 test('multiple sizes', t => {
   const multi = require('../index?sizes[]=500&sizes[]=2000!./cat-1000.jpg');
-  t.equal('foobar/ac8fbe83765514062b5da3b8966cd475-500.jpg 500w,foobar/6582e69db43187e14b01fa76c021cf71-1000.jpg 1000w', multi.srcSet);
-  t.equal('foobar/ac8fbe83765514062b5da3b8966cd475-500.jpg', multi.src);
-  t.equal('foobar/ac8fbe83765514062b5da3b8966cd475-500.jpg', multi.toString());
+  t.equal(multi.srcSet, 'foobar/9a7bdeb1304946f1fcd4a691409f286a-500.jpg 500w,foobar/d86a05082a1951c67af20f0b453ff981-1000.jpg 1000w');
+  t.equal(multi.src, 'foobar/9a7bdeb1304946f1fcd4a691409f286a-500.jpg');
+  t.deepEqual(multi.images, [
+    {path: 'foobar/9a7bdeb1304946f1fcd4a691409f286a-500.jpg', width: 500, height: 450},
+    {path: 'foobar/d86a05082a1951c67af20f0b453ff981-1000.jpg', width: 1000, height: 900}
+  ]);
+  t.equal(multi.toString(), 'foobar/9a7bdeb1304946f1fcd4a691409f286a-500.jpg');
   t.end();
 });
 
 test('single size', t => {
   const single = require('../index?size=500!./cat-1000.jpg');
-  t.equal('foobar/ac8fbe83765514062b5da3b8966cd475-500.jpg 500w', single.srcSet);
-  t.equal('foobar/ac8fbe83765514062b5da3b8966cd475-500.jpg', single.src);
-  t.equal('foobar/ac8fbe83765514062b5da3b8966cd475-500.jpg', single.toString());
+  t.equal(single.srcSet, 'foobar/9a7bdeb1304946f1fcd4a691409f286a-500.jpg 500w');
+  t.equal(single.src, 'foobar/9a7bdeb1304946f1fcd4a691409f286a-500.jpg');
+
+  t.equal(single.toString(), 'foobar/9a7bdeb1304946f1fcd4a691409f286a-500.jpg');
   t.end();
 });
 
 test('with size defined in webpack.config.js', t => {
   const multi = require('../index!./cat-1000.jpg');
-  t.equal('foobar/ac8fbe83765514062b5da3b8966cd475-500.jpg 500w,foobar/16c2a62d860f67276d750a7777ec932e-750.jpg 750w,foobar/6582e69db43187e14b01fa76c021cf71-1000.jpg 1000w', multi.srcSet);
-  t.equal('foobar/ac8fbe83765514062b5da3b8966cd475-500.jpg', multi.src);
-  t.equal('foobar/ac8fbe83765514062b5da3b8966cd475-500.jpg', multi.toString());
+  t.equal(multi.srcSet, 'foobar/9a7bdeb1304946f1fcd4a691409f286a-500.jpg 500w,foobar/039c81f20aade648de7268c09c91d44d-750.jpg 750w,foobar/d86a05082a1951c67af20f0b453ff981-1000.jpg 1000w');
+  t.equal(multi.src, 'foobar/9a7bdeb1304946f1fcd4a691409f286a-500.jpg');
+  t.deepEqual(multi.images, [
+    {path: 'foobar/9a7bdeb1304946f1fcd4a691409f286a-500.jpg', width: 500, height: 450},
+    {path: 'foobar/039c81f20aade648de7268c09c91d44d-750.jpg', width: 750, height: 675},
+    {path: 'foobar/d86a05082a1951c67af20f0b453ff981-1000.jpg', width: 1000, height: 900}
+  ]);
+  t.equal(multi.toString(), 'foobar/9a7bdeb1304946f1fcd4a691409f286a-500.jpg');
   t.end();
 });
 
 test('output should be relative to context', t => {
   const multi = require('../index?name=[path][hash]-[width].&context=./!./cat-1000.jpg');
-  t.equal('foobar/test/ac8fbe83765514062b5da3b8966cd475-500.jpg 500w,foobar/test/16c2a62d860f67276d750a7777ec932e-750.jpg 750w,foobar/test/6582e69db43187e14b01fa76c021cf71-1000.jpg 1000w', multi.srcSet);
-  t.equal('foobar/test/ac8fbe83765514062b5da3b8966cd475-500.jpg', multi.src);
-  t.equal('foobar/test/ac8fbe83765514062b5da3b8966cd475-500.jpg', multi.toString());
+  t.equal(multi.srcSet, 'foobar/test/9a7bdeb1304946f1fcd4a691409f286a-500.jpg 500w,foobar/test/039c81f20aade648de7268c09c91d44d-750.jpg 750w,foobar/test/d86a05082a1951c67af20f0b453ff981-1000.jpg 1000w');
+  t.equal(multi.src, 'foobar/test/9a7bdeb1304946f1fcd4a691409f286a-500.jpg');
+  t.deepEqual(multi.images, [
+    {path: 'foobar/test/9a7bdeb1304946f1fcd4a691409f286a-500.jpg', width: 500, height: 450},
+    {path: 'foobar/test/039c81f20aade648de7268c09c91d44d-750.jpg', width: 750, height: 675},
+    {path: 'foobar/test/d86a05082a1951c67af20f0b453ff981-1000.jpg', width: 1000, height: 900}
+  ]);
+  t.equal(multi.toString(), 'foobar/test/9a7bdeb1304946f1fcd4a691409f286a-500.jpg');
   t.end();
 });