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

…25776) * Calculate fixed image width if necessary * Calculate fixed image width if necessary * Revert snapshot test changes * Bring back new test * Update snapshot
gatsbyjs · Jul 29, 2020 · 5148b3a · 5148b3a
1 parent 0b67a69
commit 5148b3a
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 17 deletions.
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
@@ -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
@@ -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,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,
@@ -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
@@ -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