Add thumbnail image to audio page (#12459)

Added image to the blocks for audio articles and where the audio image is present.
guardian · Oct 14, 2024 · 7bfc4ed · 7bfc4ed
1 parent ea365ac
commit 7bfc4ed
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 10 deletions.
diff --git a/dotcom-rendering/src/model/article-schema.json b/dotcom-rendering/src/model/article-schema.json
@@ -290,6 +290,9 @@
         "starRating": {
             "$ref": "#/definitions/StarRating"
         },
+        "audioArticleImage": {
+            "$ref": "#/definitions/ImageBlockElement"
+        },
         "trailText": {
             "type": "string"
         },
@@ -1480,7 +1483,6 @@
                 "fields",
                 "index",
                 "mediaType",
-                "mimeType",
                 "url"
             ]
         },

diff --git a/dotcom-rendering/src/model/block-schema.json b/dotcom-rendering/src/model/block-schema.json
@@ -1084,7 +1084,6 @@
                 "fields",
                 "index",
                 "mediaType",
-                "mimeType",
                 "url"
             ]
         },

diff --git a/dotcom-rendering/src/model/enhanceBlocks.ts b/dotcom-rendering/src/model/enhanceBlocks.ts
@@ -1,6 +1,11 @@
 import { isUndefined } from '@guardian/libs';
 import { type ArticleFormat } from '../lib/format';
-import type { FEElement, ImageForLightbox, Newsletter } from '../types/content';
+import type {
+	FEElement,
+	ImageBlockElement,
+	ImageForLightbox,
+	Newsletter,
+} from '../types/content';
 import type { RenderingTarget } from '../types/renderingTarget';
 import { enhanceAdPlaceholders } from './enhance-ad-placeholders';
 import { enhanceBlockquotes } from './enhance-blockquotes';
@@ -23,6 +28,7 @@ type Options = {
 	promotedNewsletter: Newsletter | undefined;
 	imagesForLightbox: ImageForLightbox[];
 	hasAffiliateLinksDisclaimer: boolean;
+	audioArticleImage?: ImageBlockElement;
 };
 
 const enhanceNewsletterSignup =
@@ -92,8 +98,17 @@ export const enhanceBlocks = (
 	blocks: Block[],
 	format: ArticleFormat,
 	options: Options,
-): Block[] =>
-	blocks.map((block) => ({
+): Block[] => {
+	const additionalElement: FEElement[] = [];
+	if (options.audioArticleImage) {
+		additionalElement.push(options.audioArticleImage);
+	}
+	return blocks.map((block) => ({
 		...block,
-		elements: enhanceElements(format, block.id, options)(block.elements),
+		elements: enhanceElements(
+			format,
+			block.id,
+			options,
+		)([...block.elements, ...additionalElement]),
 	}));
+};
diff --git a/dotcom-rendering/src/model/front-schema.json b/dotcom-rendering/src/model/front-schema.json
@@ -3153,7 +3153,6 @@
                 "fields",
                 "index",
                 "mediaType",
-                "mimeType",
                 "url"
             ]
         },

diff --git a/dotcom-rendering/src/model/tag-page-schema.json b/dotcom-rendering/src/model/tag-page-schema.json
@@ -1412,7 +1412,6 @@
                 "fields",
                 "index",
                 "mediaType",
-                "mimeType",
                 "url"
             ]
         },

diff --git a/dotcom-rendering/src/types/article.ts b/dotcom-rendering/src/types/article.ts
@@ -68,6 +68,7 @@ export const enhanceArticleType = (
 		promotedNewsletter: data.promotedNewsletter,
 		imagesForLightbox,
 		hasAffiliateLinksDisclaimer: !!data.affiliateLinksDisclaimer,
+		audioArticleImage: data.audioArticleImage,
 	});
 
 	const mainMediaElements = enhanceMainMedia(

diff --git a/dotcom-rendering/src/types/content.ts b/dotcom-rendering/src/types/content.ts
@@ -820,7 +820,7 @@ export interface Image {
 		caption?: string;
 	};
 	mediaType: string;
-	mimeType: string;
+	mimeType?: string;
 	url: string;
 }
 

diff --git a/dotcom-rendering/src/types/frontend.ts b/dotcom-rendering/src/types/frontend.ts
@@ -3,7 +3,12 @@ import type { EditionId } from '../lib/edition';
 import type { FEArticleBadgeType } from './badge';
 import type { CommercialProperties } from './commercial';
 import type { ConfigType, ServerSideTests } from './config';
-import type { FEElement, Newsletter, StarRating } from './content';
+import type {
+	FEElement,
+	ImageBlockElement,
+	Newsletter,
+	StarRating,
+} from './content';
 import type { FooterType } from './footer';
 import type { FEOnwards } from './onwards';
 import type { MatchType } from './sport';
@@ -85,6 +90,7 @@ export interface FEArticleType {
 	isCommentable: boolean;
 	commercialProperties: CommercialProperties;
 	starRating?: StarRating;
+	audioArticleImage?: ImageBlockElement;
 	trailText: string;
 	badge?: FEArticleBadgeType;