From 4b049191365503fbb1be36b6e8cf586e70ab8a40 Mon Sep 17 00:00:00 2001 From: Georges Lebreton <102960844+Georges-GNM@users.noreply.github.com> Date: Fri, 6 Dec 2024 09:50:38 +0000 Subject: [PATCH] Indicate highlights container should use square crop (#1738) * Indicate highlights container should use square crop * run prettier * Pass showSquare prop from InputImage to ImageComponent * use correct casing in cropType so grid prompts to only use square images * Tweak square input image styling * Apply suggestions from review Remove custom ratio as unneeded and specify square is 1:1 in comment Co-authored-by: Charlotte Emms <43961396+cemms1@users.noreply.github.com> * Set square thumbnail to 80x80px --------- Co-authored-by: Charlotte Emms <43961396+cemms1@users.noreply.github.com> --- fronts-client/src/components/card/Card.tsx | 6 ++++++ .../src/components/card/article/ArticleBody.tsx | 10 +++++++++- .../src/components/form/ArticleMetaForm.tsx | 5 +++++ .../src/components/inputs/InputImage.tsx | 17 ++++++++++++++++- fronts-client/src/constants/image.ts | 4 ++++ fronts-client/src/constants/theme.ts | 4 ++-- 6 files changed, 42 insertions(+), 4 deletions(-) diff --git a/fronts-client/src/components/card/Card.tsx b/fronts-client/src/components/card/Card.tsx index d4fad56710..681bc5e78f 100644 --- a/fronts-client/src/components/card/Card.tsx +++ b/fronts-client/src/components/card/Card.tsx @@ -33,6 +33,8 @@ import { defaultCardTrailImageCriteria, landscape5To4CardImageCriteria, COLLECTIONS_USING_LANDSCAPE_5_TO_4_TRAILS, + squareImageCriteria, + COLLECTIONS_USING_SQUARE_TRAILS, } from 'constants/image'; import Sublinks from '../FrontsEdit/CollectionComponents/Sublinks'; import { @@ -460,6 +462,10 @@ class Card extends React.Component { return landscape5To4CardImageCriteria; } + if (COLLECTIONS_USING_SQUARE_TRAILS.includes(collectionType)) { + return squareImageCriteria; + } + if (!SUPPORT_PORTRAIT_CROPS) { return landScapeCardImageCriteria; } diff --git a/fronts-client/src/components/card/article/ArticleBody.tsx b/fronts-client/src/components/card/article/ArticleBody.tsx index 8f395c8db7..6f56f88c2c 100644 --- a/fronts-client/src/components/card/article/ArticleBody.tsx +++ b/fronts-client/src/components/card/article/ArticleBody.tsx @@ -36,7 +36,10 @@ import ImageAndGraphWrapper from 'components/image/ImageAndGraphWrapper'; import { getPaths } from 'util/paths'; import { getMaybeDimensionsFromWidthAndHeight } from 'util/validateImageSrc'; import { Criteria } from 'types/Grid'; -import { landscape5To4CardImageCriteria } from 'constants/image'; +import { + landscape5To4CardImageCriteria, + squareImageCriteria, +} from 'constants/image'; const ThumbnailPlaceholder = styled(BasePlaceholder)` flex-shrink: 0; @@ -208,6 +211,10 @@ const articleBodyDefault = React.memo( landscape5To4CardImageCriteria.widthAspectRatio && imageCriteria.heightAspectRatio === landscape5To4CardImageCriteria.heightAspectRatio; + const showSquareThumbnail = + imageCriteria && + imageCriteria.widthAspectRatio === squareImageCriteria.widthAspectRatio && + imageCriteria.heightAspectRatio === squareImageCriteria.heightAspectRatio; return ( <> @@ -326,6 +333,7 @@ const articleBodyDefault = React.memo( isDraggingImageOver={isDraggingImageOver} isPortrait={thumbnailIsPortrait} showLandscape54={showThumbnailInLandscape54} + showSquareThumbnail={showSquareThumbnail} > {cutoutThumbnail ? ( diff --git a/fronts-client/src/components/form/ArticleMetaForm.tsx b/fronts-client/src/components/form/ArticleMetaForm.tsx index 39185baa1a..a1769fe378 100644 --- a/fronts-client/src/components/form/ArticleMetaForm.tsx +++ b/fronts-client/src/components/form/ArticleMetaForm.tsx @@ -50,6 +50,8 @@ import { SUPPORT_PORTRAIT_CROPS, COLLECTIONS_USING_LANDSCAPE_5_TO_4_TRAILS, landscape5To4CardImageCriteria, + COLLECTIONS_USING_SQUARE_TRAILS, + squareImageCriteria, } from 'constants/image'; import { selectors as collectionSelectors } from 'bundles/collectionsBundle'; import { getContributorImage } from 'util/CAPIUtils'; @@ -1009,6 +1011,9 @@ class FormComponent extends React.Component { if (COLLECTIONS_USING_LANDSCAPE_5_TO_4_TRAILS.includes(collectionType)) { return landscape5To4CardImageCriteria; } + if (COLLECTIONS_USING_SQUARE_TRAILS.includes(collectionType)) { + return squareImageCriteria; + } if (!SUPPORT_PORTRAIT_CROPS) { return landScapeCardImageCriteria; } diff --git a/fronts-client/src/components/inputs/InputImage.tsx b/fronts-client/src/components/inputs/InputImage.tsx index 530585f7e8..f66011c274 100644 --- a/fronts-client/src/components/inputs/InputImage.tsx +++ b/fronts-client/src/components/inputs/InputImage.tsx @@ -62,6 +62,7 @@ const ImageComponent = styled.div<{ small: boolean; portrait: boolean; shouldShowLandscape54: boolean; + showSquare: boolean; }>` ${({ small }) => small @@ -86,6 +87,15 @@ const ImageComponent = styled.div<{ background-size: cover; background-repeat: no-repeat; background-position: center;`} + ${({ showSquare }) => + showSquare && + `aspect-ratio: 1/1; + background-size: cover; + background-repeat: no-repeat; + background-position: center; + width: 95%; + height: 95%; + align-self: center;`} flex-grow: 1; cursor: grab; `; @@ -382,6 +392,7 @@ class InputImage extends React.Component { small={small} portrait={portraitImage} shouldShowLandscape54={shouldShowLandscape54} + showSquare={showSquare} > {hasImage ? ( <> @@ -622,7 +633,7 @@ class InputImage extends React.Component { } // assumes the only criteria that will be passed as props the defined - // constants for portrait(4:5), landscape (5:3) and landscape (5:4) + // constants for portrait(4:5), landscape (5:3), landscape (5:4) or square (1:1) if (this.compareAspectRatio(portraitCardImageCriteria, criteria)) { return { cropType: 'portrait', @@ -634,6 +645,10 @@ class InputImage extends React.Component { cropType: 'Landscape', customRatio: 'Landscape,5,4', }; + } else if (this.compareAspectRatio(squareImageCriteria, criteria)) { + return { + cropType: 'square', + }; } else { return { cropType: 'landscape', diff --git a/fronts-client/src/constants/image.ts b/fronts-client/src/constants/image.ts index fbc15bf43c..9f5a9f45c5 100644 --- a/fronts-client/src/constants/image.ts +++ b/fronts-client/src/constants/image.ts @@ -46,6 +46,10 @@ export const COLLECTIONS_USING_LANDSCAPE_5_TO_4_TRAILS: string[] = [ 'static/medium/4', ]; +export const COLLECTIONS_USING_SQUARE_TRAILS: string[] = [ + 'scrollable/highlights', +]; + export const defaultCardTrailImageCriteria = landScapeCardImageCriteria; export const editionsCardImageCriteria = { diff --git a/fronts-client/src/constants/theme.ts b/fronts-client/src/constants/theme.ts index 21efd48cee..2f4673df38 100644 --- a/fronts-client/src/constants/theme.ts +++ b/fronts-client/src/constants/theme.ts @@ -155,8 +155,8 @@ const thumbnailImage = { }; const thumbnailImageSquare = { - width: '50px', - height: '50px', + width: '80px', + height: '80px', }; export const theme = {