Add image number above caption in Hosted Gallery

dotcom-rendering/src/components/GalleryCaption.tsx

@@ -1,5 +1,11 @@
 import { css } from '@emotion/react';
-import { between, from, space, textSans14 } from '@guardian/source/foundations';
+import {
+	between,
+	from,
+	space,
+	textSans14,
+	textSans15,
+} from '@guardian/source/foundations';
 import { grid } from '../grid';
 import { ArticleDesign, type ArticleFormat } from '../lib/articleFormat';
 import { palette } from '../palette';
@@ -16,6 +22,8 @@ type Props = {
 	webTitle: string;
 	/** Position of the image in the gallery used to build share fragment */
 	position?: number;
+	// Pass the total number of images from Hosted Gallery to include in the image caption (e.g. 1/5, 2/5, etc.)
+	imagesLength?: number;
 };
 
 const styles = css`
@@ -46,19 +54,32 @@ export const GalleryCaption = ({
 	pageId,
 	webTitle,
 	position,
+	imagesLength,
 }: Props) => {
 	const emptyCaption = captionHtml === undefined || captionHtml.trim() === '';
 	const hideCredit =
 		displayCredit === false || credit === undefined || credit === '';
-	const shouldIncludeShareButton =
-		format.design !== ArticleDesign.HostedGallery;
+	const isHostedGallery = format.design === ArticleDesign.HostedGallery;
 
 	if (emptyCaption && hideCredit) {
 		return null;
 	}
 
 	return (
 		<figcaption css={styles}>
+			{isHostedGallery &&
+			typeof position === 'number' &&
+			!!imagesLength ? (
+				<small
+					css={css`
+						${textSans15}
+						display: block;
+						padding: ${space[2]}px 0 ${space[1]}px;
+					`}
+				>
+					{position}&#47;{imagesLength}
+				</small>
+			) : null}
 			{emptyCaption ? null : <CaptionText html={captionHtml} />}
 			{hideCredit ? null : (
 				<small
@@ -71,7 +92,7 @@ export const GalleryCaption = ({
 				</small>
 			)}
 
-			{shouldIncludeShareButton && (
+			{!isHostedGallery && (
 				<div
 					css={css`
 						padding-top: ${space[2]}px;

dotcom-rendering/src/components/GalleryImage.tsx

@@ -5,7 +5,7 @@ import { grid } from '../grid';
 import { type ArticleFormat } from '../lib/articleFormat';
 import { getImage } from '../lib/image';
 import { palette } from '../palette';
-import { type ImageBlockElement } from '../types/content';
+import type { ImageBlockElement } from '../types/content';
 import { type RenderingTarget } from '../types/renderingTarget';
 import { AppsLightboxImage } from './AppsLightboxImage.island';
 import { GalleryCaption } from './GalleryCaption';
@@ -19,6 +19,7 @@ type Props = {
 	pageId: string;
 	webTitle: string;
 	renderingTarget: RenderingTarget;
+	imagesLength?: number;
 };
 
 const styles = css`
@@ -70,6 +71,7 @@ export const GalleryImage = ({
 	pageId,
 	webTitle,
 	renderingTarget,
+	imagesLength,
 }: Props) => {
 	const asset = getImage(image.media.allImages);
 
@@ -138,6 +140,7 @@ export const GalleryImage = ({
 				pageId={pageId}
 				webTitle={webTitle}
 				position={image.position}
+				imagesLength={imagesLength}
 			/>
 		</figure>
 	);

dotcom-rendering/src/layouts/HostedGalleryLayout.tsx

@@ -222,6 +222,8 @@ const GalleryBody = (props: {
 						webTitle={props.webTitle}
 						renderingTarget={props.renderingTarget}
 						key={element.elementId}
+						// Pass the total number of images to include in the image caption (e.g. 1/5, 2/5, etc.)
+						imagesLength={props.bodyElements.length}
 					/>
 				);
 			} else {