Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 2 additions & 5 deletions packages/gatsby-source-contentful/.gitignore
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
/gatsby-node.js
/fragments.js
/extend-node-type.js
/normalize.js
/fetch.js
/__tests__
/yarn.lock
/*.js
!index.js
2 changes: 1 addition & 1 deletion packages/gatsby-source-contentful/index.js
Original file line number Diff line number Diff line change
@@ -1 +1 @@
// no-op
module.exports.schemes = require(`./schemes.js`)
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ Object {
"aspectRatio": 1.1278195488721805,
"baseUrl": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg",
"height": 399,
"src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=450&h=399&q=50&fit=fill",
"src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=450&h=399&q=50&fit=fill&bg=rgb%3A000000",
"width": 450,
}
`;
Expand All @@ -43,11 +43,11 @@ Object {
"aspectRatio": 1.1278195488721805,
"baseUrl": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg",
"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,
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=675&h=599&q=50&fit=fill 1.5x,
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=900&h=798&q=50&fit=fill 2x,
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=1350&h=1197&q=50&fit=fill 3x",
"src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=450&h=399&q=50&fit=fill&bg=rgb%3A000000",
"srcSet": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=450&h=399&q=50&fit=fill&bg=rgb%3A000000 1x,
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=675&h=599&q=50&fit=fill&bg=rgb%3A000000 1.5x,
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=900&h=798&q=50&fit=fill&bg=rgb%3A000000 2x,
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=1350&h=1197&q=50&fit=fill&bg=rgb%3A000000 3x",
"width": 450,
}
`;
Expand All @@ -70,16 +70,16 @@ Object {

exports[`contentful extend node type resolveResponsiveSizes generates responsive sizes data for images using all options 1`] = `
Object {
"aspectRatio": 0.75,
"aspectRatio": 1.1278195488721805,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like something broke this?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the outcome of the bugfix for this result w=450&h=399 b0c658c

It returned the original aspect ratio while the resulting one should be returned

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ahhh :-) cool!

"baseUrl": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg",
"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,
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=225&h=200&q=50 225w,
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=450&h=399&q=50 450w,
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=675&h=599&q=50 675w,
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=900&h=798&q=50 900w,
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=1350&h=1197&q=50 1350w,
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=4500&h=3990&q=50 4500w",
"src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=450&h=399&q=50&bg=rgb%3A000000",
"srcSet": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=113&h=100&q=50&bg=rgb%3A000000 113w,
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=225&h=200&q=50&bg=rgb%3A000000 225w,
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=450&h=399&q=50&bg=rgb%3A000000 450w,
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=675&h=599&q=50&bg=rgb%3A000000 675w,
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=900&h=798&q=50&bg=rgb%3A000000 900w,
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=1350&h=1197&q=50&bg=rgb%3A000000 1350w,
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=4500&h=3990&q=50&bg=rgb%3A000000 4500w",
}
`;
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ describe(`contentful extend node type`, () => {
width: 450,
height: 399,
quality: 50,
background: `rgb:000000`,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's this for?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah cool 👍

})
expect(resp.srcSet.length).toBeGreaterThan(1)
expect(resp).toMatchSnapshot()
Expand Down Expand Up @@ -96,6 +97,7 @@ describe(`contentful extend node type`, () => {
maxWidth: 450,
maxHeight: 399,
quality: 50,
background: `rgb:000000`,
})
expect(resp.srcSet.length).toBeGreaterThan(1)
expect(resp).toMatchSnapshot()
Expand All @@ -117,6 +119,7 @@ describe(`contentful extend node type`, () => {
width: 450,
height: 399,
quality: 50,
background: `rgb:000000`,
})
expect(resp).toMatchSnapshot()
})
Expand Down
91 changes: 31 additions & 60 deletions packages/gatsby-source-contentful/src/extend-node-type.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,66 +5,16 @@ const {
GraphQLString,
GraphQLInt,
GraphQLFloat,
GraphQLEnumType,
} = require(`graphql`)
const qs = require(`qs`)
const base64Img = require(`base64-img`)
const _ = require(`lodash`)

const ImageFormatType = new GraphQLEnumType({
name: `ContentfulImageFormat`,
values: {
NO_CHANGE: { value: `` },
JPG: { value: `jpg` },
PNG: { value: `png` },
WEBP: { value: `webp` },
},
})

const ImageResizingBehavior = new GraphQLEnumType({
name: `ImageResizingBehavior`,
values: {
NO_CHANGE: {
value: ``,
},
PAD: {
value: `pad`,
description: `Same as the default resizing, but adds padding so that the generated image has the specified dimensions.`,
},

CROP: {
value: `crop`,
description: `Crop a part of the original image to match the specified size.`,
},
FILL: {
value: `fill`,
description: `Crop the image to the specified dimensions, if the original image is smaller than these dimensions, then the image will be upscaled.`,
},
THUMB: {
value: `thumb`,
description: `When used in association with the f parameter below, creates a thumbnail from the image based on a focus area.`,
},
SCALE: {
value: `scale`,
description: `Scale the image regardless of the original aspect ratio.`,
},
},
})

const ImageCropFocusType = new GraphQLEnumType({
name: `ContentfulImageCropFocus`,
values: {
TOP: { value: `top` },
TOP_LEFT: { value: `top_left` },
TOP_RIGHT: { value: `top_right` },
BOTTOM: { value: `bottom` },
BOTTOM_RIGHT: { value: `bottom_left` },
BOTTOM_LEFT: { value: `bottom_right` },
RIGHT: { value: `right` },
LEFT: { value: `left` },
FACES: { value: `faces` },
},
})
const {
ImageFormatType,
ImageResizingBehavior,
ImageCropFocusType,
} = require(`./schemes`)

const isImage = image =>
_.includes(
Expand Down Expand Up @@ -110,9 +60,10 @@ const createUrl = (imgUrl, options = {}) => {
h: options.height,
fl: options.jpegProgressive ? `progressive` : null,
q: options.quality,
fm: options.toFormat ? options.toFormat : ``,
fit: options.resizingBehavior ? options.resizingBehavior : ``,
f: options.cropFocus ? options.cropFocus : ``,
fm: options.toFormat || ``,
fit: options.resizingBehavior || ``,
f: options.cropFocus || ``,
bg: options.background || ``,
},
_.identity
)
Expand Down Expand Up @@ -195,7 +146,7 @@ const resolveResponsiveResolution = (image, options) => {
}

return {
aspectRatio: aspectRatio,
aspectRatio: desiredAspectRatio,
baseUrl,
width: Math.round(options.width),
height: Math.round(pickedHeight),
Expand Down Expand Up @@ -265,7 +216,7 @@ const resolveResponsiveSizes = (image, options) => {
.join(`,\n`)

return {
aspectRatio: aspectRatio,
aspectRatio: desiredAspectRatio,
baseUrl,
src: createUrl(baseUrl, {
...options,
Expand Down Expand Up @@ -389,6 +340,10 @@ exports.extendNodeType = ({ type }) => {
type: ImageCropFocusType,
defaultValue: null,
},
background: {
type: GraphQLString,
defaultValue: null,
},
},
resolve: (image, options, context) =>
Promise.resolve(resolveResponsiveResolution(image, options)).then(
Expand Down Expand Up @@ -475,6 +430,10 @@ exports.extendNodeType = ({ type }) => {
type: ImageCropFocusType,
defaultValue: null,
},
background: {
type: GraphQLString,
defaultValue: null,
},
sizes: {
type: GraphQLString,
},
Expand Down Expand Up @@ -530,6 +489,10 @@ exports.extendNodeType = ({ type }) => {
type: ImageCropFocusType,
defaultValue: null,
},
background: {
type: GraphQLString,
defaultValue: null,
},
},
resolve(image, options, context) {
return resolveResponsiveResolution(image, options)
Expand Down Expand Up @@ -578,6 +541,10 @@ exports.extendNodeType = ({ type }) => {
sizes: {
type: GraphQLString,
},
background: {
type: GraphQLString,
defaultValue: null,
},
},
resolve(image, options, context) {
return resolveResponsiveSizes(image, options)
Expand Down Expand Up @@ -626,6 +593,10 @@ exports.extendNodeType = ({ type }) => {
type: ImageCropFocusType,
defaultValue: null,
},
background: {
type: GraphQLString,
defaultValue: null,
},
},
resolve(image, options, context) {
return resolveResize(image, options)
Expand Down
64 changes: 64 additions & 0 deletions packages/gatsby-source-contentful/src/schemes.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
const {
GraphQLEnumType,
} = require(`graphql`)

const ImageFormatType = new GraphQLEnumType({
name: `ContentfulImageFormat`,
values: {
NO_CHANGE: { value: `` },
JPG: { value: `jpg` },
PNG: { value: `png` },
WEBP: { value: `webp` },
},
})

const ImageResizingBehavior = new GraphQLEnumType({
name: `ImageResizingBehavior`,
values: {
NO_CHANGE: {
value: ``,
},
PAD: {
value: `pad`,
description: `Same as the default resizing, but adds padding so that the generated image has the specified dimensions.`,
},

CROP: {
value: `crop`,
description: `Crop a part of the original image to match the specified size.`,
},
FILL: {
value: `fill`,
description: `Crop the image to the specified dimensions, if the original image is smaller than these dimensions, then the image will be upscaled.`,
},
THUMB: {
value: `thumb`,
description: `When used in association with the f parameter below, creates a thumbnail from the image based on a focus area.`,
},
SCALE: {
value: `scale`,
description: `Scale the image regardless of the original aspect ratio.`,
},
},
})

const ImageCropFocusType = new GraphQLEnumType({
name: `ContentfulImageCropFocus`,
values: {
TOP: { value: `top` },
TOP_LEFT: { value: `top_left` },
TOP_RIGHT: { value: `top_right` },
BOTTOM: { value: `bottom` },
BOTTOM_RIGHT: { value: `bottom_left` },
BOTTOM_LEFT: { value: `bottom_right` },
RIGHT: { value: `right` },
LEFT: { value: `left` },
FACES: { value: `faces` },
},
})

module.exports = {
ImageFormatType,
ImageResizingBehavior,
ImageCropFocusType,
}