Skip to content

Commit 17db90e

Browse files
jupljupl
committed
Automatically determine min from steps and max if omitted
1 parent 2c5fee5 commit 17db90e

File tree

6 files changed

+147
-5
lines changed

6 files changed

+147
-5
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -119,8 +119,8 @@ ReactDOM.render(
119119
| `context` | `string` | `this.options.context` | Custom file context, defaults to webpack.config.js [context](https://webpack.js.org/configuration/entry-context/#context) |
120120
| `sizes` | `array` | *original size* | 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 the loader options in your `webpack.config.js`. |
121121
| `size` | `integer` | *original size* | 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) |
122-
| `min` | `integer` | | As an alternative to manually specifying `sizes`, you can specify `min`, `max` and `steps`, and the sizes will be generated for you. |
123-
| `max` | `integer` | | See `min` above |
122+
| `max` | `integer` | | As an alternative to manually specifying `sizes`, you can specify `min`, `max` and `steps`, and the sizes will be generated for you. |
123+
| `min` | `integer` | max / size | See `max` above |
124124
| `steps` | `integer` |`4` | Configure the number of images generated between `min` and `max` (inclusive) |
125125
| `quality` | `integer` | `85` | JPEG compression quality |
126126
| `format` | `string` | *original format* | Either `png` or `jpg`; use to convert to another format |

‎src/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -103,12 +103,12 @@ module.exports = function loader(content: Buffer) {
103103
background
104104
});
105105

106-
const min: number | void = config.min !== undefined ? parseInt(config.min, 10) : undefined;
107-
const max: number | void = config.max !== undefined ? parseInt(config.max, 10) : undefined;
108106
const steps: number = config.steps === undefined ? 4 : parseInt(config.steps, 10);
107+
const max: number | void = config.max !== undefined ? parseInt(config.max, 10) : undefined;
108+
const min: number = config.min !== undefined ? parseInt(config.min, 10) : Number(max) / steps;
109109

