diff --git a/dotcom-rendering/src/components/ArticleMeta.web.tsx b/dotcom-rendering/src/components/ArticleMeta.web.tsx
index d1ae3cb9daa..8422f14e20d 100644
--- a/dotcom-rendering/src/components/ArticleMeta.web.tsx
+++ b/dotcom-rendering/src/components/ArticleMeta.web.tsx
@@ -1,5 +1,6 @@
import { css } from '@emotion/react';
import { between, from, space, until } from '@guardian/source/foundations';
+import { Hide } from '@guardian/source/react-components';
import { StraightLines } from '@guardian/source-development-kitchen/react-components';
import type { FEArticle } from '../frontend/feArticle';
import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStyling';
@@ -17,6 +18,7 @@ import type { FEElement } from '../types/content';
import type { Podcast, TagType } from '../types/tag';
import { Avatar } from './Avatar';
import { Branding } from './Branding.importable';
+import { Caption } from './Caption';
import { CommentCount } from './CommentCount.importable';
import { useConfig } from './ConfigContext';
import { Contributor } from './Contributor';
@@ -41,6 +43,7 @@ type Props = {
isCommentable: boolean;
mainMediaElements?: FEElement[];
crossword?: FEArticle['crossword'];
+ captionText?: string;
};
const meta = (format: ArticleFormat) => {
@@ -324,6 +327,7 @@ export const ArticleMeta = ({
isCommentable,
mainMediaElements,
crossword,
+ captionText,
}: Props) => {
const soleContributor = getSoleContributor(tags, byline);
const authorName = soleContributor?.title ?? 'Author Image';
@@ -404,6 +408,21 @@ export const ArticleMeta = ({
/>
)}
+ {format.design === ArticleDesign.Gallery ? (
+
+
+
+
+ ) : null}
+
{crossword?.creator && (
{
}
return css`
${headlineMedium20}
+
+ ${from.leftCol} {
+ ${headlineMedium24}
+ }
`;
case ArticleDesign.Obituary:
case ArticleDesign.Comment:
diff --git a/dotcom-rendering/src/layouts/GalleryLayout.tsx b/dotcom-rendering/src/layouts/GalleryLayout.tsx
index be0a99cc899..3fdb0271e87 100644
--- a/dotcom-rendering/src/layouts/GalleryLayout.tsx
+++ b/dotcom-rendering/src/layouts/GalleryLayout.tsx
@@ -4,8 +4,10 @@ import {
from,
palette as sourcePalette,
space,
+ until,
} from '@guardian/source/foundations';
import { Hide } from '@guardian/source/react-components';
+import { StraightLines } from '@guardian/source-development-kitchen/react-components';
import { Fragment } from 'react';
import { AdPlaceholder } from '../components/AdPlaceholder.apps';
import { AdPortals } from '../components/AdPortals.importable';
@@ -67,15 +69,40 @@ const headerStyles = css`
}
`;
-const metaAndDisclaimerContainer = css`
+const captionContainer = css`
+ ${grid.column.left}
+
+ ${until.leftCol} {
+ ${grid.column.centre};
+ }
+ grid-row: 8;
+`;
+
+const standfirstStyles = css`
${grid.column.centre}
+
+ ${from.leftCol} {
+ width: 75%;
+ grid-row: 10;
+ }
+`;
+
+const metaAndDisclaimerContainer = css`
+ ${grid.column.centre};
+
+ ${from.leftCol} {
+ ${grid.column.left}
+ grid-row: 10;
+ padding-top: 10px;
+ }
+
padding-bottom: ${space[6]}px;
${from.tablet} {
position: relative;
&::before {
content: '';
position: absolute;
- left: -10px;
+ left: -20px;
top: 0;
bottom: 0;
width: 1px;
@@ -266,16 +293,33 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
frontendData.webPublicationDateDeprecated
}
/>
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{isWeb ? (
{
isCommentable={frontendData.isCommentable}
discussionApiUrl={discussionApiUrl}
shortUrlId={shortUrlId}
+ captionText={captionText}
/>
) : null}
{isApps ? (
diff --git a/dotcom-rendering/src/paletteDeclarations.ts b/dotcom-rendering/src/paletteDeclarations.ts
index 90f6592a502..34a3e57a074 100644
--- a/dotcom-rendering/src/paletteDeclarations.ts
+++ b/dotcom-rendering/src/paletteDeclarations.ts
@@ -3443,7 +3443,7 @@ const articleBorderDark: PaletteFunction = () => sourcePalette.neutral[20];
const straightLinesLight: PaletteFunction = (format) => {
if (format.design === ArticleDesign.Gallery) {
- return sourcePalette.neutral[20];
+ return sourcePalette.neutral[38];
}
if (format.theme === ArticleSpecial.SpecialReportAlt) {
return transparentColour(sourcePalette.neutral[60], 0.3);