Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(gatsby-source-contentful): support height parameter for srcset #25776

Merged
merged 9 commits into from
Jul 29, 2020
Merged

fix(gatsby-source-contentful): support height parameter for srcset #25776

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
1da5b37
Calculate fixed image width if necessary
mrseanbaines May 23, 2020
6f407a7
Merge branch 'master' of github.com:gatsbyjs/gatsby into fix-gatsby-s…
mrseanbaines Jun 10, 2020
8b50135
Calculate fixed image width if necessary
mrseanbaines May 23, 2020
653281a
Merge branch 'fix-gatsby-source-contentful-srcSet' of github.com:gats…
mrseanbaines Jun 29, 2020
42f18a6
Merge branch 'master' of github.com:gatsbyjs/gatsby into fix-gatsby-s…
mrseanbaines Jul 15, 2020
a6c787b
Merge branch 'master' of github.com:gatsbyjs/gatsby into fix-gatsby-s…
mrseanbaines Jul 16, 2020
8ff7554
Revert snapshot test changes
mrseanbaines Jul 16, 2020
921bea9
Bring back new test
mrseanbaines Jul 16, 2020
11ca6b4
Update snapshot
mrseanbaines Jul 16, 2020
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
42 changes: 28 additions & 14 deletions packages/gatsby-source-contentful/src/__tests__/__snapshots__/extend-node-type.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,20 +15,6 @@ Object {
}
`;

exports[`contentful extend node type resolveFixed generates responsive resolution data for images 1`] = `
Object {
"aspectRatio": 0.75,
"baseUrl": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg",
"height": 533,
"src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=400",
"srcSet": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=400&h=533 1x,
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=600&h=800 1.5x,
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=800&h=1067 2x,
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=1200&h=1600 3x",
"width": 400,
}
`;

exports[`contentful extend node type resolveFixed generates responsive resolution data for images using all options 1`] = `
Object {
"aspectRatio": 1.1278195488721805,
Expand All @@ -43,6 +29,34 @@ Object {
}
`;

exports[`contentful extend node type resolveFixed generates responsive resolution data for images using height option 1`] = `
Object {
"aspectRatio": 0.75,
"baseUrl": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg",
"height": 400,
"src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=300&h=400&fit=fill",
"srcSet": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=300&h=400&fit=fill 1x,
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=450&h=600&fit=fill 1.5x,
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=600&h=800&fit=fill 2x,
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=900&h=1200&fit=fill 3x",
"width": 300,
}
`;

exports[`contentful extend node type resolveFixed generates responsive resolution data for images using width option 1`] = `
Copy link
Contributor Author

@mrseanbaines mrseanbaines Jul 16, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

Just the test name updated here. Values are the same as before (the removed snapshot above)

Object {
"aspectRatio": 0.75,
"baseUrl": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg",
"height": 533,
"src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=400",
"srcSet": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=400&h=533 1x,
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=600&h=800 1.5x,
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=800&h=1067 2x,
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=1200&h=1600 3x",
"width": 400,
}
`;

exports[`contentful extend node type resolveFluid filters out sizes larger than the image's width 1`] = `
Object {
"aspectRatio": 0.75,
Expand Down
13 changes: 10 additions & 3 deletions packages/gatsby-source-contentful/src/__tests__/extend-node-type.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,11 +41,16 @@ describe(`contentful extend node type`, () => {
}

describe(`resolveFixed`, () => {
it(`generates responsive resolution data for images`, async () => {
it(`generates responsive resolution data for images using width option`, async () => {
const resp = await resolveFixed(image, { width: 400 })
expect(resp.srcSet.length).toBeGreaterThan(1)
expect(resp).toMatchSnapshot()
})
it(`generates responsive resolution data for images using height option`, async () => {
const resp = await resolveFixed(image, { height: 400 })
expect(resp.srcSet.length).toBeGreaterThan(1)
expect(resp).toMatchSnapshot()
})
it(`generates responsive resolution data for images using all options`, async () => {
const resp = await resolveFixed(image, {
width: 450,
Expand Down Expand Up @@ -75,15 +80,15 @@ describe(`contentful extend node type`, () => {
expect(resp.width).toBe(450)
expect(resp.height).toBe(600)
})
it(`if width and height are set that's what is returned`, async () => {
it(`returns the correct width and height when both are supplied`, async () => {
const resp = await resolveFixed(image, {
width: 450,
height: 399,
})
expect(resp.width).toBe(450)
expect(resp.height).toBe(399)
})
it(`Always outputs ints`, async () => {
it(`always outputs ints`, async () => {
const resp = await resolveFixed(image, {
width: 450.1,
height: 399.1,
Expand All @@ -105,6 +110,7 @@ describe(`contentful extend node type`, () => {
expect(resp).toMatchSnapshot()
})
})

describe(`resolveFluid`, () => {
it(`generates responsive size data for images using a default maxWidth`, async () => {
const resp = await resolveFluid(image, {})
Expand Down Expand Up @@ -145,6 +151,7 @@ describe(`contentful extend node type`, () => {
expect(resp).toMatchSnapshot()
})
})

describe(`resolveResize`, () => {
it(`generates resized images using a default width`, async () => {
const resp = await resolveResize(image, {})
Expand Down
5 changes: 5 additions & 0 deletions packages/gatsby-source-contentful/src/extend-node-type.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,11 @@ const resolveFixed = (image, options) => {
options.width = 400
}

// If only a height is given, calculate the width based on the height and the aspect ratio
if (options.height !== undefined && options.width === undefined) {
options.width = Math.round(options.height * desiredAspectRatio)
}

// If we're cropping, calculate the specified aspect ratio.
if (options.width !== undefined && options.height !== undefined) {
desiredAspectRatio = options.width / options.height
Expand Down