diff --git a/dotcom-rendering/src/components/GalleryCaption.tsx b/dotcom-rendering/src/components/GalleryCaption.tsx index b932f99459a..798d3693018 100644 --- a/dotcom-rendering/src/components/GalleryCaption.tsx +++ b/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,12 +54,12 @@ 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; @@ -59,6 +67,19 @@ export const GalleryCaption = ({ return (
+ {isHostedGallery && + typeof position === 'number' && + !!imagesLength ? ( + + {position}/{imagesLength} + + ) : null} {emptyCaption ? null : } {hideCredit ? null : ( )} - {shouldIncludeShareButton && ( + {!isHostedGallery && (
{ const asset = getImage(image.media.allImages); @@ -138,6 +140,7 @@ export const GalleryImage = ({ pageId={pageId} webTitle={webTitle} position={image.position} + imagesLength={imagesLength} /> ); diff --git a/dotcom-rendering/src/layouts/HostedGalleryLayout.tsx b/dotcom-rendering/src/layouts/HostedGalleryLayout.tsx index 0670496af5b..84c578117ab 100644 --- a/dotcom-rendering/src/layouts/HostedGalleryLayout.tsx +++ b/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 {