diff --git a/packages/gatsby-source-contentful/src/__tests__/__snapshots__/extend-node-type.js.snap b/packages/gatsby-source-contentful/src/__tests__/__snapshots__/extend-node-type.js.snap index cadfac6d82cc8..94574601b6bf2 100644 --- a/packages/gatsby-source-contentful/src/__tests__/__snapshots__/extend-node-type.js.snap +++ b/packages/gatsby-source-contentful/src/__tests__/__snapshots__/extend-node-type.js.snap @@ -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, @@ -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`] = ` +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, diff --git a/packages/gatsby-source-contentful/src/__tests__/extend-node-type.js b/packages/gatsby-source-contentful/src/__tests__/extend-node-type.js index 00a7f4168cf68..21a426d8a00ea 100644 --- a/packages/gatsby-source-contentful/src/__tests__/extend-node-type.js +++ b/packages/gatsby-source-contentful/src/__tests__/extend-node-type.js @@ -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, @@ -75,7 +80,7 @@ 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, @@ -83,7 +88,7 @@ describe(`contentful extend node type`, () => { 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, @@ -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, {}) @@ -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, {}) diff --git a/packages/gatsby-source-contentful/src/extend-node-type.js b/packages/gatsby-source-contentful/src/extend-node-type.js index ef1560221e431..ca13bd0edb940 100644 --- a/packages/gatsby-source-contentful/src/extend-node-type.js +++ b/packages/gatsby-source-contentful/src/extend-node-type.js @@ -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