Handle author/artist avatars

Author: frederickobrien

dotcom-rendering/src/components/ArticleHeadline.tsx

@@ -874,10 +874,15 @@ export const ArticleHeadline = ({
 				case ArticleDesign.Picture:
 					return (
 						<div
-							css={decideBottomPadding({
-								format,
-								hasAvatar,
-							})}
+							css={[
+								decideBottomPadding({
+									format,
+									hasAvatar,
+								}),
+								css`
+									max-width: 620px;
+								`,
+							]}
 						>
 							<DesignTag format={format} />
 							<h1

dotcom-rendering/src/layouts/StandardLayout.tsx

@@ -20,6 +20,7 @@ import { ArticleMetaApps } from '../components/ArticleMeta.apps';
 import { ArticleMeta } from '../components/ArticleMeta.web';
 import { ArticleTitle } from '../components/ArticleTitle';
 import { Carousel } from '../components/Carousel.island';
+import { ContributorAvatar } from '../components/ContributorAvatar';
 import { CricketMatchHeaderWrapper } from '../components/CricketMatchHeaderWrapper.island';
 import { DecideLines } from '../components/DecideLines';
 import { DirectoryPageNavIsland } from '../components/DirectoryPageNavIsland';
@@ -52,6 +53,7 @@ import {
 	type ArticleFormat,
 	ArticleSpecial,
 } from '../lib/articleFormat';
+import { getSoleContributor } from '../lib/byline';
 import { canRenderAds } from '../lib/canRenderAds';
 import { getContributionsServiceUrl } from '../lib/contributions';
 import { decideStoryPackageTrails } from '../lib/decideTrail';
@@ -81,6 +83,54 @@ const stretchLines = css`
 	}
 `;
 
+const avatarHeadlineWrapper = css`
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+`;
+
+// This styling taken from the similar approach in CommentLayout.tsx
+// If in mobile increase the margin top and margin right deficit
+const avatarPositionStyles = css`
+	display: flex;
+	justify-content: flex-end;
+	position: relative;
+	margin-bottom: -29px;
+	pointer-events: none;
+	${from.desktop} {
+		margin-top: -50px;
+	}
+	${until.tablet} {
+		overflow: hidden;
+	}
+
+	/*  Why target img element?
+
+        Because only in this context, where we have overflow: hidden
+        and the margin-bottom and margin-top of avatarPositionStyles
+        do we also want to apply our margin-right. These styles
+        are tightly coupled in this context, and so it does not
+        make sense to move them to the avatar component.
+
+        It's imperfect from the perspective of DCR, the alternative is to bust
+        the combined elements into a separate component (with the
+        relevant stories) and couple them that way, which might be what
+        you want to do if you find yourself adding more styles
+        to this section. For now, this works without making me 🤢.
+    */
+
+	${from.mobile} {
+		img {
+			margin-right: -1.85rem;
+		}
+	}
+	${from.mobileLandscape} {
+		img {
+			margin-right: -1.25rem;
+		}
+	}
+`;
+
 interface GridItemProps {
 	area: Area;
 	layoutType: LayoutType;
@@ -182,6 +232,13 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 				? 'showcase'
 				: 'standard';
 
+	const avatarUrl = getSoleContributor(
+		article.tags,
+		article.byline,
+	)?.bylineLargeImageUrl;
+
+	const displayAvatarUrl = avatarUrl ? true : false;
+
 	return (
 		<>
 			{isWeb && (
@@ -276,7 +333,17 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 								`,
 						]}
 					>
-						<GridItem area="media" layoutType={layoutType}>
+						<GridItem
+							area="media"
+							layoutType={layoutType}
+							css={
+								displayAvatarUrl
+									? css`
+											margin-top: 8px;
+										`
+									: undefined
+							}
+						>
 							<MainMedia
 								format={format}
 								elements={article.mainMediaElements}
@@ -301,6 +368,11 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 							area="title"
 							layoutType={layoutType}
 							element="aside"
+							css={css`
+								display: flex;
+								flex-direction: column;
+								justify-content: space-between;
+							`}
 						>
 							<ArticleTitle
 								format={format}
@@ -310,19 +382,70 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 								guardianBaseURL={article.guardianBaseURL}
 								isMatch={!!footballMatchUrl}
 							/>
+							{displayAvatarUrl && (
+								<Hide until="leftCol">
+									<StraightLines
+										count={8}
+										cssOverrides={css`
+											display: block;
+										`}
+										color={themePalette('--straight-lines')}
+									/>
+								</Hide>
+							)}
 						</GridItem>
-						<GridItem area="headline" layoutType={layoutType}>
-							<ArticleHeadline
-								format={format}
-								headlineString={article.headline}
-								tags={article.tags}
-								byline={article.byline}
-								webPublicationDateDeprecated={
-									article.webPublicationDateDeprecated
-								}
-								starRating={article.starRating}
-							/>
-						</GridItem>
+						{displayAvatarUrl ? (
+							<GridItem area="headline" layoutType={layoutType}>
+								<div css={avatarHeadlineWrapper}>
+									<ArticleHeadline
+										format={format}
+										headlineString={article.headline}
+										tags={article.tags}
+										byline={article.byline}
+										webPublicationDateDeprecated={
+											article.webPublicationDateDeprecated
+										}
+										hasAvatar={displayAvatarUrl}
+										starRating={article.starRating}
+									/>
+
+									<div>
+										{!!avatarUrl && (
+											<div css={avatarPositionStyles}>
+												<ContributorAvatar
+													imageSrc={avatarUrl}
+													imageAlt={
+														article.byline ?? ''
+													}
+												/>
+											</div>
+										)}
+										<StraightLines
+											count={8}
+											cssOverrides={css`
+												display: block;
+											`}
+											color={themePalette(
+												'--straight-lines',
+											)}
+										/>
+									</div>
+								</div>
+							</GridItem>
+						) : (
+							<GridItem area="headline" layoutType={layoutType}>
+								<ArticleHeadline
+									format={format}
+									headlineString={article.headline}
+									tags={article.tags}
+									byline={article.byline}
+									webPublicationDateDeprecated={
+										article.webPublicationDateDeprecated
+									}
+									starRating={article.starRating}
+								/>
+							</GridItem>
+						)}
 						<GridItem area="standfirst" layoutType={layoutType}>
 							<Standfirst
 								format={format}
@@ -339,12 +462,12 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 								format.theme === ArticleSpecial.Labs &&
 								format.design !== ArticleDesign.Video ? (
 									<GuardianLabsLines />
-								) : (
+								) : !displayAvatarUrl ? (
 									<DecideLines
 										format={format}
 										color={themePalette('--article-border')}
 									/>
-								)}
+								) : null}
 							</div>
 							{isApps ? (
 								<>

dotcom-rendering/src/layouts/lib/articleArrangements.ts

@@ -158,6 +158,7 @@ const pictureCss: LayoutCssMap = {
 	headline: {
 		mobile: 'grid-row: 2;',
 		tablet: 'grid-row: 2;',
+		desktop: `grid-row: 2; ${grid.between('centre-column-start', 'right-column-end')};`,
 		leftCol: 'grid-row: 1;',
 	},
 	standfirst: {