From 19913d3021ec023caf5fc0dd3444c58c7bcd230b Mon Sep 17 00:00:00 2001 From: Georges Lebreton <102960844+Georges-GNM@users.noreply.github.com> Date: Tue, 17 Dec 2024 14:13:50 +0000 Subject: [PATCH] [Fairground] Display image as 4:5 in relevant collections (#1743) * wip commit * update image input container * 4:5 thumbnail * eslint * remove unused import --- .../components/card/article/ArticleBody.tsx | 18 ++++++++---------- .../image/ImageInputImageContainer.tsx | 10 +++++----- .../src/components/image/Thumbnail.tsx | 15 ++++++++------- .../src/components/inputs/InputImage.tsx | 13 ++++++++++++- fronts-client/src/constants/theme.ts | 6 ++++++ 5 files changed, 39 insertions(+), 23 deletions(-) diff --git a/fronts-client/src/components/card/article/ArticleBody.tsx b/fronts-client/src/components/card/article/ArticleBody.tsx index 6f56f88c2c..1978763f19 100644 --- 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 index a8c60f79a8..4c7ad67bed 100644 --- 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 index eb72fc8481..5574cacfb5 100644 --- 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 index f66011c274..c8183e5f54 100644 --- 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 { 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 { > @@ -393,6 +403,7 @@ class InputImage extends React.Component { 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 index 2f4673df38..85bd050ee0 100644 --- 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;