110110
let generatedSizes;
111-
if (typeof min === 'number' && max) {
111+
if (!isNaN(min) && max) {
112112
generatedSizes = [];
113113

114114
for (let step = 0; step < steps; step++) {

‎test/jimp/build/__snapshots__/test.js.snap‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -268,6 +268,67 @@ Object {
268268
}
269269
`;
270270

271+
exports[`with max sizes 1`] = `
272+
Object {
273+
"height": 270,
274+
"images": Array [
275+
Object {
276+
"height": 270,
277+
"path": "foobar/652ca9fc84422fc0712297fe218d4bd7-300.jpg",
278+
"width": 300,
279+
},
280+
Object {
281+
"height": 540,
282+
"path": "foobar/52dba34908ff9d9ed720ad3c51e5b651-600.jpg",
283+
"width": 600,
284+
},
285+
Object {
286+
"height": 810,
287+
"path": "foobar/bfdb5d567b215eeda9ca6c0d72fc54e3-900.jpg",
288+
"width": 900,
289+
},
290+
],
291+
"placeholder": undefined,
292+
"src": "foobar/652ca9fc84422fc0712297fe218d4bd7-300.jpg",
293+
"srcSet": "foobar/652ca9fc84422fc0712297fe218d4bd7-300.jpg 300w,foobar/52dba34908ff9d9ed720ad3c51e5b651-600.jpg 600w,foobar/bfdb5d567b215eeda9ca6c0d72fc54e3-900.jpg 900w",
294+
"toString": [Function],
295+
"width": 300,
296+
}
297+
`;
298+
299+
exports[`with max sizes, and default steps 1`] = `
300+
Object {
301+
"height": 180,
302+
"images": Array [
303+
Object {
304+
"height": 180,
305+
"path": "foobar/47b5a3359ed0722769a9888e5d22054a-200.jpg",
306+
"width": 200,
307+
},
308+
Object {
309+
"height": 360,
310+
"path": "foobar/4f8751c87ff21bfa2aa62d6d1672c18d-400.jpg",
311+
"width": 400,
312+
},
313+
Object {
314+
"height": 540,
315+
"path": "foobar/52dba34908ff9d9ed720ad3c51e5b651-600.jpg",
316+
"width": 600,
317+
},
318+
Object {
319+
"height": 720,
320+
"path": "foobar/f794cdac765d222d40585d283c49bddc-800.jpg",
321+
"width": 800,
322+
},
323+
],
324+
"placeholder": undefined,
325+
"src": "foobar/47b5a3359ed0722769a9888e5d22054a-200.jpg",
326+
"srcSet": "foobar/47b5a3359ed0722769a9888e5d22054a-200.jpg 200w,foobar/4f8751c87ff21bfa2aa62d6d1672c18d-400.jpg 400w,foobar/52dba34908ff9d9ed720ad3c51e5b651-600.jpg 600w,foobar/f794cdac765d222d40585d283c49bddc-800.jpg 800w",
327+
"toString": [Function],
328+
"width": 200,
329+
}
330+
`;
331+
271332
exports[`with min and max sizes 1`] = `
272333
Object {
273334
"height": 540,

‎test/jimp/index.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,16 @@ test('png to jpeg with background color', () => {
5959
expect(output).toMatchSnapshot();
6060
});
6161

62+
test('with max sizes', () => {
63+
const output = require('../cat-1000.jpg?max=900&steps=3');
64+
expect(output).toMatchSnapshot();
65+
});
66+
67+
test('with max sizes, and default steps', () => {
68+
const output = require('../cat-1000.jpg?max=800');
69+
expect(output).toMatchSnapshot();
70+
});
71+
6272
test('with min and max sizes', () => {
6373
const output = require('../cat-1000.jpg?min=600&max=800&steps=3');
6474
expect(output).toMatchSnapshot();

‎test/sharp/build/__snapshots__/test.js.snap‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -245,6 +245,67 @@ Object {
245245
}
246246
`;
247247

248+
exports[`with max sizes 1`] = `
249+
Object {
250+
"height": 270,
251+
"images": Array [
252+
Object {
253+
"height": 270,
254+
"path": "foobar/0f324a0de1e2536e830b1fcdfe180f70-300.jpg",
255+
"width": 300,
256+
},
257+
Object {
258+
"height": 540,
259+
"path": "foobar/2af17e12f0375a11dd41544eb39e7d1d-600.jpg",
260+
"width": 600,
261+
},
262+
Object {
263+
"height": 810,
264+
"path": "foobar/d77d65057e0e2fe624ca0a10962704ec-900.jpg",
265+
"width": 900,
266+
},
267+
],
268+
"placeholder": undefined,
269+
"src": "foobar/0f324a0de1e2536e830b1fcdfe180f70-300.jpg",
270+
"srcSet": "foobar/0f324a0de1e2536e830b1fcdfe180f70-300.jpg 300w,foobar/2af17e12f0375a11dd41544eb39e7d1d-600.jpg 600w,foobar/d77d65057e0e2fe624ca0a10962704ec-900.jpg 900w",
271+
"toString": [Function],
272+
"width": 300,
273+
}
274+
`;
275+
276+
exports[`with max sizes, and default steps 1`] = `
277+
Object {
278+
"height": 180,
279+
"images": Array [
280+
Object {
281+
"height": 180,
282+
"path": "foobar/8640f0494e614246b96b1d949a09aabe-200.jpg",
283+
"width": 200,
284+
},
285+
Object {
286+
"height": 360,
287+
"path": "foobar/f8c60f1643ff17fd8f8178169d6d6feb-400.jpg",
288+
"width": 400,
289+
},
290+
Object {
291+
"height": 540,
292+
"path": "foobar/2af17e12f0375a11dd41544eb39e7d1d-600.jpg",
293+
"width": 600,
294+
},
295+
Object {
296+
"height": 720,
297+
"path": "foobar/bf55049b4b942dfd0388b7396cea413f-800.jpg",
298+
"width": 800,
299+
},
300+
],
301+
"placeholder": undefined,
302+
"src": "foobar/8640f0494e614246b96b1d949a09aabe-200.jpg",
303+
"srcSet": "foobar/8640f0494e614246b96b1d949a09aabe-200.jpg 200w,foobar/f8c60f1643ff17fd8f8178169d6d6feb-400.jpg 400w,foobar/2af17e12f0375a11dd41544eb39e7d1d-600.jpg 600w,foobar/bf55049b4b942dfd0388b7396cea413f-800.jpg 800w",
304+
"toString": [Function],
305+
"width": 200,
306+
}
307+
`;
308+
248309
exports[`with min and max sizes 1`] = `
249310
Object {
250311
"height": 540,

‎test/sharp/index.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,16 @@ test('png to jpeg with background color', () => {
5454
expect(output).toMatchSnapshot();
5555
});
5656

57+
test('with max sizes', () => {
58+
const output = require('../cat-1000.jpg?max=900&steps=3');
59+
expect(output).toMatchSnapshot();
60+
});
61+
62+
test('with max sizes, and default steps', () => {
63+
const output = require('../cat-1000.jpg?max=800');
64+
expect(output).toMatchSnapshot();
65+
});
66+
5767
test('with min and max sizes', () => {
5868
const output = require('../cat-1000.jpg?min=600&max=800&steps=3');
5969
expect(output).toMatchSnapshot();

0 commit comments

Comments
 (0)