fix(image cdn): do not pass aspect ratio in with image args

gatsbyjs · Mar 17, 2022 · 43b3167 · 43b3167
1 parent 5f77ea0
commit 43b3167
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 18 deletions.
diff --git a/packages/gatsby-plugin-utils/src/polyfill-remote-file/__tests__/gatsby-image-resolver.ts b/packages/gatsby-plugin-utils/src/polyfill-remote-file/__tests__/gatsby-image-resolver.ts
@@ -98,14 +98,14 @@ describe(`gatsbyImageData`, () => {
 
  expect(parsedSrcSet[0].src).toEqual(
  `/_gatsby/image/${base64Encode(portraitSource.url)}/${base64Encode(
- `w=300&h=481&fit=crop&ar=1.333333333&fm=avif&q=75`
+ `w=300&h=225&fm=avif&q=75`
  )}/${portraitSource.basename}.avif`
  )
  expect(parsedSrcSet[0].descriptor).toEqual(`1x`)
 
  expect(parsedSrcSet[1].src).toEqual(
  `/_gatsby/image/${base64Encode(portraitSource.url)}/${base64Encode(
- `w=600&h=962&fit=crop&ar=1.333333333&fm=avif&q=75`
+ `w=600&h=450&fm=avif&q=75`
  )}/${portraitSource.basename}.avif`
  )
  expect(parsedSrcSet[1].descriptor).toEqual(`2x`)
@@ -127,14 +127,14 @@ describe(`gatsbyImageData`, () => {
 
  expect(parsedSrcSet[0].src).toEqual(
  `/_gatsby/image/${base64Encode(portraitSource.url)}/${base64Encode(
- `w=300&h=481&fit=crop&crop=entropy&ar=1.333333333&fm=avif&q=75`
+ `w=300&h=225&fit=crop&crop=entropy&fm=avif&q=75`
  )}/${portraitSource.basename}.avif`
  )
  expect(parsedSrcSet[0].descriptor).toEqual(`1x`)
 
  expect(parsedSrcSet[1].src).toEqual(
  `/_gatsby/image/${base64Encode(portraitSource.url)}/${base64Encode(
- `w=600&h=962&fit=crop&crop=entropy&ar=1.333333333&fm=avif&q=75`
+ `w=600&h=450&fit=crop&crop=entropy&fm=avif&q=75`
  )}/${portraitSource.basename}.avif`
  )
  expect(parsedSrcSet[1].descriptor).toEqual(`2x`)

diff --git a/packages/gatsby-plugin-utils/src/polyfill-remote-file/graphql/gatsby-image-resolver.ts b/packages/gatsby-plugin-utils/src/polyfill-remote-file/graphql/gatsby-image-resolver.ts
@@ -180,7 +180,6 @@ export async function gatsbyImageResolver(
  fit: args.fit as ImageFit,
  contentDigest: source.internal.contentDigest,
  quality: args.quality as number,
- aspectRatio: args.aspectRatio as number,
  },
  actions
  )
@@ -192,7 +191,6 @@ export async function gatsbyImageResolver(
  format,
  cropFocus: args.cropFocus,
  quality: args.quality as number,
- aspectRatio: args.aspectRatio as number,
  })}/${encodeURIComponent(
  path.basename(source.filename, path.extname(source.filename))
  )}.${format}`

diff --git a/packages/gatsby-plugin-utils/src/polyfill-remote-file/jobs/dispatchers.ts b/packages/gatsby-plugin-utils/src/polyfill-remote-file/jobs/dispatchers.ts
@@ -69,7 +69,6 @@ export function dispatchLocalImageServiceJob(
  fit,
  contentDigest,
  quality,
- aspectRatio,
  }: {
  url: string
  extension: string
@@ -80,7 +79,6 @@ export function dispatchLocalImageServiceJob(
  fit: ImageFit
  contentDigest: string
  quality: number
- aspectRatio: number
  },
  actions: Actions
 ): void {
@@ -98,7 +96,7 @@ export function dispatchLocalImageServiceJob(
  outputDir: path.join(
  global.__GATSBY?.root || process.cwd(),
  ...publicUrl.filter(Boolean),
- generateImageArgs({ width, height, format, quality, aspectRatio })
+ generateImageArgs({ width, height, format, quality })
  ),
  args: {
  url,

diff --git a/packages/gatsby-plugin-utils/src/polyfill-remote-file/utils/url-generator.ts b/packages/gatsby-plugin-utils/src/polyfill-remote-file/utils/url-generator.ts
@@ -28,12 +28,10 @@ export function generateImageArgs({
  format,
  cropFocus,
  quality,
- aspectRatio,
 }: WidthOrHeight & {
  format: string
  cropFocus?: ImageCropFocus | Array<ImageCropFocus>
  quality: number
- aspectRatio: number
 }): string {
  const args: Array<string> = []
  if (width) {
@@ -48,13 +46,6 @@ export function generateImageArgs({
  `crop=${Array.isArray(cropFocus) ? cropFocus.join(`,`) : cropFocus}`
  )
  }
- if (aspectRatio) {
- // crop must be set for aspectRatio to work
- if (!cropFocus) {
- args.push(`fit=crop`)
- }
- args.push(`ar=${aspectRatio}`)
- }
  args.push(`fm=${format}`)
  args.push(`q=${quality}`)