1 | # Change Log
|
2 |
|
3 | ## v1.1.0
|
4 |
|
5 | - Added `min` and `max` options to automatically generate a number of images, and `steps` option to say how many images ([#31](https://github.com/herrstucki/responsive-loader/pull/31)).
|
6 |
|
7 | ## v1.0.0
|
8 |
|
9 | ### New
|
10 |
|
11 | - 🚀 Added support for [sharp](https://github.com/lovell/sharp) ([#19](https://github.com/herrstucki/responsive-loader/pull/29))
|
12 |
|
13 | ### Breaking
|
14 |
|
15 | #### Webpack 2 support
|
16 |
|
17 | Removed support for webpack 1! Please upgrade to webpack >= 2.
|
18 |
|
19 | The syntax to import images has changed. The query part now comes _after_ the resource (the image) instead of the loader.
|
20 |
|
21 | ```diff
|
22 | - require('responsive-loader?size=100!some-image.jpg')
|
23 | + require('responsive-loader!some-image.jpg?size=100')
|
24 | ```
|
25 |
|
26 | That means if `responsive-loader` is configured in your webpack-config, it's possible to specify image-specific options without having to add the loader part to the import path. For example:
|
27 |
|
28 | ```js
|
29 | // webpack.config.js
|
30 | module.exports = {
|
31 | // ...
|
32 | module: {
|
33 | rules: [
|
34 | {
|
35 | test: /\.jpg$/,
|
36 | loader: 'responsive-loader',
|
37 | options: {
|
38 | size: 1000
|
39 | //...
|
40 | }
|
41 | }
|
42 | ]
|
43 | },
|
44 | }
|
45 |
|
46 | // some-file.js
|
47 | const image1000 = require('some-image.jpg') // will have size 1000 from the config
|
48 | const image500 = require('some-image.jpg?size=500')
|
49 | ```
|
50 |
|
51 | #### Other breaking changes
|
52 |
|
53 | - The `ext` option was removed, in favor of `format=jpg|png`. `[ext]` is now part of the `name` option like in other loaders (fixes [#13](https://github.com/herrstucki/responsive-loader/issues/13))
|
54 | - Changed default JPEG `quality` to `85`
|
55 | - The `pass` option is now called `disable`
|
56 |
|
57 | ## v0.7.0
|
58 |
|
59 | - Add `placeholder` option ([#16](https://github.com/herrstucki/responsive-loader/pull/16))
|
60 | - Add `width` and `height` attributes to output ([#19](https://github.com/herrstucki/responsive-loader/pull/19))
|
61 |
|
62 | ## v0.6.1
|
63 |
|
64 | - Declare default `name`, `context`, `quality`, and `background` through webpack options when they're not specified in the loader query ([#12](https://github.com/herrstucki/responsive-loader/pull/12)).
|
65 |
|
66 | ## v0.6.0
|
67 |
|
68 | - Add linting ([#7](https://github.com/herrstucki/responsive-loader/pull/7))
|
69 | - Breaking (maybe): Require node >= v4
|
70 |
|
71 | ## v0.5.3
|
72 |
|
73 | - Fix wrong callback being called on file load error ([#6](https://github.com/herrstucki/responsive-loader/pull/6))
|
74 |
|
75 | ## v0.5.2
|
76 |
|
77 | - Added tests!
|
78 | - Update `queue-async` to `d3-queue`
|
79 |
|
80 | ## v0.5.1
|
81 |
|
82 | - Optimization: skip resizing images of the same size ([#5](https://github.com/herrstucki/responsive-loader/pull/5))
|
83 |
|
84 | ## v0.5.0
|
85 |
|
86 | Using the `size` option for getting only one resized image no longer just returns a string but the same object structure as when using `sizes`. The difference is, that when `toString()` is called on that object, it will return the path of the first resized image.
|
87 |
|
88 | Also, for pure convenience, the returned object also contains a `src` property, so it can be spread onto a React component (e.g. `<img {...resized} />`).
|
89 |
|
90 | ### Before
|
91 |
|
92 | This worked:
|
93 |
|
94 | ```js
|
95 | import resized from 'responsive?sizes[]=100,sizes[]=200';
|
96 |
|
97 | <img srcSet={resized.srcSet} src={resized.images[0].path} />
|
98 | ```
|
99 |
|
100 | ```css
|
101 | .foo { background-image: url('responsive?size=100'); }
|
102 | ```
|
103 |
|
104 | But this didn't :sob::
|
105 |
|
106 | ```js
|
107 | import resized from 'responsive?size=100';
|
108 |
|
109 | // Whoops, error because `resized` ist just a string
|
110 | <img srcSet={resized.srcSet} src={resized.images[0].path} />
|
111 | ```
|
112 |
|
113 | ```css
|
114 | /* Whoops, `url('[object Object]')` */
|
115 | .foo { background-image: url('responsive?sizes[]=100'); }
|
116 | ```
|
117 |
|
118 | ### After
|
119 |
|
120 | All these work :v:
|
121 |
|
122 | ```js
|
123 | import resized from 'responsive?sizes[]=100,sizes[]=200';
|
124 |
|
125 | <img srcSet={resized.srcSet} src={resized.src} />
|
126 | <img srcSet={resized.srcSet} src={resized} />
|
127 | <img {...resized} />
|
128 | ```
|
129 |
|
130 | ```css
|
131 | .foo { background-image: url('responsive?sizes[]=100,sizes[]=200'); }
|
132 | .foo { background-image: url('responsive?sizes[]=100'); }
|
133 | .foo { background-image: url('responsive?size=100'); }
|
134 | ```
|