Add option to provide an image crop offset to fastly image resizer (#13802)

Author: abeddow91

dotcom-rendering/src/components/CardPicture.tsx

@@ -110,11 +110,13 @@ const decideImageWidths = (
 					breakpoint: breakpoints.tablet,
 					width: 700,
 					aspectRatio: '5:3',
+					cropOffset: { x: 50, y: 0 },
 				},
 				{
 					breakpoint: breakpoints.desktop,
 					width: 940,
 					aspectRatio: '5:3',
+					cropOffset: { x: 50, y: 0 },
 				},
 			];
 	}

dotcom-rendering/src/components/Picture.tsx

@@ -40,6 +40,7 @@ export type ImageWidthType = {
 	breakpoint: number;
 	width: number;
 	aspectRatio?: AspectRatio;
+	cropOffset?: { x: number; y: number };
 };
 
 /**
@@ -403,7 +404,7 @@ export const generateSources = (
 	imageWidths
 		.slice()
 		.sort(descendingByBreakpoint)
-		.map(({ width: imageWidth, breakpoint, aspectRatio }) => {
+		.map(({ width: imageWidth, breakpoint, aspectRatio, cropOffset }) => {
 			return {
 				breakpoint,
 				width: imageWidth,
@@ -412,12 +413,14 @@ export const generateSources = (
 					imageWidth,
 					resolution: 'high',
 					aspectRatio,
+					cropOffset,
 				}),
 				lowResUrl: generateImageURL({
 					mainImage,
 					imageWidth,
 					resolution: 'low',
 					aspectRatio,
+					cropOffset,
 				}),
 			};
 		});

dotcom-rendering/src/lib/image.ts

@@ -49,22 +49,27 @@ export const generateImageURL = ({
 	imageWidth,
 	resolution,
 	aspectRatio = 'none',
+	cropOffset,
 }: {
 	mainImage: string;
 	imageWidth: number;
 	resolution: 'low' | 'high';
 	aspectRatio?: string;
+	cropOffset?: { x: number; y: number };
 }): string => {
 	const url = new URL(mainImage);
-
+	const offset = cropOffset
+		? `,offset-x${cropOffset.x},offset-y${cropOffset.y}`
+		: ``;
+	const crop = `${aspectRatio}${offset}`;
 	// In CODE, we do not generate optimised replacement images
 	if (url.hostname === 's3-eu-west-1.amazonaws.com') return url.href;
 
 	const params = new URLSearchParams({
 		width: imageWidth.toString(),
 		dpr: String(resolution === 'high' ? 2 : 1),
 		s: 'none',
-		crop: aspectRatio,
+		crop,
 	});
 
 	return `https://i.guim.co.uk/img/${getServiceFromUrl(url)}${