feat(gatsby-source-contentful): Remove default image transform width

packages/gatsby-source-contentful/README.md

@@ -288,7 +288,7 @@ To get **all** the `CaseStudy` nodes with ShortText fields `id`, `slug`, `title`
           body
         }
         heroImage {
-          resolutions(width: 1600) {
+          fixed(width: 1600) {
             width
             height
             src
@@ -301,6 +301,8 @@ To get **all** the `CaseStudy` nodes with ShortText fields `id`, `slug`, `title`
 }
 ```
 
+When querying images you can use the `fixed`, `fluid` or `resize` nodes to get different sizes for the image (for example for using [gatsby-image](https://www.gatsbyjs.org/packages/gatsby-image/)). Their usage is documented at the [gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/) package. The only difference is that gatsby-source-contentful also allows setting only the `height` parameter for these node types, the height will then automatically be calculated according to the aspect ratio.
+
 ## More on Queries with Contentful and Gatsby
 
 It is strongly recommended that you take a look at how data flows in a real Contentful and Gatsby application to fully understand how the queries, Node.js functions and React components all come together. Check out the example site at

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

@@ -75,7 +75,23 @@ Object {
 }
 `;
 
-exports[`contentful extend node type resolveFluid generates responsive size data for images 1`] = `
+exports[`contentful extend node type resolveFluid generates responsive size data for images given a maxHeight 1`] = `
+Object {
+  "aspectRatio": 0.75,
+  "baseUrl": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg",
+  "sizes": "(max-width: 300px) 100vw, 300px",
+  "src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=300&h=400",
+  "srcSet": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=75&h=100 75w,
+//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=150&h=200 150w,
+//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=300&h=400 300w,
+//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=450&h=600 450w,
+//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=600&h=800 600w,
+//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=900&h=1200 900w,
+//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=4500&h=6000 4500w",
+}
+`;
+
+exports[`contentful extend node type resolveFluid generates responsive size data for images given a maxWidth 1`] = `
 Object {
   "aspectRatio": 0.75,
   "baseUrl": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg",
@@ -91,7 +107,43 @@ Object {
 }
 `;
 
-exports[`contentful extend node type resolveResize generates resized images 1`] = `
+exports[`contentful extend node type resolveFluid generates responsive size data for images using a default maxWidth 1`] = `
+Object {
+  "aspectRatio": 0.75,
+  "baseUrl": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg",
+  "sizes": "(max-width: 800px) 100vw, 800px",
+  "src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=800",
+  "srcSet": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=200&h=267 200w,
+//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=400&h=533 400w,
+//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=800&h=1067 800w,
+//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=1200&h=1600 1200w,
+//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=1600&h=2133 1600w,
+//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=2400&h=3200 2400w,
+//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=4500&h=6000 4500w",
+}
+`;
+
+exports[`contentful extend node type resolveResize generates resized images given a certain height 1`] = `
+Object {
+  "aspectRatio": 0.75,
+  "baseUrl": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg",
+  "height": 600,
+  "src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?h=600",
+  "width": 450,
+}
+`;
+
+exports[`contentful extend node type resolveResize generates resized images given a certain width 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",
+  "width": 400,
+}
+`;
+
+exports[`contentful extend node type resolveResize generates resized images using a default width 1`] = `
 Object {
   "aspectRatio": 0.75,
   "baseUrl": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg",

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

@@ -56,13 +56,25 @@ describe(`contentful extend node type`, () => {
       expect(resp.srcSet.length).toBeGreaterThan(1)
       expect(resp).toMatchSnapshot()
     })
-    it(`If the height isn't specified it should be set keeping with the aspect ratio of the original image`, async () => {
+    it(`resorts to a default width if no arguments are given`, async () => {
+      const resp = await resolveFixed(image, {})
+      expect(resp.width).toBe(400)
+      expect(resp.height).toBe(533)
+    })
+    it(`resolves the height if only a width is given`, async () => {
       const resp = await resolveFixed(image, {
         width: 450,
       })
       expect(resp.width).toBe(450)
       expect(resp.height).toBe(600)
     })
+    it(`resolves the width if only a height is given`, async () => {
+      const resp = await resolveFixed(image, {
+        height: 600,
+      })
+      expect(resp.width).toBe(450)
+      expect(resp.height).toBe(600)
+    })
     it(`if width and height are set that's what is returned`, async () => {
       const resp = await resolveFixed(image, {
         width: 450,
@@ -94,11 +106,21 @@ describe(`contentful extend node type`, () => {
     })
   })
   describe(`resolveFluid`, () => {
-    it(`generates responsive size data for images`, async () => {
+    it(`generates responsive size data for images using a default maxWidth`, async () => {
+      const resp = await resolveFluid(image, {})
+      expect(resp.srcSet.length).toBeGreaterThan(1)
+      expect(resp).toMatchSnapshot()
+    })
+    it(`generates responsive size data for images given a maxWidth`, async () => {
       const resp = await resolveFluid(image, { maxWidth: 400 })
       expect(resp.srcSet.length).toBeGreaterThan(1)
       expect(resp).toMatchSnapshot()
     })
+    it(`generates responsive size data for images given a maxHeight`, async () => {
+      const resp = await resolveFluid(image, { maxHeight: 400 })
+      expect(resp.srcSet.length).toBeGreaterThan(1)
+      expect(resp).toMatchSnapshot()
+    })
     it(`generates fluid sizes data for images using all options`, async () => {
       const resp = await resolveFluid(image, {
         maxWidth: 450,
@@ -124,10 +146,18 @@ describe(`contentful extend node type`, () => {
     })
   })
   describe(`resolveResize`, () => {
-    it(`generates resized images`, async () => {
+    it(`generates resized images using a default width`, async () => {
+      const resp = await resolveResize(image, {})
+      expect(resp).toMatchSnapshot()
+    })
+    it(`generates resized images given a certain width`, async () => {
       const resp = await resolveResize(image, { width: 400 })
       expect(resp).toMatchSnapshot()
     })
+    it(`generates resized images given a certain height`, async () => {
+      const resp = await resolveResize(image, { height: 600 })
+      expect(resp).toMatchSnapshot()
+    })
     it(`generates resized images using all options`, async () => {
       const resp = await resolveResize(image, {
         width: 450,

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

@@ -82,14 +82,19 @@ const resolveFixed = (image, options) => {
 
   let desiredAspectRatio = aspectRatio
 
+  // If no dimension is given, set a default width
+  if (options.width === undefined && options.height === undefined) {
+    options.width = 400
+  }
+
   // If we're cropping, calculate the specified aspect ratio.
-  if (options.height) {
+  if (options.width !== undefined && options.height !== undefined) {
     desiredAspectRatio = options.width / options.height
   }
 
-  // If the user selected a height (so cropping) and fit option
+  // If the user selected a height and width (so cropping) and fit option
   // is not set, we'll set our defaults
-  if (options.height) {
+  if (options.width !== undefined && options.height !== undefined) {
     if (!options.resizingBehavior) {
       options.resizingBehavior = `fill`
     }
@@ -142,17 +147,19 @@ const resolveFixed = (image, options) => {
     })
     .join(`,\n`)
 
-  let pickedHeight
+  let pickedHeight, pickedWidth
   if (options.height) {
     pickedHeight = options.height
+    pickedWidth = options.height * desiredAspectRatio
   } else {
     pickedHeight = options.width / desiredAspectRatio
+    pickedWidth = options.width
   }
 
   return {
     aspectRatio: desiredAspectRatio,
     baseUrl,
-    width: Math.round(options.width),
+    width: Math.round(pickedWidth),
     height: Math.round(pickedHeight),
     src: createUrl(baseUrl, {
       ...options,
@@ -170,8 +177,18 @@ const resolveFluid = (image, options) => {
 
   let desiredAspectRatio = aspectRatio
 
+  // If no dimension is given, set a default maxWidth
+  if (options.maxWidth === undefined && options.maxHeight === undefined) {
+    options.maxWidth = 800
+  }
+
+  // If only a maxHeight is given, calculate the maxWidth based on the height and the aspect ratio
+  if (options.maxHeight !== undefined && options.maxWidth === undefined) {
+    options.maxWidth = Math.round(options.maxHeight * desiredAspectRatio)
+  }
+
   // If we're cropping, calculate the specified aspect ratio.
-  if (options.maxHeight) {
+  if (options.maxHeight !== undefined && options.maxWidth !== undefined) {
     desiredAspectRatio = options.maxWidth / options.maxHeight
   }
 
@@ -238,21 +255,30 @@ const resolveResize = (image, options) => {
 
   const { baseUrl, aspectRatio } = getBasicImageProps(image, options)
 
-  // If the user selected a height (so cropping) and fit option
+  // If no dimension is given, set a default width
+  if (options.width === undefined && options.height === undefined) {
+    options.width = 400
+  }
+
+  // If the user selected a height and width (so cropping) and fit option
   // is not set, we'll set our defaults
-  if (options.height) {
+  if (options.width !== undefined && options.height !== undefined) {
     if (!options.resizingBehavior) {
       options.resizingBehavior = `fill`
     }
   }
 
-  const pickedWidth = options.width
-  let pickedHeight
-  if (options.height) {
-    pickedHeight = options.height
-  } else {
+  let pickedHeight = options.height,
+    pickedWidth = options.width
+
+  if (pickedWidth === undefined) {
+    pickedWidth = pickedHeight * aspectRatio
+  }
+
+  if (pickedHeight === undefined) {
     pickedHeight = pickedWidth / aspectRatio
   }
+
   return {
     src: createUrl(image.file.url, options),
     width: Math.round(pickedWidth),