Skip to content

Commit 125743a

Browse files
axe312gerKyleAMathews
axe312ger
authored and
KyleAMathews
committed
[pls review] Fix contentful image handling (#4207)
* export schemes to make them reusable * add background image argument * fix aspect ratio to return correct desired aspect ratio * adjust tests * add test for background argument
1 parent e3acb10 commit 125743a

File tree

6 files changed

+116
-81
lines changed

6 files changed

+116
-81
lines changed

‎packages/gatsby-source-contentful/.gitignore‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
/gatsby-node.js
2-
/fragments.js
3-
/extend-node-type.js
4-
/normalize.js
5-
/fetch.js
61
/__tests__
72
/yarn.lock
3+
/*.js
4+
!index.js

‎packages/gatsby-source-contentful/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
// no-op
1+
module.exports.schemes = require(`./schemes.js`)

‎packages/gatsby-source-contentful/src/__tests__/__snapshots__/extend-node-type.js.snap‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ Object {
1919
"aspectRatio": 1.1278195488721805,
2020
"baseUrl": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg",
2121
"height": 399,
22-
"src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=450&h=399&q=50&fit=fill",
22+
"src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=450&h=399&q=50&fit=fill&bg=rgb%3A000000",
2323
"width": 450,
2424
}
2525
`;
@@ -43,11 +43,11 @@ Object {
4343
"aspectRatio": 1.1278195488721805,
4444
"baseUrl": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg",
4545
"height": 399,
46-
"src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=450&h=399&q=50&fit=fill",
47-
"srcSet": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=450&h=399&q=50&fit=fill 1x,
48-
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=675&h=599&q=50&fit=fill 1.5x,
49-
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=900&h=798&q=50&fit=fill 2x,
50-
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=1350&h=1197&q=50&fit=fill 3x",
46+
"src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=450&h=399&q=50&fit=fill&bg=rgb%3A000000",
47+
"srcSet": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=450&h=399&q=50&fit=fill&bg=rgb%3A000000 1x,
48+
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=675&h=599&q=50&fit=fill&bg=rgb%3A000000 1.5x,
49+
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=900&h=798&q=50&fit=fill&bg=rgb%3A000000 2x,
50+
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=1350&h=1197&q=50&fit=fill&bg=rgb%3A000000 3x",
5151
"width": 450,
5252
}
5353
`;
@@ -70,16 +70,16 @@ Object {
7070

7171
exports[`contentful extend node type resolveResponsiveSizes generates responsive sizes data for images using all options 1`] = `
7272
Object {
73-
"aspectRatio": 0.75,
73+
"aspectRatio": 1.1278195488721805,
7474
"baseUrl": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg",
7575
"sizes": "(max-width: 450px) 100vw, 450px",
76-
"src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=450&h=399&q=50",
77-
"srcSet": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=113&h=100&q=50 113w,
78-
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=225&h=200&q=50 225w,
79-
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=450&h=399&q=50 450w,
80-
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=675&h=599&q=50 675w,
81-
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=900&h=798&q=50 900w,
82-
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=1350&h=1197&q=50 1350w,
83-
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=4500&h=3990&q=50 4500w",
76+
"src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=450&h=399&q=50&bg=rgb%3A000000",
77+
"srcSet": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=113&h=100&q=50&bg=rgb%3A000000 113w,
78+
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=225&h=200&q=50&bg=rgb%3A000000 225w,
79+
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=450&h=399&q=50&bg=rgb%3A000000 450w,
80+
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=675&h=599&q=50&bg=rgb%3A000000 675w,
81+
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=900&h=798&q=50&bg=rgb%3A000000 900w,
82+
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=1350&h=1197&q=50&bg=rgb%3A000000 1350w,
83+
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=4500&h=3990&q=50&bg=rgb%3A000000 4500w",
8484
}
8585
`;

‎packages/gatsby-source-contentful/src/__tests__/extend-node-type.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ describe(`contentful extend node type`, () => {
5151
width: 450,
5252
height: 399,
5353
quality: 50,
54+
background: `rgb:000000`,
5455
})
5556
expect(resp.srcSet.length).toBeGreaterThan(1)
5657
expect(resp).toMatchSnapshot()
@@ -96,6 +97,7 @@ describe(`contentful extend node type`, () => {
9697
maxWidth: 450,
9798
maxHeight: 399,
9899
quality: 50,
100+
background: `rgb:000000`,
99101
})
100102
expect(resp.srcSet.length).toBeGreaterThan(1)
101103
expect(resp).toMatchSnapshot()
@@ -117,6 +119,7 @@ describe(`contentful extend node type`, () => {
117119
width: 450,
118120
height: 399,
119121
quality: 50,
122+
background: `rgb:000000`,
120123
})
121124
expect(resp).toMatchSnapshot()
122125
})

‎packages/gatsby-source-contentful/src/extend-node-type.js‎

Lines changed: 31 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -5,66 +5,16 @@ const {
55
GraphQLString,
66
GraphQLInt,
77
GraphQLFloat,
8-
GraphQLEnumType,
98
} = require(`graphql`)
109
const qs = require(`qs`)
1110
const base64Img = require(`base64-img`)
1211
const _ = require(`lodash`)
1312

14-
const ImageFormatType = new GraphQLEnumType({
15-
name: `ContentfulImageFormat`,
16-
values: {
17-
NO_CHANGE: { value: `` },
18-
JPG: { value: `jpg` },
19-
PNG: { value: `png` },
20-
WEBP: { value: `webp` },
21-
},
22-
})
23-
24-
const ImageResizingBehavior = new GraphQLEnumType({
25-
name: `ImageResizingBehavior`,
26-
values: {
27-
NO_CHANGE: {
28-
value: ``,
29-
},
30-
PAD: {
31-
value: `pad`,
32-
description: `Same as the default resizing, but adds padding so that the generated image has the specified dimensions.`,
33-
},
34-
35-
CROP: {
36-
value: `crop`,
37-
description: `Crop a part of the original image to match the specified size.`,
38-
},
39-
FILL: {
40-
value: `fill`,
41-
description: `Crop the image to the specified dimensions, if the original image is smaller than these dimensions, then the image will be upscaled.`,
42-
},
43-
THUMB: {
44-
value: `thumb`,
45-
description: `When used in association with the f parameter below, creates a thumbnail from the image based on a focus area.`,
46-
},
47-
SCALE: {
48-
value: `scale`,
49-
description: `Scale the image regardless of the original aspect ratio.`,
50-
},
51-
},
52-
})
53-
54-
const ImageCropFocusType = new GraphQLEnumType({
55-
name: `ContentfulImageCropFocus`,
56-
values: {
57-
TOP: { value: `top` },
58-
TOP_LEFT: { value: `top_left` },
59-
TOP_RIGHT: { value: `top_right` },
60-
BOTTOM: { value: `bottom` },
61-
BOTTOM_RIGHT: { value: `bottom_left` },
62-
BOTTOM_LEFT: { value: `bottom_right` },
63-
RIGHT: { value: `right` },
64-
LEFT: { value: `left` },
65-
FACES: { value: `faces` },
66-
},
67-
})
13+
const {
14+
ImageFormatType,
15+
ImageResizingBehavior,
16+
ImageCropFocusType,
17+
} = require(`./schemes`)
6818

6919
const isImage = image =>
7020
_.includes(
@@ -110,9 +60,10 @@ const createUrl = (imgUrl, options = {}) => {
11060
h: options.height,
11161
fl: options.jpegProgressive ? `progressive` : null,
11262
q: options.quality,
113-
fm: options.toFormat ? options.toFormat : ``,
114-
fit: options.resizingBehavior ? options.resizingBehavior : ``,
115-
f: options.cropFocus ? options.cropFocus : ``,
63+
fm: options.toFormat || ``,
64+
fit: options.resizingBehavior || ``,
65+
f: options.cropFocus || ``,
66+
bg: options.background || ``,
11667
},
11768
_.identity
11869
)
@@ -195,7 +146,7 @@ const resolveResponsiveResolution = (image, options) => {
195146
}
196147

197148
return {
198-
aspectRatio: aspectRatio,
149+
aspectRatio: desiredAspectRatio,
199150
baseUrl,
200151
width: Math.round(options.width),
201152
height: Math.round(pickedHeight),
@@ -265,7 +216,7 @@ const resolveResponsiveSizes = (image, options) => {
265216
.join(`,\n`)
266217

267218
return {
268-
aspectRatio: aspectRatio,
219+
aspectRatio: desiredAspectRatio,
269220
baseUrl,
270221
src: createUrl(baseUrl, {
271222
...options,
@@ -389,6 +340,10 @@ exports.extendNodeType = ({ type }) => {
389340
type: ImageCropFocusType,
390341
defaultValue: null,
391342
},
343+
background: {
344+
type: GraphQLString,
345+
defaultValue: null,
346+
},
392347
},
393348
resolve: (image, options, context) =>
394349
Promise.resolve(resolveResponsiveResolution(image, options)).then(
@@ -475,6 +430,10 @@ exports.extendNodeType = ({ type }) => {
475430
type: ImageCropFocusType,
476431
defaultValue: null,
477432
},
433+
background: {
434+
type: GraphQLString,
435+
defaultValue: null,
436+
},
478437
sizes: {
479438
type: GraphQLString,
480439
},
@@ -530,6 +489,10 @@ exports.extendNodeType = ({ type }) => {
530489
type: ImageCropFocusType,
531490
defaultValue: null,
532491
},
492+
background: {
493+
type: GraphQLString,
494+
defaultValue: null,
495+
},
533496
},
534497
resolve(image, options, context) {
535498
return resolveResponsiveResolution(image, options)
@@ -578,6 +541,10 @@ exports.extendNodeType = ({ type }) => {
578541
sizes: {
579542
type: GraphQLString,
580543
},
544+
background: {
545+
type: GraphQLString,
546+
defaultValue: null,
547+
},
581548
},
582549
resolve(image, options, context) {
583550
return resolveResponsiveSizes(image, options)
@@ -626,6 +593,10 @@ exports.extendNodeType = ({ type }) => {
626593
type: ImageCropFocusType,
627594
defaultValue: null,
628595
},
596+
background: {
597+
type: GraphQLString,
598+
defaultValue: null,
599+
},
629600
},
630601
resolve(image, options, context) {
631602
return resolveResize(image, options)

‎packages/gatsby-source-contentful/src/schemes.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
const {
2+
GraphQLEnumType,
3+
} = require(`graphql`)
4+
5+
const ImageFormatType = new GraphQLEnumType({
6+
name: `ContentfulImageFormat`,
7+
values: {
8+
NO_CHANGE: { value: `` },
9+
JPG: { value: `jpg` },
10+
PNG: { value: `png` },
11+
WEBP: { value: `webp` },
12+
},
13+
})
14+
15+
const ImageResizingBehavior = new GraphQLEnumType({
16+
name: `ImageResizingBehavior`,
17+
values: {
18+
NO_CHANGE: {
19+
value: ``,
20+
},
21+
PAD: {
22+
value: `pad`,
23+
description: `Same as the default resizing, but adds padding so that the generated image has the specified dimensions.`,
24+
},
25+
26+
CROP: {
27+
value: `crop`,
28+
description: `Crop a part of the original image to match the specified size.`,
29+
},
30+
FILL: {
31+
value: `fill`,
32+
description: `Crop the image to the specified dimensions, if the original image is smaller than these dimensions, then the image will be upscaled.`,
33+
},
34+
THUMB: {
35+
value: `thumb`,
36+
description: `When used in association with the f parameter below, creates a thumbnail from the image based on a focus area.`,
37+
},
38+
SCALE: {
39+
value: `scale`,
40+
description: `Scale the image regardless of the original aspect ratio.`,
41+
},
42+
},
43+
})
44+
45+
const ImageCropFocusType = new GraphQLEnumType({
46+
name: `ContentfulImageCropFocus`,
47+
values: {
48+
TOP: { value: `top` },
49+
TOP_LEFT: { value: `top_left` },
50+
TOP_RIGHT: { value: `top_right` },
51+
BOTTOM: { value: `bottom` },
52+
BOTTOM_RIGHT: { value: `bottom_left` },
53+
BOTTOM_LEFT: { value: `bottom_right` },
54+
RIGHT: { value: `right` },
55+
LEFT: { value: `left` },
56+
FACES: { value: `faces` },
57+
},
58+
})
59+
60+
module.exports = {
61+
ImageFormatType,
62+
ImageResizingBehavior,
63+
ImageCropFocusType,
64+
}

0 commit comments

Comments
 (0)