5:4 images ab test (#13365)

* 5:4 images ab test

Author: DanielCliftonGuardian

dotcom-rendering/src/components/ImageComponent.tsx

@@ -15,6 +15,7 @@ import {
 	type ArticleFormat,
 } from '../lib/articleFormat';
 import { getLargest, getMaster } from '../lib/image';
+import { useAB } from '../lib/useAB';
 import { palette as themePalette } from '../palette';
 import type {
 	ImageBlockElement,
@@ -266,6 +267,12 @@ export const ImageComponent = ({
 	isAvatar,
 	isTimeline = false,
 }: Props) => {
+	const abTestAPI = useAB()?.api;
+	const isInFiveFourImagesAbTestVariant = abTestAPI?.isUserInVariant(
+		'FiveFourImages',
+		'variant',
+	);
+
 	const { renderingTarget } = useConfig();
 	// Its possible the tools wont send us any images urls
 	// if so, don't try to render
@@ -306,6 +313,13 @@ export const ImageComponent = ({
 
 	const loading = isMainMedia ? 'eager' : 'lazy';
 
+	const aspectOverride =
+		isInFiveFourImagesAbTestVariant &&
+		isMainMedia &&
+		image.fields.aspectRatio === '5:3'
+			? { aspectRatio: '5:4' }
+			: {};
+
 	if (
 		isMainMedia &&
 		format.display === ArticleDisplay.Immersive &&
@@ -363,6 +377,7 @@ export const ImageComponent = ({
 						height={imageHeight}
 						loading={loading}
 						isMainMedia={isMainMedia}
+						{...aspectOverride}
 					/>
 				)}
 
@@ -423,6 +438,7 @@ export const ImageComponent = ({
 						height={imageHeight}
 						loading={loading}
 						isMainMedia={isMainMedia}
+						{...aspectOverride}
 					/>
 				)}
 
@@ -489,6 +505,7 @@ export const ImageComponent = ({
 						height={imageHeight}
 						loading={loading}
 						isMainMedia={isMainMedia}
+						{...aspectOverride}
 					/>
 				)}
 				{isTimeline && isMainMedia && role === 'showcase' && (

dotcom-rendering/src/experiments/ab-tests.ts

@@ -3,6 +3,7 @@ import { abTestTest } from './tests/ab-test-test';
 import { adBlockAsk } from './tests/ad-block-ask';
 import { auxiaSignInGate } from './tests/auxia-sign-in-gate';
 import { consentlessAds } from './tests/consentless-ads';
+import { fiveFourImages } from './tests/five-four-images';
 import { integrateIma } from './tests/integrate-ima';
 import { mpuWhenNoEpic } from './tests/mpu-when-no-epic';
 import { optimiseSpacefinderInline } from './tests/optimise-spacefinder-inline';
@@ -23,4 +24,5 @@ export const tests: ABTest[] = [
 	optimiseSpacefinderInline,
 	userBenefitsApi,
 	auxiaSignInGate,
+	fiveFourImages,
 ];

dotcom-rendering/src/experiments/tests/five-four-images.ts

@@ -0,0 +1,31 @@
+import type { ABTest } from '@guardian/ab-core';
+
+export const fiveFourImages: ABTest = {
+	id: 'FiveFourImages',
+	start: '2025-02-20',
+	expiry: '2026-01-30',
+	author: '[email protected]',
+	description: 'Compare 5:4 vs 5:3 aspect ratio in article main media images',
+	audience: 0,
+	audienceOffset: 0,
+	successMeasure:
+		'There is not any negative change to the metrics on the variant of the article pages',
+	audienceCriteria: '',
+	dataLinkNames: 'FiveFourImages',
+	idealOutcome: '',
+	canRun: () => true,
+	variants: [
+		{
+			id: 'control',
+			test: (): void => {
+				/* no-op */
+			},
+		},
+		{
+			id: 'variant',
+			test: (): void => {
+				/* no-op */
+			},
+		},
+	],
+};

dotcom-rendering/src/frontend/schemas/feTagPage.json

@@ -1415,6 +1415,9 @@
                         "width": {
                             "type": "string"
                         },
+                        "aspectRatio": {
+                            "type": "string"
+                        },
                         "isMaster": {
                             "type": "string"
                         },

dotcom-rendering/src/model/article-schema.json

@@ -1615,6 +1615,9 @@
                         "width": {
                             "type": "string"
                         },
+                        "aspectRatio": {
+                            "type": "string"
+                        },
                         "isMaster": {
                             "type": "string"
                         },

dotcom-rendering/src/model/block-schema.json

@@ -1102,6 +1102,9 @@
                         "width": {
                             "type": "string"
                         },
+                        "aspectRatio": {
+                            "type": "string"
+                        },
                         "isMaster": {
                             "type": "string"
                         },

dotcom-rendering/src/model/front-schema.json

@@ -3194,6 +3194,9 @@
                         "width": {
                             "type": "string"
                         },
+                        "aspectRatio": {
+                            "type": "string"
+                        },
                         "isMaster": {
                             "type": "string"
                         },

dotcom-rendering/src/types/content.ts

@@ -866,6 +866,7 @@ export interface Image {
 	fields: {
 		height: string;
 		width: string;
+		aspectRatio?: string;
 		isMaster?: string;
 		source?: string;
 		caption?: string;