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 <[email protected]> * Set square thumbnail to 80x80px --------- Co-authored-by: Charlotte Emms <[email protected]>
guardian · Dec 6, 2024 · 4b04919 · 4b04919
1 parent 34d1cee
commit 4b04919
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 4 deletions.
diff --git 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<CardContainerProps> {
 			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
@@ -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 ? (
 										<ThumbnailCutout src={cutoutThumbnail} />

diff --git 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<Props, FormComponentState> {
 		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
@@ -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<ComponentProps, ComponentState> {
 							small={small}
 							portrait={portraitImage}
 							shouldShowLandscape54={shouldShowLandscape54}
+							showSquare={showSquare}
 						>
 							{hasImage ? (
 								<>
@@ -622,7 +633,7 @@ class InputImage extends React.Component<ComponentProps, ComponentState> {
 		}
 
 		// 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<ComponentProps, ComponentState> {
 				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
@@ -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
@@ -155,8 +155,8 @@ const thumbnailImage = {
 };
 
 const thumbnailImageSquare = {
-	width: '50px',
-	height: '50px',
+	width: '80px',
+	height: '80px',
 };
 
 export const theme = {