Skip to content

Commit

Permalink
[gatsby-source-contentful] Add withBase64 option to speed up image qu…
Browse files Browse the repository at this point in the history 
…eries
  • Loading branch information
@sarahatwork
sarahatwork committed Jan 19, 2018
1 parent 53f66a4 commit bb080f7
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 19 deletions.
6 changes: 3 additions & 3 deletions packages/gatsby-source-contentful/src/__tests__/__snapshots__/extend-node-type.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -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,
Expand Down
16 changes: 12 additions & 4 deletions packages/gatsby-source-contentful/src/__tests__/extend-node-type.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()
})
Expand All @@ -51,13 +51,15 @@ describe(`contentful extend node type`, () => {
width: 450,
height: 399,
quality: 50,
withBase64: false,
})
expect(resp.srcSet.length).toBeGreaterThan(1)
expect(resp).toMatchSnapshot()
})
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)
Expand All @@ -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)
Expand All @@ -74,20 +77,22 @@ 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)
})
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()
})
Expand All @@ -96,32 +101,35 @@ describe(`contentful extend node type`, () => {
maxWidth: 450,
maxHeight: 399,
quality: 50,
withBase64: false,
})
expect(resp.srcSet.length).toBeGreaterThan(1)
expect(resp).toMatchSnapshot()
})
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 () => {
const resp = await resolveResize(image, {
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)
})
})
Expand Down
58 changes: 46 additions & 12 deletions packages/gatsby-source-contentful/src/extend-node-type.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -367,6 +381,10 @@ exports.extendNodeType = ({ type }) => {
type: ImageCropFocusType,
defaultValue: null,
},
withBase64: {
type: GraphQLBoolean,
defaultValue: true,
},
},
resolve(image, options, context) {
return resolveResponsiveResolution(image, options)
Expand Down Expand Up @@ -409,6 +427,10 @@ exports.extendNodeType = ({ type }) => {
sizes: {
type: GraphQLString,
},
withBase64: {
type: GraphQLBoolean,
defaultValue: true,
},
},
resolve(image, options, context) {
return resolveResponsiveSizes(image, options)
Expand Down Expand Up @@ -450,6 +472,10 @@ exports.extendNodeType = ({ type }) => {
type: ImageCropFocusType,
defaultValue: null,
},
withBase64: {
type: GraphQLBoolean,
defaultValue: true,
},
},
resolve(image, options, context) {
return resolveResponsiveResolution(image, options)
Expand Down Expand Up @@ -493,6 +519,10 @@ exports.extendNodeType = ({ type }) => {
sizes: {
type: GraphQLString,
},
withBase64: {
type: GraphQLBoolean,
defaultValue: true,
},
},
resolve(image, options, context) {
return resolveResponsiveSizes(image, options)
Expand Down Expand Up @@ -539,6 +569,10 @@ exports.extendNodeType = ({ type }) => {
type: ImageCropFocusType,
defaultValue: null,
},
withBase64: {
type: GraphQLBoolean,
defaultValue: true,
},
},
resolve(image, options, context) {
return resolveResize(image, options)
Expand Down

0 comments on commit bb080f7

Please sign in to comment.