feat(gatsby-plugin-utils): support aspect ratio for Image Service

[veryspry]

Description

We were not passing along the aspectRatio arg passed into the GatsbyImage field / resolver to the underlying query string arg builder and thus we weren't actually doing anything with aspectRatio. This fixes that and adds a couple tests!

[wardpeet]

We should use aspectRatio when calculating crop & size instead of passing it through sharp.

gatsby/packages/gatsby-plugin-image/src/image-utils.ts

Lines 152 to 197 in c0d2eba

	export function setDefaultDimensions(
	args: IGatsbyImageHelperArgs
	): IGatsbyImageHelperArgs {
	let {
	layout = `constrained`,
	width,
	height,
	sourceMetadata,
	breakpoints,
	aspectRatio,
	formats = [`auto`, `webp`],
	} = args
	formats = formats.map(format => format.toLowerCase() as ImageFormat)
	layout = camelCase(layout) as Layout
	if (width && height) {
	return { ...args, formats, layout, aspectRatio: width / height }
	}
	if (sourceMetadata.width && sourceMetadata.height && !aspectRatio) {
	aspectRatio = sourceMetadata.width / sourceMetadata.height
	}
	if (layout === `fullWidth`) {
	width = width || sourceMetadata.width || breakpoints[breakpoints.length - 1]
	height = height || Math.round(width / (aspectRatio || DEFAULT_ASPECT_RATIO))
	} else {
	if (!width) {
	if (height && aspectRatio) {
	width = height * aspectRatio
	} else if (sourceMetadata.width) {
	width = sourceMetadata.width
	} else if (height) {
	width = Math.round(height / DEFAULT_ASPECT_RATIO)
	} else {
	width = DEFAULT_FIXED_WIDTH
	}
	}
	if (aspectRatio && !height) {
	height = Math.round(width / aspectRatio)
	} else if (!aspectRatio) {
	aspectRatio = width / height
	}
	}
	return { ...args, width, height, aspectRatio, layout, formats }
	}

[pvorozhe]

Yay for adding tests!!

[veryspry]

🙌

[veryspry]

We should use aspectRatio when calculating crop & size instead of passing it through sharp.

gatsby/packages/gatsby-plugin-image/src/image-utils.ts

Lines 152 to 197 in c0d2eba

	export function setDefaultDimensions(
	args: IGatsbyImageHelperArgs
	): IGatsbyImageHelperArgs {
	let {
	layout = `constrained`,
	width,
	height,
	sourceMetadata,
	breakpoints,
	aspectRatio,
	formats = [`auto`, `webp`],
	} = args
	formats = formats.map(format => format.toLowerCase() as ImageFormat)
	layout = camelCase(layout) as Layout
	if (width && height) {
	return { ...args, formats, layout, aspectRatio: width / height }
	}
	if (sourceMetadata.width && sourceMetadata.height && !aspectRatio) {
	aspectRatio = sourceMetadata.width / sourceMetadata.height
	}
	if (layout === `fullWidth`) {
	width = width || sourceMetadata.width || breakpoints[breakpoints.length - 1]
	height = height || Math.round(width / (aspectRatio || DEFAULT_ASPECT_RATIO))
	} else {
	if (!width) {
	if (height && aspectRatio) {
	width = height * aspectRatio
	} else if (sourceMetadata.width) {
	width = sourceMetadata.width
	} else if (height) {
	width = Math.round(height / DEFAULT_ASPECT_RATIO)
	} else {
	width = DEFAULT_FIXED_WIDTH
	}
	}
	if (aspectRatio && !height) {
	height = Math.round(width / aspectRatio)
	} else if (!aspectRatio) {
	aspectRatio = width / height
	}
	}
	return { ...args, width, height, aspectRatio, layout, formats }
	}

Got it! I have a couple Q's about that:

1. Is the best place to do that in the setDefaultDimensions function?
2. Do I need to do anything further to make sure that aspectRatio doesn't get passed through sharp other than using it to calculate crop and size?

[wardpeet]

1. I guess you should do it in here https:/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-utils/src/polyfill-remote-file/graphql/utils.ts#L26
2. I don't think so

[cameronbraid]

both packages/gatsby-plugin-utils/src/polyfill-remote-file/http-routes.ts and packages/gatsby-plugin-utils/src/polyfill-remote-file/transform-images.ts need to be updated as to use the new fit and aspectRatio values

[cameronbraid]

There is already a fit parameter in gatsbyImageResolver that should be used instead of the hard coded fit=crop.

Also - fit should be set even if there isn't an aspect ratio

[veryspry]

This is actually a bit of a special case. We use fit only to calculate width and height` so that locally processed images and those processed with Image CDN on Gatsby Cloud are identical in terms of size and crop.

Because of the way that aspectRatio is handled on Gatsby Cloud, it is required that fit be either "crop" or "fill". Here I make sure that the fit param is added if it does not exist already so that aspectRatio will actually be used on the Gatsby Cloud side

[cameronbraid]

it would also be good to pass along the backgroundColor via the url so that when people use fit=contain the letterboxing can be done with the appropriate colour