Merge branch 'main' into add-gallery-lightbox

marjisound · marjisound · commit 26f4cd282bb8 · 2025-08-06T09:52:43.000+01:00
diff --git a/dotcom-rendering/fixtures/config.js b/dotcom-rendering/fixtures/config.js
@@ -48,7 +48,6 @@ module.exports = {
 			relatedContent: true,
 			thirdPartyEmbedTracking: true,
 			prebidOzone: true,
-			prebidAdYouLike: true,
 			mostViewedFronts: true,
 			abSignInGateMainControl: true,
 			ampPrebid: true,
diff --git a/dotcom-rendering/fixtures/generated/cricket-match.ts b/dotcom-rendering/fixtures/generated/cricket-match.ts
@@ -1317,7 +1317,6 @@ export const cricketMatchData: FECricketMatchPage = {
 			prebidOzone: true,
 			ampLiveblogSwitch: false,
 			ampAmazon: false,
-			prebidAdYouLike: true,
 			mostViewedFronts: true,
 			abA9BidResponseWinner: true,
 			optOutAdvertising: true,
diff --git a/dotcom-rendering/fixtures/generated/fe-articles/Analysis.ts b/dotcom-rendering/fixtures/generated/fe-articles/Analysis.ts
@@ -709,7 +709,6 @@ export const Analysis: FEArticle = {
 			relatedContent: true,
 			thirdPartyEmbedTracking: true,
 			prebidOzone: true,
-			prebidAdYouLike: true,
 			mostViewedFronts: true,
 			abSignInGateMainControl: true,
 			ampPrebid: true,
diff --git a/dotcom-rendering/fixtures/generated/fe-articles/Audio.ts b/dotcom-rendering/fixtures/generated/fe-articles/Audio.ts
@@ -727,7 +727,6 @@ export const Audio: FEArticle = {
 			relatedContent: true,
 			thirdPartyEmbedTracking: true,
 			prebidOzone: true,
-			prebidAdYouLike: true,
 			mostViewedFronts: true,
 			abSignInGateMainControl: true,
 			ampPrebid: true,
diff --git a/dotcom-rendering/fixtures/generated/fe-articles/Comment.ts b/dotcom-rendering/fixtures/generated/fe-articles/Comment.ts
@@ -677,7 +677,6 @@ export const Comment: FEArticle = {
 			relatedContent: true,
 			thirdPartyEmbedTracking: true,
 			prebidOzone: true,
-			prebidAdYouLike: true,
 			mostViewedFronts: true,
 			abSignInGateMainControl: true,
 			ampPrebid: true,
diff --git a/dotcom-rendering/fixtures/generated/fe-articles/Dead.ts b/dotcom-rendering/fixtures/generated/fe-articles/Dead.ts
@@ -3086,7 +3086,6 @@ export const Dead: FEArticle = {
 			relatedContent: true,
 			thirdPartyEmbedTracking: true,
 			prebidOzone: true,
-			prebidAdYouLike: true,
 			mostViewedFronts: true,
 			abSignInGateMainControl: true,
 			ampPrebid: true,
diff --git a/dotcom-rendering/fixtures/generated/fe-articles/Editorial.ts b/dotcom-rendering/fixtures/generated/fe-articles/Editorial.ts
@@ -657,7 +657,6 @@ export const Editorial: FEArticle = {
 			relatedContent: true,
 			thirdPartyEmbedTracking: true,
 			prebidOzone: true,
-			prebidAdYouLike: true,
 			mostViewedFronts: true,
 			abSignInGateMainControl: true,
 			ampPrebid: true,
diff --git a/dotcom-rendering/fixtures/generated/fe-articles/Explainer.ts b/dotcom-rendering/fixtures/generated/fe-articles/Explainer.ts
@@ -1434,7 +1434,6 @@ export const Explainer: FEArticle = {
 			relatedContent: true,
 			thirdPartyEmbedTracking: true,
 			prebidOzone: true,
-			prebidAdYouLike: true,
 			mostViewedFronts: true,
 			abSignInGateMainControl: true,
 			ampPrebid: true,
diff --git a/dotcom-rendering/fixtures/generated/fe-articles/Feature.ts b/dotcom-rendering/fixtures/generated/fe-articles/Feature.ts
@@ -1161,7 +1161,6 @@ export const Feature: FEArticle = {
 			relatedContent: true,
 			thirdPartyEmbedTracking: true,
 			prebidOzone: true,
-			prebidAdYouLike: true,
 			mostViewedFronts: true,
 			abSignInGateMainControl: true,
 			ampPrebid: true,
diff --git a/dotcom-rendering/fixtures/generated/fe-articles/Gallery.ts b/dotcom-rendering/fixtures/generated/fe-articles/Gallery.ts
@@ -6699,7 +6699,6 @@ export const Gallery: FEArticle = {
 			relatedContent: true,
 			thirdPartyEmbedTracking: true,
 			prebidOzone: true,
-			prebidAdYouLike: true,
 			mostViewedFronts: true,
 			abSignInGateMainControl: true,
 			ampPrebid: true,
diff --git a/dotcom-rendering/fixtures/generated/fe-articles/GalleryLabs.ts b/dotcom-rendering/fixtures/generated/fe-articles/GalleryLabs.ts
@@ -4299,7 +4299,6 @@ export const GalleryLabs: FEArticle = {
 			relatedContent: true,
 			thirdPartyEmbedTracking: true,
 			prebidOzone: true,
-			prebidAdYouLike: true,
 			mostViewedFronts: true,
 			abSignInGateMainControl: true,
 			ampPrebid: true,
diff --git a/dotcom-rendering/fixtures/generated/fe-articles/Interview.ts b/dotcom-rendering/fixtures/generated/fe-articles/Interview.ts
@@ -2276,7 +2276,6 @@ export const Interview: FEArticle = {
 			relatedContent: true,
 			thirdPartyEmbedTracking: true,
 			prebidOzone: true,
-			prebidAdYouLike: true,
 			mostViewedFronts: true,
 			abSignInGateMainControl: true,
 			ampPrebid: true,
diff --git a/dotcom-rendering/fixtures/generated/fe-articles/Labs.ts b/dotcom-rendering/fixtures/generated/fe-articles/Labs.ts
@@ -1655,7 +1655,6 @@ export const Labs: FEArticle = {
 			relatedContent: true,
 			thirdPartyEmbedTracking: true,
 			prebidOzone: true,
-			prebidAdYouLike: true,
 			mostViewedFronts: true,
 			abSignInGateMainControl: true,
 			ampPrebid: true,
diff --git a/dotcom-rendering/fixtures/generated/fe-articles/Letter.ts b/dotcom-rendering/fixtures/generated/fe-articles/Letter.ts
@@ -553,7 +553,6 @@ export const Letter: FEArticle = {
 			relatedContent: true,
 			thirdPartyEmbedTracking: true,
 			prebidOzone: true,
-			prebidAdYouLike: true,
 			mostViewedFronts: true,
 			abSignInGateMainControl: true,
 			ampPrebid: true,
diff --git a/dotcom-rendering/fixtures/generated/fe-articles/Live.ts b/dotcom-rendering/fixtures/generated/fe-articles/Live.ts
@@ -3086,7 +3086,6 @@ export const Live: FEArticle = {
 			relatedContent: true,
 			thirdPartyEmbedTracking: true,
 			prebidOzone: true,
-			prebidAdYouLike: true,
 			mostViewedFronts: true,
 			abSignInGateMainControl: true,
 			ampPrebid: true,
diff --git a/dotcom-rendering/fixtures/generated/fe-articles/LiveBlogSingleContributor.ts b/dotcom-rendering/fixtures/generated/fe-articles/LiveBlogSingleContributor.ts
@@ -4283,7 +4283,6 @@ export const LiveBlogSingleContributor: FEArticle = {
 			relatedContent: true,
 			thirdPartyEmbedTracking: true,
 			prebidOzone: true,
-			prebidAdYouLike: true,
 			mostViewedFronts: true,
 			abSignInGateMainControl: true,
 			ampPrebid: true,
diff --git a/dotcom-rendering/fixtures/generated/fe-articles/MatchReport.ts b/dotcom-rendering/fixtures/generated/fe-articles/MatchReport.ts
@@ -641,7 +641,6 @@ export const MatchReport: FEArticle = {
 			relatedContent: true,
 			thirdPartyEmbedTracking: true,
 			prebidOzone: true,
-			prebidAdYouLike: true,
 			mostViewedFronts: true,
 			abSignInGateMainControl: true,
 			ampPrebid: true,
diff --git a/dotcom-rendering/fixtures/generated/fe-articles/NewsletterSignup.ts b/dotcom-rendering/fixtures/generated/fe-articles/NewsletterSignup.ts
@@ -596,7 +596,6 @@ export const NewsletterSignup: FEArticle = {
 			relatedContent: true,
 			thirdPartyEmbedTracking: true,
 			prebidOzone: true,
-			prebidAdYouLike: true,
 			mostViewedFronts: true,
 			abSignInGateMainControl: true,
 			ampPrebid: true,
diff --git a/dotcom-rendering/fixtures/generated/fe-articles/NumberedList.ts b/dotcom-rendering/fixtures/generated/fe-articles/NumberedList.ts
@@ -5811,7 +5811,6 @@ export const NumberedList: FEArticle = {
 			relatedContent: true,
 			thirdPartyEmbedTracking: true,
 			prebidOzone: true,
-			prebidAdYouLike: true,
 			mostViewedFronts: true,
 			abSignInGateMainControl: true,
 			ampPrebid: true,
diff --git a/dotcom-rendering/fixtures/generated/fe-articles/PhotoEssay.ts b/dotcom-rendering/fixtures/generated/fe-articles/PhotoEssay.ts
@@ -7674,7 +7674,6 @@ export const PhotoEssay: FEArticle = {
 			relatedContent: true,
 			thirdPartyEmbedTracking: true,
 			prebidOzone: true,
-			prebidAdYouLike: true,
 			mostViewedFronts: true,
 			abSignInGateMainControl: true,
 			ampPrebid: true,
diff --git a/dotcom-rendering/fixtures/generated/fe-articles/Picture.ts b/dotcom-rendering/fixtures/generated/fe-articles/Picture.ts
@@ -557,7 +557,6 @@ export const Picture: FEArticle = {
 			relatedContent: true,
 			thirdPartyEmbedTracking: true,
 			prebidOzone: true,
-			prebidAdYouLike: true,
 			mostViewedFronts: true,
 			abSignInGateMainControl: true,
 			ampPrebid: true,
diff --git a/dotcom-rendering/fixtures/generated/fe-articles/Quiz.ts b/dotcom-rendering/fixtures/generated/fe-articles/Quiz.ts
@@ -1157,7 +1157,6 @@ export const Quiz: FEArticle = {
 			relatedContent: true,
 			thirdPartyEmbedTracking: true,
 			prebidOzone: true,
-			prebidAdYouLike: true,
 			mostViewedFronts: true,
 			abSignInGateMainControl: true,
 			ampPrebid: true,
diff --git a/dotcom-rendering/fixtures/generated/fe-articles/Recipe.ts b/dotcom-rendering/fixtures/generated/fe-articles/Recipe.ts
@@ -742,7 +742,6 @@ export const Recipe: FEArticle = {
 			relatedContent: true,
 			thirdPartyEmbedTracking: true,
 			prebidOzone: true,
-			prebidAdYouLike: true,
 			mostViewedFronts: true,
 			abSignInGateMainControl: true,
 			ampPrebid: true,
diff --git a/dotcom-rendering/fixtures/generated/fe-articles/Review.ts b/dotcom-rendering/fixtures/generated/fe-articles/Review.ts
@@ -986,7 +986,6 @@ export const Review: FEArticle = {
 			relatedContent: true,
 			thirdPartyEmbedTracking: true,
 			prebidOzone: true,
-			prebidAdYouLike: true,
 			mostViewedFronts: true,
 			abSignInGateMainControl: true,
 			ampPrebid: true,
diff --git a/dotcom-rendering/fixtures/generated/fe-articles/SpecialReport.ts b/dotcom-rendering/fixtures/generated/fe-articles/SpecialReport.ts
@@ -756,7 +756,6 @@ export const SpecialReport: FEArticle = {
 			relatedContent: true,
 			thirdPartyEmbedTracking: true,
 			prebidOzone: true,
-			prebidAdYouLike: true,
 			mostViewedFronts: true,
 			abSignInGateMainControl: true,
 			ampPrebid: true,
diff --git a/dotcom-rendering/fixtures/generated/fe-articles/Standard.ts b/dotcom-rendering/fixtures/generated/fe-articles/Standard.ts
@@ -727,7 +727,6 @@ export const Standard: FEArticle = {
 			relatedContent: true,
 			thirdPartyEmbedTracking: true,
 			prebidOzone: true,
-			prebidAdYouLike: true,
 			mostViewedFronts: true,
 			abSignInGateMainControl: true,
 			ampPrebid: true,
diff --git a/dotcom-rendering/fixtures/generated/fe-articles/StandardWithVideo.ts b/dotcom-rendering/fixtures/generated/fe-articles/StandardWithVideo.ts
@@ -727,7 +727,6 @@ export const StandardWithVideo: FEArticle = {
 			relatedContent: true,
 			thirdPartyEmbedTracking: true,
 			prebidOzone: true,
-			prebidAdYouLike: true,
 			mostViewedFronts: true,
 			abSignInGateMainControl: true,
 			ampPrebid: true,
diff --git a/dotcom-rendering/fixtures/generated/fe-articles/Video.ts b/dotcom-rendering/fixtures/generated/fe-articles/Video.ts
@@ -295,7 +295,6 @@ export const Video: FEArticle = {
 			relatedContent: true,
 			thirdPartyEmbedTracking: true,
 			prebidOzone: true,
-			prebidAdYouLike: true,
 			mostViewedFronts: true,
 			abSignInGateMainControl: true,
 			ampPrebid: true,
diff --git a/dotcom-rendering/fixtures/generated/football-live.ts b/dotcom-rendering/fixtures/generated/football-live.ts
@@ -1004,7 +1004,6 @@ export const footballData: FEFootballMatchListPage = {
 			prebidOzone: true,
 			ampLiveblogSwitch: false,
 			ampAmazon: false,
-			prebidAdYouLike: true,
 			mostViewedFronts: true,
 			abA9BidResponseWinner: true,
 			optOutAdvertising: true,
diff --git a/dotcom-rendering/scripts/perf/k6/article-nier-automata.json b/dotcom-rendering/scripts/perf/k6/article-nier-automata.json
@@ -1608,7 +1608,6 @@
 			"prebidOzone": true,
 			"ampLiveblogSwitch": true,
 			"ampAmazon": true,
-			"prebidAdYouLike": true,
 			"mostViewedFronts": true,
 			"optOutAdvertising": true,
 			"abSignInGateMainControl": true,
diff --git a/dotcom-rendering/src/components/AdSlot.web.tsx b/dotcom-rendering/src/components/AdSlot.web.tsx
@@ -22,7 +22,9 @@ type IndexedSlot =
 	| 'fronts-banner'
 	| 'liveblog-inline'
 	| 'liveblog-inline-mobile'
-	| 'mobile-front';
+	| 'mobile-front'
+	| 'gallery-inline'
+	| 'gallery-inline-mobile';
 
 // TODO move to commercial
 type SlotNamesWithPageSkin = SlotName | 'pageskin';
@@ -424,6 +426,29 @@ const crosswordBannerMobileAdStyles = css`
 	min-height: ${getMinHeight(adSizes.mobilesticky.height)}px;
 `;
 
+const galleryInlineAdStyles = css`
+	margin: ${space[3]}px auto;
+	min-height: ${getMinHeight(adSizes.mpu.height)}px;
+
+	&.ad-slot--fluid {
+		margin: ${space[3]}px auto;
+	}
+`;
+
+/*** The top-above-nav-mobile and inline slots label should be dark even in light mode.
+ * Other slots will stay the same as the mentioned ad slots are
+ * the only ones to overlay the dark section of Gallery pages.
+ */
+const galleryInlineAdLabelStyles = css`
+	.ad-slot--dark[data-label-show='true']:not(
+			.ad-slot--interscroller
+		)::before {
+		background-color: ${schemedPalette('--ad-background-article-inner')};
+		border-top-color: ${schemedPalette('--ad-border-article-inner')};
+		color: ${schemedPalette('--ad-labels-text-article-inner')};
+	}
+`;
+
 const AdSlotWrapper = ({
 	children,
 	css: additionalCss,
@@ -911,6 +936,57 @@ export const AdSlot = ({
 				</AdSlotWrapper>
 			);
 		}
+		case 'gallery-inline': {
+			const advertId = `inline${index + 1}`;
+			return (
+				<AdSlotWrapper css={[labelStyles, galleryInlineAdLabelStyles]}>
+					<div
+						id={`dfp-ad--${advertId}`}
+						className={[
+							'js-ad-slot',
+							'ad-slot',
+							`ad-slot--${advertId}`,
+							'ad-slot--gallery-inline',
+							'ad-slot--dark',
+							'hide-until-tablet',
+							'ad-slot--rendered',
+						].join(' ')}
+						css={galleryInlineAdStyles}
+						data-link-name={`ad slot ${advertId}`}
+						data-name={advertId}
+						aria-hidden="true"
+						data-label-show="true"
+						data-testid="slot"
+					/>
+				</AdSlotWrapper>
+			);
+		}
+		case 'gallery-inline-mobile': {
+			const advertId = index === 0 ? 'top-above-nav' : `inline${index}`;
+			return (
+				<AdSlotWrapper css={[labelStyles, galleryInlineAdLabelStyles]}>
+					<div
+						id={`dfp-ad--${advertId}--mobile`}
+						className={[
+							'js-ad-slot',
+							'ad-slot',
+							`ad-slot--${advertId}`,
+							'ad-slot--gallery-inline',
+							'ad-slot--dark',
+							'ad-slot--mobile',
+							'mobile-only',
+							'ad-slot--rendered',
+						].join(' ')}
+						css={galleryInlineAdStyles}
+						data-link-name={`ad slot ${advertId}`}
+						data-name={advertId}
+						aria-hidden="true"
+						data-label-show="true"
+						data-testid="slot"
+					/>
+				</AdSlotWrapper>
+			);
+		}
 	}
 };
 
diff --git a/dotcom-rendering/src/components/GalleryAdSlots.tsx b/dotcom-rendering/src/components/GalleryAdSlots.tsx
@@ -0,0 +1,37 @@
+import { AdSlot } from './AdSlot.web';
+
+export const MobileAdSlot = ({
+	renderAds,
+	adSlotIndex,
+}: {
+	renderAds: boolean;
+	adSlotIndex: number;
+}) => {
+	return (
+		renderAds && (
+			<AdSlot
+				data-print-layout="hide"
+				position="gallery-inline-mobile"
+				index={adSlotIndex}
+			/>
+		)
+	);
+};
+
+export const DesktopAdSlot = ({
+	renderAds,
+	adSlotIndex,
+}: {
+	renderAds: boolean;
+	adSlotIndex: number;
+}) => {
+	return (
+		renderAds && (
+			<AdSlot
+				data-print-layout="hide"
+				position="gallery-inline"
+				index={adSlotIndex}
+			/>
+		)
+	);
+};
diff --git a/dotcom-rendering/src/layouts/GalleryLayout.tsx b/dotcom-rendering/src/layouts/GalleryLayout.tsx
diff --git a/dotcom-rendering/src/lib/getGalleryAdPositions.ts b/dotcom-rendering/src/lib/getGalleryAdPositions.ts
diff --git a/dotcom-rendering/src/paletteDeclarations.ts b/dotcom-rendering/src/paletteDeclarations.ts
