feat: Add support for aspectRatio (#28941)

* Add support for aspectRatio

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

Co-authored-by: Matt Kane <[email protected]>

* handle width too, refactor accordingly

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

Co-authored-by: Matt Kane <[email protected]>

* work for fixed too

Co-authored-by: Matt Kane <[email protected]>

Author: LB

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`,

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) {

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
 }

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
 

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`,