responsive-loader - npm Package Compare versions

Comparing version 0.6.1 to 0.7.0

CHANGELOG.md

 # Change Log
 
+## 0.7.0
+
+- Add `placeholder` option ([#16](https://github.com/herrstucki/responsive-loader/pull/16))
+- Add `width` and `height` attributes to output ([#19](https://github.com/herrstucki/responsive-loader/pull/19))
+
 ## 0.6.1
@@ -4,0 +9,0 @@

index.js

@@ -20,2 +20,4 @@ const path = require('path');
   const outputContext = query.context || options.context || '';
+  const outputPlaceholder = query.placeholder || query.placeholder !== false && options.placeholder || false;
+  const placeholderSize = query.placeholderSize || options.placeholderSize || 40;
   // JPEG compression
@@ -72,3 +74,4 @@ const quality = parseInt(query.quality, 10) || options.quality || 95;
               path: '__webpack_public_path__ + ' + JSON.stringify(fileName),
-              width: width
+              width: width,
+              height: this.bitmap.height
             });
@@ -91,10 +94,42 @@ });
 
+    if (outputPlaceholder) {
+      q.defer(function generatePlaceholder(queueCallback) {
+        img
+            .clone()
+            .resize(placeholderSize, jimp.AUTO)
+            .quality(quality)
+            .background(background)
+            .getBuffer(mime, function resizeCallback(queueErr, buf) {
+              if (err) {
+                return queueCallback(queueErr);
+              }
+
+              const placeholder = buf.toString('base64');
+              return queueCallback(null, JSON.stringify('data:' + (mime ? mime + ';' : '') + 'base64,' + placeholder));
+            });
+      });
+    }
+
     return q.awaitAll((queueErr, files) => {
+      'use strict'; // eslint-disable-line
+      let placeholder;
+      if (outputPlaceholder) {
+        placeholder = files.pop();
+      }
+
       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;
+      const firstImage = files[0];
 
-      loaderCallback(null, 'module.exports = {srcSet:' + srcset + ',images:[' + images + '],src:' + firstImagePath + ',toString:function(){return ' + firstImagePath + '}};');
+      loaderCallback(null, 'module.exports = {' +
+          'srcSet:' + srcset + ',' +
+          'images:[' + images + '],' +
+          'src:' + firstImage.path + ',' +
+          'toString:function(){return ' + firstImage.path + '},' +
+          'placeholder: ' + placeholder + ',' +
+          'width:' + firstImage.width + ',' +
+          'height:' + firstImage.height +
+      '};');
     });
@@ -101,0 +136,0 @@ });

package.json

 {
   "name": "responsive-loader",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "A webpack loader for responsive images",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -22,9 +22,9 @@ # responsive-loader
 // 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);
+ReactDOM.render(<img srcSet={responsiveImage.srcSet} src={responsiveImage.src} />, el);
 
 // Or you can just use it as props, `srcSet` and `src` will be set properly
-React.render(<img {...responsiveImage} />, el);
+ReactDOM.render(<img {...responsiveImage} />, el);
 ```
@@ -42,9 +42,28 @@
 
+```js
+// Outputs placeholder image as a data URI, and three images with 100, 200, and 300px widths
+const responsiveImage = require('responsive?placeholder=true&sizes[]=100,sizes[]=200,sizes[]=300!myImage.jpg');
+
+// responsiveImage.placeholder => 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAIBAQE…'
+ReactDOM.render(
+  <div style={{
+    height: responsiveImage.height,
+    width: responsiveImage.width,
+    backgroundSize: 'cover',
+    backgroundImage: 'url("' + responsiveImage.placeholder + '")'
+  }}>
+    <img src={responsiveImage.src} srcSet={responsiveImage.srcSet} />
+  </div>, el);
+```
+
+
 ### Options
 
-- `sizes: array`: specify all widths you want to use; if a specified size exceeds the original image's width, the latter will be used (i.e. images won't be scaled up). You may also declare a default `sizes` array in `responsiveLoader` in your `webpack.config.js`.
-- `size: integer`: specify one width you want to use; if the specified size exceeds the original image's width, the latter will be used (i.e. images won't be scaled up)
-- `quality: integer`: JPEG compression quality; defaults to `95`
-- `ext: string`: either `png`, `jpg`, or `gif`; use to convert to another format; defaults to original file's extension
-- `background: hex`: Background fill when converting transparent to opaque images; defaults to `0xFFFFFFFF` (note: make sure this is a valid hex number)
+- `sizes: array` — specify all widths you want to use; if a specified size exceeds the original image's width, the latter will be used (i.e. images won't be scaled up). You may also declare a default `sizes` array in `responsiveLoader` in your `webpack.config.js`.
+- `size: integer` — specify one width you want to use; if the specified size exceeds the original image's width, the latter will be used (i.e. images won't be scaled up)
+- `quality: integer` — JPEG compression quality; defaults to `95`
+- `ext: string` — either `png`, `jpg`, or `gif`; use to convert to another format; defaults to original file's extension
+- `background: hex` — Background fill when converting transparent to opaque images; defaults to `0xFFFFFFFF` (note: make sure this is a valid hex number)
+- `placeholder: bool` — A true or false value to specify wether to output a placeholder image as a data URI. (Defaults to `false`)
+- `placeholderSize: integer` — A number value specifying the width of the placeholder image, if enabled with the option above. (Defaults to `40`)
 
@@ -67,3 +86,5 @@
   responsiveLoader: {
-    sizes: [300, 600, 1200, 2000]
+    sizes: [300, 600, 1200, 2000],
+    placeholder: true,
+    placeholderSize: 50
   }
@@ -70,0 +91,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14127

increased by20.67%

Lines of code

115

increased by38.55%

Number of lines in readme file

98

increased by27.27%

No dependency changes