add lightbox to gallery main media

Author: marjisound

dotcom-rendering/src/components/MainMediaGallery.stories.tsx

@@ -22,6 +22,7 @@ export const Default = {
 			display: ArticleDisplay.Standard,
 			theme: Pillar.News,
 		},
+		renderingTarget: 'Web',
 	},
 } satisfies Story;
 

dotcom-rendering/src/components/MainMediaGallery.tsx

@@ -1,14 +1,20 @@
 import { css } from '@emotion/react';
+import { isUndefined } from '@guardian/libs';
 import { from } from '@guardian/source/foundations';
 import { grid } from '../grid';
 import { type ArticleFormat } from '../lib/articleFormat';
 import { getImage } from '../lib/image';
 import { type ImageBlockElement } from '../types/content';
+import { type RenderingTarget } from '../types/renderingTarget';
+import { AppsLightboxImage } from './AppsLightboxImage.importable';
+import { Island } from './Island';
+import { LightboxLink } from './LightboxLink';
 import { Picture } from './Picture';
 
 type Props = {
 	mainMedia: ImageBlockElement;
 	format: ArticleFormat;
+	renderingTarget: RenderingTarget;
 };
 
 const styles = css`
@@ -20,7 +26,11 @@ const styles = css`
 	}
 `;
 
-export const MainMediaGallery = ({ mainMedia, format }: Props) => {
+export const MainMediaGallery = ({
+	mainMedia,
+	format,
+	renderingTarget,
+}: Props) => {
 	const asset = getImage(mainMedia.media.allImages);
 
 	if (asset === undefined) {
@@ -36,16 +46,40 @@ export const MainMediaGallery = ({ mainMedia, format }: Props) => {
 
 	return (
 		<figure css={styles}>
-			<Picture
-				alt={mainMedia.data.alt ?? ''}
-				format={format}
-				role={mainMedia.role}
-				master={asset.url}
-				width={width}
-				height={height}
-				loading="eager"
-				isMainMedia={true}
-			/>
+			{renderingTarget === 'Apps' ? (
+				<Island priority="critical">
+					<AppsLightboxImage
+						elementId={mainMedia.elementId}
+						role={mainMedia.role}
+						format={format}
+						master={asset.url}
+						alt={mainMedia.data.alt ?? ''}
+						width={width}
+						height={height}
+						loading={'lazy'}
+					/>
+				</Island>
+			) : (
+				<Picture
+					alt={mainMedia.data.alt ?? ''}
+					format={format}
+					role={mainMedia.role}
+					master={asset.url}
+					width={width}
+					height={height}
+					loading="eager"
+					isMainMedia={true}
+				/>
+			)}
+			{renderingTarget === 'Web' && !isUndefined(mainMedia.position) && (
+				<LightboxLink
+					role={mainMedia.role}
+					format={format}
+					elementId={mainMedia.elementId}
+					isMainMedia={false}
+					position={mainMedia.position}
+				/>
+			)}
 		</figure>
 	);
 };

dotcom-rendering/src/layouts/GalleryLayout.tsx

@@ -210,6 +210,7 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 					<MainMediaGallery
 						mainMedia={gallery.mainMedia}
 						format={format}
+						renderingTarget={props.renderingTarget}
 					/>
 					<ArticleTitle
 						format={format}