4:5 thumbnail

guardian · Dec 11, 2024 · 84a34fa · 84a34fa
1 parent 64cf504
commit 84a34fa
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 16 deletions.
diff --git a/fronts-client/src/components/card/article/ArticleBody.tsx b/fronts-client/src/components/card/article/ArticleBody.tsx
@@ -38,6 +38,7 @@ import { getMaybeDimensionsFromWidthAndHeight } from 'util/validateImageSrc';
 import { Criteria } from 'types/Grid';
 import {
 	landscape5To4CardImageCriteria,
+	portraitCardImageCriteria,
 	squareImageCriteria,
 } from 'constants/image';
 
@@ -197,14 +198,6 @@ const articleBodyDefault = React.memo(
 		const now = Date.now();
 		const paths = urlPath ? getPaths(urlPath) : undefined;
 
-		const thumbnailDims = getMaybeDimensionsFromWidthAndHeight(
-			imageSrcWidth,
-			imageSrcHeight,
-		);
-		const thumbnailIsPortrait =
-			!!imageReplace &&
-			thumbnailDims &&
-			thumbnailDims.height > thumbnailDims.width;
 		const showThumbnailInLandscape54 =
 			imageCriteria &&
 			imageCriteria.widthAspectRatio ===
@@ -215,6 +208,13 @@ const articleBodyDefault = React.memo(
 			imageCriteria &&
 			imageCriteria.widthAspectRatio === squareImageCriteria.widthAspectRatio &&
 			imageCriteria.heightAspectRatio === squareImageCriteria.heightAspectRatio;
+		const showPortraitThumbnail =
+			imageCriteria &&
+				imageCriteria.widthAspectRatio ===
+					portraitCardImageCriteria.widthAspectRatio &&
+				imageCriteria.heightAspectRatio ===
+				portraitCardImageCriteria.heightAspectRatio
+
 
 		return (
 			<>
@@ -331,7 +331,7 @@ const articleBodyDefault = React.memo(
 									imageHide={imageHide}
 									url={thumbnail}
 									isDraggingImageOver={isDraggingImageOver}
-									isPortrait={thumbnailIsPortrait}
+									showPortrait={showPortraitThumbnail}
 									showLandscape54={showThumbnailInLandscape54}
 									showSquareThumbnail={showSquareThumbnail}
 								>

diff --git a/fronts-client/src/components/image/Thumbnail.tsx b/fronts-client/src/components/image/Thumbnail.tsx
@@ -9,7 +9,7 @@ const ThumbnailSmall = styled(ThumbnailBase)<{
 	url?: string | void;
 	isDraggingImageOver?: boolean;
 	imageHide?: boolean;
-	isPortrait?: boolean;
+	showPortrait?: boolean;
 	showLandscape54?: boolean;
 	showSquareThumbnail?: boolean;
 }>`
@@ -22,12 +22,13 @@ const ThumbnailSmall = styled(ThumbnailBase)<{
 	opacity: ${({ imageHide }) => (imageHide && imageHide ? '0.5' : '1')};
 	background-image: ${({ url }) => `url('${url}')`};
 
-	${({ isPortrait }) =>
-		isPortrait &&
-		`
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position-x: center;
+	${({ showPortrait }) =>
+		showPortrait &&
+		`aspect-ratio: 4/5;
+		background-position-x: center;
+		width: ${theme.thumbnailImagePortrait.width};
+		min-width: ${theme.thumbnailImagePortrait.width};
+		height: ${theme.thumbnailImagePortrait.height}
   `}
 	${({ showLandscape54 }) =>
 		showLandscape54

diff --git a/fronts-client/src/constants/theme.ts b/fronts-client/src/constants/theme.ts
@@ -159,6 +159,11 @@ const thumbnailImageSquare = {
 	height: '80px',
 };
 
+const thumbnailImagePortrait = {
+	width: '68px',
+	height: '85px',
+};
+
 export const theme = {
 	base,
 	front,
@@ -173,6 +178,7 @@ export const theme = {
 	collection,
 	thumbnailImage,
 	thumbnailImageSquare,
+	thumbnailImagePortrait
 };
 
 export type Theme = typeof theme;