[Fairground] Display image as 4:5 in relevant collections (#1743)

* wip commit * update image input container * 4:5 thumbnail * eslint * remove unused import
guardian · Dec 17, 2024 · 19913d3 · 19913d3
1 parent a1b08de
commit 19913d3
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 23 deletions.
diff --git a/fronts-client/src/components/card/article/ArticleBody.tsx b/fronts-client/src/components/card/article/ArticleBody.tsx
@@ -34,10 +34,10 @@ import EditModeVisibility from 'components/util/EditModeVisibility';
 import PageViewDataWrapper from '../../PageViewDataWrapper';
 import ImageAndGraphWrapper from 'components/image/ImageAndGraphWrapper';
 import { getPaths } from 'util/paths';
-import { getMaybeDimensionsFromWidthAndHeight } from 'util/validateImageSrc';
 import { Criteria } from 'types/Grid';
 import {
 	landscape5To4CardImageCriteria,
+	portraitCardImageCriteria,
 	squareImageCriteria,
 } from 'constants/image';
 
@@ -197,14 +197,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 +207,12 @@ 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 +329,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/ImageInputImageContainer.tsx b/fronts-client/src/components/image/ImageInputImageContainer.tsx
@@ -16,7 +16,7 @@ const smallPortaitStyle = `
 const normalPortraitStyle = `
   width: ${NORMAL_PORTRAIT_WIDTH}px;
   height: ${Math.floor(
-		NORMAL_PORTRAIT_WIDTH * PORTRAIT_RATIO + TEXTINPUT_HEIGHT,
+		NORMAL_PORTRAIT_WIDTH * PORTRAIT_RATIO + TEXTINPUT_HEIGHT + 10,
 	)}px;
   `;
 
@@ -52,20 +52,20 @@ const squareStyle = `
   `;
 
 const getVariableImageContainerStyle = ({
-	portrait = false,
+	shouldShowPortrait = false,
 	small = false,
 	shouldShowLandscape54: shouldShowLandscape54 = false,
 	showSquare = false,
 }: {
 	small?: boolean;
-	portrait?: boolean;
+	shouldShowPortrait?: boolean;
 	shouldShowLandscape54?: boolean;
 	showSquare?: boolean;
 }) => {
 	switch (true) {
 		case showSquare:
 			return squareStyle;
-		case portrait:
+		case shouldShowPortrait:
 			return small ? smallPortaitStyle : normalPortraitStyle;
 		case shouldShowLandscape54:
 			return small ? smallLandscape54Style : normalLandscape54Style;
@@ -79,7 +79,7 @@ const getVariableImageContainerStyle = ({
 // the image container
 export const ImageInputImageContainer = styled.div<{
 	small?: boolean;
-	portrait?: boolean;
+	shouldShowPortrait?: boolean;
 	shouldShowLandscape54?: boolean;
 	showSquare?: boolean;
 }>`

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/components/inputs/InputImage.tsx b/fronts-client/src/components/inputs/InputImage.tsx
@@ -63,6 +63,7 @@ const ImageComponent = styled.div<{
 	portrait: boolean;
 	shouldShowLandscape54: boolean;
 	showSquare: boolean;
+	shouldShowPortrait: boolean;
 }>`
 	${({ small }) =>
 		small
@@ -96,6 +97,12 @@ const ImageComponent = styled.div<{
 	width: 95%;
 	height: 95%;
 	align-self: center;`}
+	${({ shouldShowPortrait }) =>
+		shouldShowPortrait &&
+		`aspect-ratio: 4/5;
+	background-size: cover;
+	background-repeat: no-repeat;
+	background-position: center;`}
   flex-grow: 1;
 	cursor: grab;
 `;
@@ -349,6 +356,9 @@ class InputImage extends React.Component<ComponentProps, ComponentState> {
 			imageDims &&
 			imageDims.height > imageDims.width
 		);
+		const shouldShowPortrait =
+			criteria != null &&
+			this.compareAspectRatio(portraitCardImageCriteria, criteria);
 		const shouldShowLandscape54 =
 			criteria != null &&
 			this.compareAspectRatio(landscape5To4CardImageCriteria, criteria);
@@ -378,7 +388,7 @@ class InputImage extends React.Component<ComponentProps, ComponentState> {
 				>
 					<ImageContainer
 						small={small}
-						portrait={portraitImage}
+						shouldShowPortrait={shouldShowPortrait}
 						shouldShowLandscape54={shouldShowLandscape54}
 						showSquare={showSquare}
 					>
@@ -393,6 +403,7 @@ class InputImage extends React.Component<ComponentProps, ComponentState> {
 							portrait={portraitImage}
 							shouldShowLandscape54={shouldShowLandscape54}
 							showSquare={showSquare}
+							shouldShowPortrait={shouldShowPortrait}
 						>
 							{hasImage ? (
 								<>

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;