gallery main media in progress

Co-authored-by: Jamie B <[email protected]>

Author: marjisound

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

@@ -1,19 +1,20 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { gridContainerDecorator } from '../../.storybook/decorators/gridDecorators';
 import { images } from '../../fixtures/generated/images';
-import { grid } from '../grid';
 import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
 import { MainMediaGallery } from './MainMediaGallery';
 
 const meta = {
 	title: 'Components/MainMediaGallery',
 	component: MainMediaGallery,
+	decorators: gridContainerDecorator,
 } satisfies Meta<typeof MainMediaGallery>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const FirstStory = {
+export const Default = {
 	args: {
 		mainMedia: images[0],
 		format: {
@@ -22,12 +23,11 @@ export const FirstStory = {
 			theme: Pillar.News,
 		},
 	},
-	decorators: [
-		// To make it easier to see the top border above the date
-		(Story) => (
-			<div css={[grid.container]}>
-				<Story />
-			</div>
-		),
-	],
 } satisfies Story;
+
+export const PortraitImage = {
+	args: {
+		...Default.args,
+		mainMedia: images[7],
+	},
+};

dotcom-rendering/src/components/MainMediaGallery.tsx

@@ -4,6 +4,7 @@ import { grid } from '../grid';
 import { type ArticleFormat } from '../lib/articleFormat';
 import { getImage } from '../lib/image';
 import { type ImageBlockElement } from '../types/content';
+import { minHeaderHeightPx } from './Masthead/Titlepiece/constants';
 import { generateSources, Sources } from './Picture';
 
 type Props = {
@@ -13,10 +14,9 @@ type Props = {
 
 const styles = css`
 	${grid.column.all}
-	height: calc(80vh - 48px);
-	grid-row: 1/5;
+	height: calc(80vh - ${minHeaderHeightPx}px);
 	${from.desktop} {
-		height: calc(100vh - 48px);
+		height: calc(100vh - ${minHeaderHeightPx}px);
 	}
 `;
 
@@ -42,7 +42,7 @@ export const MainMediaGallery = ({ mainMedia, format }: Props) => {
 		{ breakpoint: breakpoints.desktop, width: 1140 },
 		{ breakpoint: breakpoints.leftCol, width: 1300 },
 		{ breakpoint: breakpoints.wide, width: 1900 },
-	] as const);
+	]);
 
 	const fallbackSource = sources[0];
 
@@ -53,8 +53,11 @@ export const MainMediaGallery = ({ mainMedia, format }: Props) => {
 				<img
 					alt={mainMedia.data.alt}
 					src={fallbackSource?.lowResUrl}
-					width={fallbackSource?.width}
-					height={(fallbackSource?.width ?? 1) * 1.0}
+					css={css`
+						object-fit: cover;
+						height: 100%;
+						width: 100%;
+					`}
 				/>
 			</picture>
 		</figure>