From bb080f7bc3e78a006841a7715202439632ad2692 Mon Sep 17 00:00:00 2001 From: Sarah Mogin Date: Fri, 19 Jan 2018 17:59:18 -0500 Subject: [PATCH] [gatsby-source-contentful] Add withBase64 option to speed up image queries --- .../__snapshots__/extend-node-type.js.snap | 6 +- .../src/__tests__/extend-node-type.js | 16 +++-- .../src/extend-node-type.js | 58 +++++++++++++++---- 3 files changed, 61 insertions(+), 19 deletions(-) diff --git a/packages/gatsby-source-contentful/src/__tests__/__snapshots__/extend-node-type.js.snap b/packages/gatsby-source-contentful/src/__tests__/__snapshots__/extend-node-type.js.snap index 4732775d2ccca..048df67746359 100644 --- a/packages/gatsby-source-contentful/src/__tests__/__snapshots__/extend-node-type.js.snap +++ b/packages/gatsby-source-contentful/src/__tests__/__snapshots__/extend-node-type.js.snap @@ -17,7 +17,7 @@ Object { exports[`contentful extend node type resolveResize generates resized images using all options 1`] = ` Object { "aspectRatio": 1.1278195488721805, - "base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAlgCWAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAbABQDAREAAhEBAxEB/8QAGQABAAIDAAAAAAAAAAAAAAAABgIHAwQJ/8QALhAAAQMDAgIHCQAAAAAAAAAAAQIDBAAFEQYSEzEHFCEiQVFhFRYkMkJDcXKj/8QAGQEAAgMBAAAAAAAAAAAAAAAAAQIAAwQF/8QAJREAAQQCAQEJAAAAAAAAAAAAAQACAxEEQSEiEhMxQlFhcYGh/9oADAMBAAIRAxEAPwDp4Zz3vV1Tf8OIXF2YHzb8Zzz5UNpL6qWixdparPY3lO5clSUIdVtHeSQo49OQoXwl7RoFJaZWo8tWNcqHh7Mz/U0u0nnRF2+O3DRmiJtilRJLDtyY4jzm4oLQDgXtx9WRjyrSGNhcWZAINfuvpcl078mCOXBc0guFk3VAkOqtqz6oXZQK7amhQ+lJy0rcUJy9PrlIRtOCgOqBOeXMVZ3TywzaHCwuyo2ZTccnqLSR8A+qPR2o9v0nYLbGQhhqM68oIbSAEYX4Afuazue6TlxspYo2RRNjjAAF+CtiI+JUVl4fcQFdnqKsW8cqKrfGXN62plJk8Is8Qjt2E52/jNH2QoXamIrIxhlsY5d0dlBMsgAAwBgeQqKL/9k=", + "base64": undefined, "height": 399, "src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=450&h=399&q=50&fit=fill", "width": 450, @@ -41,7 +41,7 @@ Object { exports[`contentful extend node type resolveResponsiveResolution generates responsive resolution data for images using all options 1`] = ` Object { "aspectRatio": 1.1278195488721805, - "base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAlgCWAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAbABQDAREAAhEBAxEB/8QAGQABAAIDAAAAAAAAAAAAAAAABgIHAwQJ/8QALhAAAQMDAgIHCQAAAAAAAAAAAQIDBAAFEQYSEzEHFCEiQVFhFRYkMkJDcXKj/8QAGQEAAgMBAAAAAAAAAAAAAAAAAQIAAwQF/8QAJREAAQQCAQEJAAAAAAAAAAAAAQACAxEEQSEiEhMxQlFhcYGh/9oADAMBAAIRAxEAPwDp4Zz3vV1Tf8OIXF2YHzb8Zzz5UNpL6qWixdparPY3lO5clSUIdVtHeSQo49OQoXwl7RoFJaZWo8tWNcqHh7Mz/U0u0nnRF2+O3DRmiJtilRJLDtyY4jzm4oLQDgXtx9WRjyrSGNhcWZAINfuvpcl078mCOXBc0guFk3VAkOqtqz6oXZQK7amhQ+lJy0rcUJy9PrlIRtOCgOqBOeXMVZ3TywzaHCwuyo2ZTccnqLSR8A+qPR2o9v0nYLbGQhhqM68oIbSAEYX4Afuazue6TlxspYo2RRNjjAAF+CtiI+JUVl4fcQFdnqKsW8cqKrfGXN62plJk8Is8Qjt2E52/jNH2QoXamIrIxhlsY5d0dlBMsgAAwBgeQqKL/9k=", + "base64": undefined, "height": 399, "src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=450&h=399&q=50&fit=fill", "srcSet": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=450&h=399&q=50&fit=fill 1x, @@ -71,7 +71,7 @@ Object { exports[`contentful extend node type resolveResponsiveSizes generates responsive sizes data for images using all options 1`] = ` Object { "aspectRatio": 0.75, - "base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAlgCWAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAbABQDAREAAhEBAxEB/8QAGQABAAIDAAAAAAAAAAAAAAAABgIHAwQJ/8QALhAAAQMDAgIHCQAAAAAAAAAAAQIDBAAFEQYSEzEHFCEiQVFhFRYkMkJDcXKj/8QAGQEAAgMBAAAAAAAAAAAAAAAAAQIAAwQF/8QAJREAAQQCAQEJAAAAAAAAAAAAAQACAxEEQSEiEhMxQlFhcYGh/9oADAMBAAIRAxEAPwDp4Zz3vV1Tf8OIXF2YHzb8Zzz5UNpL6qWixdparPY3lO5clSUIdVtHeSQo49OQoXwl7RoFJaZWo8tWNcqHh7Mz/U0u0nnRF2+O3DRmiJtilRJLDtyY4jzm4oLQDgXtx9WRjyrSGNhcWZAINfuvpcl078mCOXBc0guFk3VAkOqtqz6oXZQK7amhQ+lJy0rcUJy9PrlIRtOCgOqBOeXMVZ3TywzaHCwuyo2ZTccnqLSR8A+qPR2o9v0nYLbGQhhqM68oIbSAEYX4Afuazue6TlxspYo2RRNjjAAF+CtiI+JUVl4fcQFdnqKsW8cqKrfGXN62plJk8Is8Qjt2E52/jNH2QoXamIrIxhlsY5d0dlBMsgAAwBgeQqKL/9k=", + "base64": undefined, "sizes": "(max-width: 450px) 100vw, 450px", "src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=450&h=399&q=50", "srcSet": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=113&h=100&q=50 113w, diff --git a/packages/gatsby-source-contentful/src/__tests__/extend-node-type.js b/packages/gatsby-source-contentful/src/__tests__/extend-node-type.js index 8df1edf9e67a1..cd25594d23562 100644 --- a/packages/gatsby-source-contentful/src/__tests__/extend-node-type.js +++ b/packages/gatsby-source-contentful/src/__tests__/extend-node-type.js @@ -42,7 +42,7 @@ describe(`contentful extend node type`, () => { describe(`resolveResponsiveResolution`, () => { it(`generates responsive resolution data for images`, async () => { - const resp = await resolveResponsiveResolution(image, { width: 400 }) + const resp = await resolveResponsiveResolution(image, { width: 400, withBase64: true }) expect(resp.srcSet.length).toBeGreaterThan(1) expect(resp).toMatchSnapshot() }) @@ -51,6 +51,7 @@ describe(`contentful extend node type`, () => { width: 450, height: 399, quality: 50, + withBase64: false, }) expect(resp.srcSet.length).toBeGreaterThan(1) expect(resp).toMatchSnapshot() @@ -58,6 +59,7 @@ describe(`contentful extend node type`, () => { it(`If the height isn't specified it should be set keeping with the aspect ratio of the original image`, async () => { const resp = await resolveResponsiveResolution(image, { width: 450, + withBase64: true, }) expect(resp.width).toBe(450) expect(resp.height).toBe(600) @@ -66,6 +68,7 @@ describe(`contentful extend node type`, () => { const resp = await resolveResponsiveResolution(image, { width: 450, height: 399, + withBase64: true, }) expect(resp.width).toBe(450) expect(resp.height).toBe(399) @@ -74,6 +77,7 @@ describe(`contentful extend node type`, () => { const resp = await resolveResponsiveResolution(image, { width: 450.1, height: 399.1, + withBase64: true, }) expect(resp.width).toBe(450) expect(resp.height).toBe(399) @@ -81,13 +85,14 @@ describe(`contentful extend node type`, () => { it(`handles null`, async () => { const resp = await resolveResponsiveResolution(nullFileImage, { width: 400, + withBase64: true, }) expect(resp).toBe(null) }) }) describe(`resolveResponsiveSizes`, () => { it(`generates responsive size data for images`, async () => { - const resp = await resolveResponsiveSizes(image, { maxWidth: 400 }) + const resp = await resolveResponsiveSizes(image, { maxWidth: 400, withBase64: true }) expect(resp.srcSet.length).toBeGreaterThan(1) expect(resp).toMatchSnapshot() }) @@ -96,6 +101,7 @@ describe(`contentful extend node type`, () => { maxWidth: 450, maxHeight: 399, quality: 50, + withBase64: false, }) expect(resp.srcSet.length).toBeGreaterThan(1) expect(resp).toMatchSnapshot() @@ -103,13 +109,14 @@ describe(`contentful extend node type`, () => { it(`handles null`, async () => { const resp = await resolveResponsiveSizes(nullFileImage, { maxWidth: 400, + withBase64: true, }) expect(resp).toBe(null) }) }) describe(`resolveResize`, () => { it(`generates resized images`, async () => { - const resp = await resolveResize(image, { width: 400 }) + const resp = await resolveResize(image, { width: 400, withBase64: true }) expect(resp).toMatchSnapshot() }) it(`generates resized images using all options`, async () => { @@ -117,11 +124,12 @@ describe(`contentful extend node type`, () => { width: 450, height: 399, quality: 50, + withBase64: false, }) expect(resp).toMatchSnapshot() }) it(`handles null`, async () => { - const resp = await resolveResize(nullFileImage, { width: 400 }) + const resp = await resolveResize(nullFileImage, { width: 400, withBase64: true }) expect(resp).toBe(null) }) }) diff --git a/packages/gatsby-source-contentful/src/extend-node-type.js b/packages/gatsby-source-contentful/src/extend-node-type.js index 40fc085fa4aa8..b6d1cc27a0be6 100644 --- a/packages/gatsby-source-contentful/src/extend-node-type.js +++ b/packages/gatsby-source-contentful/src/extend-node-type.js @@ -82,26 +82,40 @@ const getBase64Image = (imgUrl, args = {}) => { }) } +const getBasicMeasurements = (image, args) => { + let aspectRatio + if (args.width && args.height) { + aspectRatio = args.width / args.height + } else { + aspectRatio = + image.file.details.image.width / image.file.details.image.height + } + + return { + contentType: image.file.contentType, + aspectRatio, + width: image.file.details.image.width, + height: image.file.details.image.height, + } +} + const getBase64ImageAndBasicMeasurements = (image, args) => new Promise(resolve => { - getBase64Image(image.file.url, args).then(base64Str => { - let aspectRatio - if (args.width && args.height) { - aspectRatio = args.width / args.height - } else { - aspectRatio = - image.file.details.image.width / image.file.details.image.height - } + const basicMeasurements = getBasicMeasurements(image, args) + + if (!(args.withBase64 || args.base64)) { + resolve(basicMeasurements) + return + } + getBase64Image(image.file.url, args).then(base64Str => { resolve({ - contentType: image.file.contentType, + ...basicMeasurements, base64Str, - aspectRatio, - width: image.file.details.image.width, - height: image.file.details.image.height, }) }) }) + const createUrl = (imgUrl, options = {}) => { // Convert to Contentful names and filter out undefined/null values. const args = _.pickBy( @@ -367,6 +381,10 @@ exports.extendNodeType = ({ type }) => { type: ImageCropFocusType, defaultValue: null, }, + withBase64: { + type: GraphQLBoolean, + defaultValue: true, + }, }, resolve(image, options, context) { return resolveResponsiveResolution(image, options) @@ -409,6 +427,10 @@ exports.extendNodeType = ({ type }) => { sizes: { type: GraphQLString, }, + withBase64: { + type: GraphQLBoolean, + defaultValue: true, + }, }, resolve(image, options, context) { return resolveResponsiveSizes(image, options) @@ -450,6 +472,10 @@ exports.extendNodeType = ({ type }) => { type: ImageCropFocusType, defaultValue: null, }, + withBase64: { + type: GraphQLBoolean, + defaultValue: true, + }, }, resolve(image, options, context) { return resolveResponsiveResolution(image, options) @@ -493,6 +519,10 @@ exports.extendNodeType = ({ type }) => { sizes: { type: GraphQLString, }, + withBase64: { + type: GraphQLBoolean, + defaultValue: true, + }, }, resolve(image, options, context) { return resolveResponsiveSizes(image, options) @@ -539,6 +569,10 @@ exports.extendNodeType = ({ type }) => { type: ImageCropFocusType, defaultValue: null, }, + withBase64: { + type: GraphQLBoolean, + defaultValue: true, + }, }, resolve(image, options, context) { return resolveResize(image, options)