From ed19fa052a93e948b1135ac128cf5abec48752b6 Mon Sep 17 00:00:00 2001
From: LB <laurie@gatsbyjs.com>
Date: Mon, 11 Jan 2021 11:59:11 -0500
Subject: [PATCH] feat: Add support for aspectRatio (#28941)

* Add support for aspectRatio

* Update packages/gatsby-plugin-sharp/src/image-data.ts

Co-authored-by: Matt Kane <matt@gatsbyjs.com>

* handle width too, refactor accordingly

* Update packages/gatsby-transformer-sharp/src/customize-schema.js

Co-authored-by: Matt Kane <matt@gatsbyjs.com>

* work for fixed too

Co-authored-by: Matt Kane <matt@gatsbyjs.com>
---
 packages/gatsby-plugin-image/src/babel-helpers.ts   |  1 +
 .../src/components/static-image.server.tsx          |  3 +++
 packages/gatsby-plugin-image/src/utils.ts           |  1 +
 packages/gatsby-plugin-sharp/src/image-data.ts      | 13 +++++++++++++
 .../src/customize-schema.js                         |  7 +++++++
 5 files changed, 25 insertions(+)

diff --git a/packages/gatsby-plugin-image/src/babel-helpers.ts b/packages/gatsby-plugin-image/src/babel-helpers.ts
index c84a181fbd8ee..d0dde7edef400 100644
--- a/packages/gatsby-plugin-image/src/babel-helpers.ts
+++ b/packages/gatsby-plugin-image/src/babel-helpers.ts
@@ -10,6 +10,7 @@ export const SHARP_ATTRIBUTES = new Set([
   `formats`,
   `maxWidth`,
   `maxHeight`,
+  `aspectRatio`,
   `quality`,
   `avifOptions`,
   `jpgOptions`,
diff --git a/packages/gatsby-plugin-image/src/components/static-image.server.tsx b/packages/gatsby-plugin-image/src/components/static-image.server.tsx
index c87d7f3045371..555018f97f61d 100644
--- a/packages/gatsby-plugin-image/src/components/static-image.server.tsx
+++ b/packages/gatsby-plugin-image/src/components/static-image.server.tsx
@@ -14,6 +14,7 @@ export interface IStaticImageProps extends Omit<GatsbyImageProps, "image"> {
   height?: number
   maxWidth?: number
   maxHeight?: number
+  aspectRatio?: number
   sizes?: string
   quality?: number
   transformOptions?: {
@@ -45,6 +46,7 @@ export function _getStaticImage(
     maxWidth,
     height,
     maxHeight,
+    aspectRatio,
     tracedSVGOptions,
     placeholder,
     formats,
@@ -117,6 +119,7 @@ export const propTypes = {
   height: checkDimensionProps,
   maxHeight: checkDimensionProps,
   maxWidth: checkDimensionProps,
+  aspectRatio: checkDimensionProps,
   sizes: PropTypes.string,
   layout: (props: IStaticImageProps & IPrivateProps): Error | undefined => {
     if (props.layout === undefined) {
diff --git a/packages/gatsby-plugin-image/src/utils.ts b/packages/gatsby-plugin-image/src/utils.ts
index 91bad62d29b97..dcfb51b2ed42e 100644
--- a/packages/gatsby-plugin-image/src/utils.ts
+++ b/packages/gatsby-plugin-image/src/utils.ts
@@ -29,6 +29,7 @@ export interface ICommonImageProps {
 export interface IFluidImageProps extends ICommonImageProps {
   maxWidth?: number
   maxHeight?: number
+  aspectRatio?: number
   fit?: number
   background?: number
 }
diff --git a/packages/gatsby-plugin-sharp/src/image-data.ts b/packages/gatsby-plugin-sharp/src/image-data.ts
index 6a5e3f4e39aa4..fa35c489af28f 100644
--- a/packages/gatsby-plugin-sharp/src/image-data.ts
+++ b/packages/gatsby-plugin-sharp/src/image-data.ts
@@ -19,6 +19,7 @@ export interface ISharpGatsbyImageArgs {
   height?: number
   maxWidth?: number
   maxHeight?: number
+  aspectRatio?: number
   sizes?: string
   quality?: number
   transformOptions: {
@@ -137,6 +138,18 @@ export async function generateImageData({
     }
   }
 
+  if (args.aspectRatio) {
+    if (args.maxWidth && args.maxHeight) {
+      reporter.warn(
+        `Specifying aspectRatio along with both width and height will cause aspectRatio to be ignored.`
+      )
+    } else if (args.maxWidth) {
+      args.maxHeight = args.maxWidth / args.aspectRatio
+    } else if (args.maxHeight) {
+      args.maxWidth = args.maxHeight * args.aspectRatio
+    }
+  }
+
   const formats = new Set(args.formats)
   let useAuto = formats.has(``) || formats.has(`auto`) || formats.size === 0
 
diff --git a/packages/gatsby-transformer-sharp/src/customize-schema.js b/packages/gatsby-transformer-sharp/src/customize-schema.js
index cfa96ac74747e..fc6903daed5bd 100644
--- a/packages/gatsby-transformer-sharp/src/customize-schema.js
+++ b/packages/gatsby-transformer-sharp/src/customize-schema.js
@@ -434,6 +434,13 @@ const imageNodeType = ({
         description: stripIndent`
         If set, the height of the generated image. If omitted, it is calculated from the supplied width, matching the aspect ratio of the source image.`,
       },
+      aspectRatio: {
+        type: GraphQLFloat,
+        description: stripIndent`
+        If set along with width or height, this will set the value of the other dimension to match the provided aspect ratio, cropping the image if needed. 
+        If neither width or height is provided, height will be set based on the intrinsic width of the source image.
+        `,
+      },
       placeholder: {
         type: ImagePlaceholderType,
         defaultValue: `blurred`,