Skip to content

Commit 177d35c

Browse files
bigfanjswardpeet
bigfanjs
authored and
wardpeet
committed
fix(gatsby-source-contentful): Restricts images to 4000 max image width/height (#14760)
1 parent bfab2b7 commit 177d35c

File tree

3 files changed

+36
-21
lines changed

3 files changed

+36
-21
lines changed

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

+6-14
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,7 @@ Object {
1010
"baseUrl": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg",
1111
"height": 3000,
1212
"src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=2250",
13-
"srcSet": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=2250&h=3000 1x,
14-
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=3375&h=4500 1.5x,
15-
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=4500&h=6000 2x",
13+
"srcSet": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=2250&h=3000 1x",
1614
"width": 2250,
1715
}
1816
`;
@@ -53,9 +51,7 @@ Object {
5351
"src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=2250",
5452
"srcSet": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=563&h=751 563w,
5553
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=1125&h=1500 1125w,
56-
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=2250&h=3000 2250w,
57-
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=3375&h=4500 3375w,
58-
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=4500&h=6000 4500w",
54+
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=2250&h=3000 2250w",
5955
}
6056
`;
6157

@@ -70,8 +66,7 @@ Object {
7066
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=450&h=399&q=50&bg=rgb%3A000000 450w,
7167
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=675&h=599&q=50&bg=rgb%3A000000 675w,
7268
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=900&h=798&q=50&bg=rgb%3A000000 900w,
73-
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=1350&h=1197&q=50&bg=rgb%3A000000 1350w,
74-
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=4500&h=3990&q=50&bg=rgb%3A000000 4500w",
69+
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=1350&h=1197&q=50&bg=rgb%3A000000 1350w",
7570
}
7671
`;
7772

@@ -86,8 +81,7 @@ Object {
8681
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=300&h=400 300w,
8782
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=450&h=600 450w,
8883
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=600&h=800 600w,
89-
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=900&h=1200 900w,
90-
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=4500&h=6000 4500w",
84+
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=900&h=1200 900w",
9185
}
9286
`;
9387

@@ -102,8 +96,7 @@ Object {
10296
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=400&h=533 400w,
10397
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=600&h=800 600w,
10498
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=800&h=1067 800w,
105-
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=1200&h=1600 1200w,
106-
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=4500&h=6000 4500w",
99+
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=1200&h=1600 1200w",
107100
}
108101
`;
109102

@@ -118,8 +111,7 @@ Object {
118111
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=800&h=1067 800w,
119112
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=1200&h=1600 1200w,
120113
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=1600&h=2133 1600w,
121-
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=2400&h=3200 2400w,
122-
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=4500&h=6000 4500w",
114+
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=2400&h=3200 2400w",
123115
}
124116
`;
125117

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ describe(`contentful extend node type`, () => {
101101
const resp = await resolveFixed(image, {
102102
width: 2250,
103103
})
104-
expect(resp.srcSet.split(`,`).length).toBe(3)
104+
expect(resp.srcSet.split(`,`).length).toBe(1)
105105
expect(resp).toMatchSnapshot()
106106
})
107107
})
@@ -141,7 +141,7 @@ describe(`contentful extend node type`, () => {
141141
const resp = await resolveFluid(image, {
142142
maxWidth: 2250,
143143
})
144-
expect(resp.srcSet.split(`,`).length).toBe(5)
144+
expect(resp.srcSet.split(`,`).length).toBe(3)
145145
expect(resp).toMatchSnapshot()
146146
})
147147
})

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

+28-5
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,9 @@ const {
2020
ImageCropFocusType,
2121
} = require(`./schemes`)
2222

23+
// @see https://www.contentful.com/developers/docs/references/images-api/#/reference/resizing-&-cropping/specify-width-&-height
24+
const CONTENTFUL_IMAGE_MAX_SIZE = 4000
25+
2326
const isImage = image =>
2427
_.includes(
2528
[`image/jpeg`, `image/jpg`, `image/png`, `image/webp`, `image/gif`],
@@ -113,8 +116,15 @@ const resolveFixed = (image, options) => {
113116
fixedSizes.push(options.width * 3)
114117
fixedSizes = fixedSizes.map(Math.round)
115118

116-
// Filter out sizes larger than the image's width.
117-
const filteredSizes = fixedSizes.filter(size => size <= width)
119+
// Filter out sizes larger than the image's width and the contentful image's max size.
120+
const filteredSizes = fixedSizes.filter(size => {
121+
const calculatedHeight = Math.round(size / desiredAspectRatio)
122+
return (
123+
size <= CONTENTFUL_IMAGE_MAX_SIZE &&
124+
calculatedHeight <= CONTENTFUL_IMAGE_MAX_SIZE &&
125+
size <= width
126+
)
127+
})
118128

119129
// Sort sizes for prettiness.
120130
const sortedSizes = _.sortBy(filteredSizes)
@@ -214,12 +224,25 @@ const resolveFluid = (image, options) => {
214224
fluidSizes.push(options.maxWidth * 3)
215225
fluidSizes = fluidSizes.map(Math.round)
216226

217-
// Filter out sizes larger than the image's maxWidth.
218-
const filteredSizes = fluidSizes.filter(size => size <= width)
227+
// Filter out sizes larger than the image's maxWidth and the contentful image's max size.
228+
const filteredSizes = fluidSizes.filter(size => {
229+
const calculatedHeight = Math.round(size / desiredAspectRatio)
230+
return (
231+
size <= CONTENTFUL_IMAGE_MAX_SIZE &&
232+
calculatedHeight <= CONTENTFUL_IMAGE_MAX_SIZE &&
233+
size <= width
234+
)
235+
})
219236

220237
// Add the original image (if it isn't already in there) to ensure the largest image possible
221238
// is available for small images.
222-
if (!filteredSizes.includes(parseInt(width))) filteredSizes.push(width)
239+
if (
240+
!filteredSizes.includes(parseInt(width)) &&
241+
parseInt(width) < CONTENTFUL_IMAGE_MAX_SIZE &&
242+
Math.round(width / desiredAspectRatio) < CONTENTFUL_IMAGE_MAX_SIZE
243+
) {
244+
filteredSizes.push(width)
245+
}
223246

224247
// Sort sizes for prettiness.
225248
const sortedSizes = _.sortBy(filteredSizes)

0 commit comments

Comments
 (0)