THEMES-891: Non-manual images focal point support (#1966)

* THEMES-891: implemented focal point into numbered list block * THEMES-891: updated card list and extra large promo. * THEMES-891: added support for focal point to remaining blocks. * THEMES-891: fixed filter for results list, added focal point to search results list block. * THEMES-891: fixed filter for medium promo. * THEMES-891: added focal point to product featured image.
WPMedia · Mar 20, 2024 · fd14ee5 · fd14ee5
1 parent b2d8b7d
commit fd14ee5
Show file tree

Hide file tree

Showing 21 changed files with 260 additions and 173 deletions.
diff --git a/blocks/card-list-block/features/card-list/default.jsx b/blocks/card-list-block/features/card-list/default.jsx
@@ -10,6 +10,7 @@ import {
 	Date,
 	formatAuthors,
 	formatURL,
+	getFocalFromANS,
 	getImageFromANS,
 	Heading,
 	HeadingSection,
@@ -84,21 +85,29 @@ const CardListItems = (props) => {
 		  promo_items {
 			 basic {
 				_id
-				type
-				url
 				auth {
 					${RESIZER_TOKEN_VERSION}
 				}
+				focal_point {
+					x
+					y
+				}
+				type
+				url
 			 }
 			 lead_art {
 				promo_items {
 				  basic {
 					_id
-					type
-					url
 					auth {
 						${RESIZER_TOKEN_VERSION}
 					}
+					focal_point {
+						x
+						y
+					}
+					type
+					url
 				  }
 				}
 				type
@@ -170,7 +179,7 @@ const CardListItems = (props) => {
 				ansImage,
 				aspectRatio: "4:3",
 				resizedOptions: {
-					smart: true,
+					...getFocalFromANS(ansImage),
 				},
 				responsiveImages: [377, 754, 1508],
 				width: 377,
@@ -230,7 +239,7 @@ const CardListItems = (props) => {
 										ansImage: itemAnsImage,
 										aspectRatio: "3:2",
 										resizedOptions: {
-											smart: true,
+											...getFocalFromANS(itemAnsImage),
 										},
 										responsiveImages: [105, 210, 420],
 										width: 105,

diff --git a/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx b/blocks/extra-large-promo-block/features/extra-large-promo/default.jsx
@@ -11,6 +11,7 @@ import {
 	Conditional,
 	Date as DateComponent,
 	formatAuthors,
+	getFocalFromANS,
 	getImageFromANS,
 	getVideoFromANS,
 	Heading,
@@ -211,21 +212,29 @@ const ExtraLargePromo = ({ customFields }) => {
 						promo_items {
 							basic {
 								_id
-								type
-								url
 								auth {
 									${RESIZER_TOKEN_VERSION}
 								}
+								focal_point {
+									x
+									y
+								}
+								type
+								url
 							}
 						}
 					}
 					basic {
 						_id
-						type
-						url
 						auth {
 							${RESIZER_TOKEN_VERSION}
 						}
+						focal_point {
+							x
+							y
+						}
+						type
+						url
 					}
 				}
 				website_url
@@ -296,21 +305,22 @@ const ExtraLargePromo = ({ customFields }) => {
 		showByline && content?.credits?.by?.length > 0
 			? formatAuthors(content.credits.by, phrases.t("global.and-text"))
 			: null;
+	const ansImage = getImageFromANS(content);
 	const imageParams =
 		showImage &&
-		(imageOverrideURL || (content && getImageFromANS(content))
+		(imageOverrideURL || ansImage
 			? {
 					ansImage: imageOverrideURL
 						? {
-								_id: resizedImage ? imageOverrideId : "",
-								url: imageOverrideURL,
-								auth: resizedAuth || {},
-						  }
-						: getImageFromANS(content),
+							_id: resizedImage ? imageOverrideId : "",
+							url: imageOverrideURL,
+							auth: resizedAuth || {},
+						}
+						: ansImage,
 					alt: content?.headlines?.basic || "",
 					aspectRatio: imageRatio,
 					resizedOptions: {
-						smart: true,
+						...getFocalFromANS(ansImage),
 					},
 					responsiveImages: [400, 600, 800, 1200],
 					width: 800,

diff --git a/blocks/large-promo-block/features/large-promo/default.jsx b/blocks/large-promo-block/features/large-promo/default.jsx
@@ -18,6 +18,7 @@ import {
 	MediaItem,
 	Stack,
 	formatURL,
+	getFocalFromANS,
 	getImageFromANS,
 	getVideoFromANS,
 	isServerSide,
@@ -221,21 +222,29 @@ const LargePromoItem = ({ customFields, arcSite }) => {
 						promo_items {
 							basic {
 								_id
-								type
-								url
 								auth {
 									${RESIZER_TOKEN_VERSION}
 								}
+								focal_point {
+									x
+									y
+								}
+								type
+								url
 							}
 						}
 					}
 					basic {
 						_id
-						type
-						url
 						auth {
 							${RESIZER_TOKEN_VERSION}
 						}
+						focal_point {
+							x
+							y
+						}
+						type
+						url
 					}
 				}
 				embed_html
@@ -337,21 +346,22 @@ const LargePromoItem = ({ customFields, arcSite }) => {
 	const contentOverline = showOverline ? overlineText : null;
 	const contentUrl = content?.websites?.[arcSite]?.website_url;
 	const embedMarkup = playVideoInPlace && getVideoFromANS(content);
-	const promoImageParams =
+	const ansImage = getImageFromANS(content);
+	const promoImageParams = 
 		showImage &&
-		(imageOverrideURL || (content && getImageFromANS(content))
+		(imageOverrideURL || ansImage
 			? {
 					ansImage: imageOverrideURL
 						? {
 								_id: resizedImage ? imageOverrideId : "",
 								url: imageOverrideURL,
 								auth: resizedAuth || {},
 						  }
-						: getImageFromANS(content),
+						: ansImage,
 					alt: content?.headlines?.basic || "",
 					aspectRatio: imageRatio,
 					resizedOptions: {
-						smart: true,
+						...getFocalFromANS(ansImage),
 					},
 					responsiveImages: [400, 600, 800, 1200],
 					width: 377,

diff --git a/blocks/lead-art-block/features/leadart/default.jsx b/blocks/lead-art-block/features/leadart/default.jsx
@@ -9,6 +9,7 @@ import {
 	Carousel,
 	formatCredits,
 	formatPowaVideoEmbed,
+	getFocalFromANS,
 	Icon,
 	Image,
 	MediaItem,
@@ -140,12 +141,12 @@ export const LeadArtPresentation = (props) => {
 					<div className={`${BLOCK_CLASS_NAME}__image-wrapper`} ref={imgRef}>
 						<Image
 							alt={leadArt.alt_text}
+							ansImage={leadArt}
 							aspectRatio={imageRatio || "16:9"}
 							loading={imageLoadingStrategy}
-							width={800}
 							responsiveImages={[800, 1600]}
-							resizedOptions={{ smart: true }}
-							ansImage={leadArt}
+							resizedOptions={{ ...getFocalFromANS(leadArt) }}
+							width={800}
 						/>
 						{isOpen ? (
 							<Button

diff --git a/blocks/medium-promo-block/features/medium-promo/default.jsx b/blocks/medium-promo-block/features/medium-promo/default.jsx
@@ -11,6 +11,7 @@ import {
 	Date as DateComponent,
 	formatAuthors,
 	formatURL,
+	getFocalFromANS,
 	getImageFromANS,
 	getPromoType,
 	Heading,
@@ -106,6 +107,10 @@ const MediumPromo = ({ customFields }) => {
 							auth {
 								${RESIZER_TOKEN_VERSION}
 							}
+							focal_point {
+								x
+								y
+							}
 							type
 							url
 						}
@@ -116,6 +121,10 @@ const MediumPromo = ({ customFields }) => {
 					auth {
 						${RESIZER_TOKEN_VERSION}
 					}
+					focal_point {
+						x
+						y
+					}
 					type
 					url
 				}
@@ -170,21 +179,21 @@ const MediumPromo = ({ customFields }) => {
 		gallery: phrases.t("global.gallery-text"),
 		video: phrases.t("global.video-text"),
 	}[promoType];
-
+	const ansImage = getImageFromANS(content);
 	const imageParams =
-		imageOverrideURL || (content && getImageFromANS(content))
+		imageOverrideURL || ansImage
 			? {
 					ansImage: imageOverrideURL
 						? {
 								_id: resizedImage ? imageOverrideId : "",
 								url: imageOverrideURL,
 								auth: resizedAuth || {},
 						  }
-						: getImageFromANS(content),
+						: ansImage,
 					alt: content?.headlines?.basic || "",
 					aspectRatio: imageRatio,
 					resizedOptions: {
-						smart: true,
+						...getFocalFromANS(ansImage),
 					},
 					responsiveImages: [200, 400, 600, 800, 1200],
 					width: 600,

diff --git a/blocks/numbered-list-block/features/numbered-list/default.jsx b/blocks/numbered-list-block/features/numbered-list/default.jsx
@@ -6,6 +6,7 @@ import { useFusionContext } from "fusion:context";
 import getProperties from "fusion:properties";
 import { RESIZER_TOKEN_VERSION } from "fusion:environment";
 import {
+	getFocalFromANS,
 	getImageFromANS,
 	isServerSide,
 	Heading,
@@ -57,6 +58,10 @@ const NumberedList = (props) => {
 			auth {
 				${RESIZER_TOKEN_VERSION}
 			}
+			focal_point {
+				x
+				y
+			}
             type
             url
           }
@@ -67,8 +72,12 @@ const NumberedList = (props) => {
 				auth {
 					${RESIZER_TOKEN_VERSION}
 				}
-                type
-                url
+				focal_point {
+					x
+					y
+				}
+				type
+				url
               }
             }
             type
@@ -100,7 +109,7 @@ const NumberedList = (props) => {
 												ansImage: imageObj,
 												aspectRatio: "3:2",
 												resizedOptions: {
-													smart: true,
+													...getFocalFromANS(imageObj),
 												},
 												responsiveImages: [137, 274, 548],
 												width: 274,

diff --git a/blocks/product-assortment-carousel-block/features/product-assortment-carousel/default.jsx b/blocks/product-assortment-carousel-block/features/product-assortment-carousel/default.jsx
@@ -6,6 +6,7 @@ import { useContent, useEditableContent } from "fusion:content";
 
 import {
 	Carousel,
+	getFocalFromANS,
 	Heading,
 	HeadingSection,
 	Icon,
@@ -153,7 +154,7 @@ function ProductAssortmentCarousel({ customFields = {} }) {
 											<Image
 												alt={altText}
 												ansImage={featuredImage}
-												resizedOptions={{ smart: true }}
+												resizedOptions={{ ...getFocalFromANS(featuredImage) }}
 												width={280}
 												height={280}
 												responsiveImages={[280, 420, 560, 840]}

diff --git a/blocks/product-featured-image-block/features/product-featured-image/default.jsx b/blocks/product-featured-image-block/features/product-featured-image/default.jsx
@@ -2,21 +2,21 @@ import React from "react";
 import { useFusionContext } from "fusion:context";
 import { RESIZER_TOKEN_VERSION } from "fusion:environment";
 import getProperties from "fusion:properties";
-import { imageANSToImageSrc, Image } from "@wpmedia/arc-themes-components";
+import { getFocalFromANS, Image } from "@wpmedia/arc-themes-components";
 
 const BLOCK_CLASS_NAME = "b-product-featured-image";
 
-export const ProductFeaturedImageDisplay = ({ featuredImage, resizerAppVersion, resizerURL }) => {
-	const { auth = {}, alt_text: altText } = featuredImage;
+export const ProductFeaturedImageDisplay = ({ featuredImage, resizerURL }) => {
+	const { alt_text: altText } = featuredImage;
 	return (
 		<Image
 			alt={altText}
+			ansImage={featuredImage}
 			className={BLOCK_CLASS_NAME}
 			height={768}
-			resizedOptions={{ auth: auth[resizerAppVersion] }}
+			resizedOptions={{ ...getFocalFromANS(featuredImage) }}
 			resizerURL={resizerURL}
 			responsiveImages={[320, 768]}
-			src={imageANSToImageSrc(featuredImage)}
 			width={768}
 		/>
 	);