Configurable thumbnail dimensions in product gallery

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- Added the ability to configure the width and height for product thumbnails in the carousel component. Improved page performance and SEO by ensuring appropriate image sizes are used, reducing unnecessary data load.
+
 ## [3.175.1] - 2024-09-11
 
 ### Fixed

react/components/ProductImages/Wrapper.js

@@ -16,6 +16,8 @@ const ProductImagesWrapper = props => {
     showPaginationDots,
     contentOrder,
     placeholder,
+    thumbCustomWidth,
+    thumbCustomHeight,
   } = useResponsiveValues(
     pick(
       [
@@ -25,6 +27,8 @@ const ProductImagesWrapper = props => {
         'showPaginationDots',
         'contentOrder',
         'placeholder',
+        'thumbCustomWidth',
+        'thumbCustomHeight',
       ],
       props
     )
@@ -93,6 +97,8 @@ const ProductImagesWrapper = props => {
       ModalZoomElement={props.ModalZoom}
       contentType={props.contentType}
       showImageLabel={props.showImageLabel}
+      thumbCustomWidth={thumbCustomWidth}
+      thumbCustomHeight={thumbCustomHeight}
       // Deprecated
       zoomProps={props.zoomProps}
       displayMode={props.displayMode}

react/components/ProductImages/components/Carousel/ThumbnailSwiper.js

@@ -22,7 +22,15 @@ const CSS_HANDLES = [
 ]
 
 const Thumbnail = props => {
-  const { alt, isVideo, thumbUrl, handles, aspectRatio = 'auto' } = props
+  const {
+    alt,
+    isVideo,
+    thumbUrl,
+    handles,
+    aspectRatio = 'auto',
+    thumbCustomWidth,
+    thumbCustomHeight,
+  } = props
 
   return (
     <>
@@ -39,7 +47,14 @@ const Thumbnail = props => {
           )} w-100 h-auto db`}
           itemProp="thumbnail"
           alt={alt}
-          src={imageUrl(thumbUrl, THUMB_SIZE, THUMB_MAX_SIZE, aspectRatio)}
+          src={imageUrl(
+            thumbUrl,
+            THUMB_SIZE,
+            THUMB_MAX_SIZE,
+            aspectRatio,
+            thumbCustomWidth,
+            thumbCustomHeight
+          )}
         />
       </figure>
       <div
@@ -67,6 +82,8 @@ const ThumbnailSwiper = props => {
     thumbnailAspectRatio,
     thumbnailMaxHeight,
     displayThumbnailsArrows,
+    thumbCustomWidth,
+    thumbCustomHeight,
     ...swiperProps
   } = props
 
@@ -151,9 +168,6 @@ const ThumbnailSwiper = props => {
         touchRatio={1}
         threshold={8}
         navigation={navigationConfig}
-        /* Slides are grouped when thumbnails arrows are enabled
-         * so that clicking on next/prev will scroll more than
-         * one thumbnail */
         slidesPerGroup={displayThumbnailsArrows ? 4 : 1}
         freeMode={false}
         mousewheel={false}
@@ -183,6 +197,8 @@ const ThumbnailSwiper = props => {
                 alt={slide.alt}
                 thumbUrl={slide.thumbUrl || thumbUrls[i]}
                 aspectRatio={thumbnailAspectRatio}
+                thumbCustomWidth={thumbCustomWidth}
+                thumbCustomHeight={thumbCustomHeight}
               />
             </SwiperSlide>
           )

react/components/ProductImages/components/Carousel/index.js

@@ -249,6 +249,8 @@ class Carousel extends Component {
       showNavigationArrows = true,
       thumbnailVisibility,
       displayThumbnailsArrows = false,
+      thumbCustomWidth,
+      thumbCustomHeight,
     } = this.props
 
     const hasSlides = slides && slides.length > 0
@@ -325,6 +327,8 @@ class Carousel extends Component {
         displayThumbnailsArrows={displayThumbnailsArrows}
         slides={slides}
         position={position}
+        thumbCustomWidth={thumbCustomWidth}
+        thumbCustomHeight={thumbCustomHeight}
       />
     )
 
@@ -414,6 +418,8 @@ Carousel.propTypes = {
     THUMBS_VISIBILITY.VISIBLE,
     THUMBS_VISIBILITY.HIDDEN,
   ]),
+  thumbCustomWidth: PropTypes.number,
+  thumbCustomHeight: PropTypes.number,
 }
 
 export default withCssHandles(CSS_HANDLES)(Carousel)

react/components/ProductImages/index.js

@@ -35,6 +35,8 @@ const ProductImages = ({
   zoomFactor,
   ModalZoomElement,
   contentType = 'all',
+  thumbCustomWidth,
+  thumbCustomHeight,
   // Deprecated
   zoomProps,
   displayMode,
@@ -152,6 +154,8 @@ const ProductImages = ({
         thumbnailsOrientation={thumbnailsOrientation}
         displayThumbnailsArrows={displayThumbnailsArrows}
         thumbnailVisibility={thumbnailVisibility}
+        thumbCustomWidth={thumbCustomWidth}
+        thumbCustomHeight={thumbCustomHeight}
         // Deprecated
         zoomProps={zoomProps}
       />

react/components/ProductImages/utils/aspectRatioUtil.tsx

@@ -44,30 +44,33 @@ export const imageUrl = (
   src: string,
   size: number,
   maxSize: number,
-  aspectRatio?: AspectRatio
+  aspectRatio?: AspectRatio,
+  customWidth?: number,
+  customHeight?: number
   // eslint-disable-next-line max-params
 ) => {
-  let width = size
-  let height: number | string = 'auto'
-
-  if (aspectRatio && aspectRatio !== 'auto') {
-    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-    height = size * (parseAspectRatio(aspectRatio) || 1)
-
-    if (width > maxSize) {
-      height /= width / maxSize
-      width = maxSize
+  let width = customWidth || size
+  let height: number | string = customHeight || 'auto'
+
+  if (!customWidth || !customHeight) {
+    if (aspectRatio && aspectRatio !== 'auto') {
+      height = size * (parseAspectRatio(aspectRatio) || 1)
+
+      if (width > maxSize) {
+        height /= width / maxSize
+        width = maxSize
+      }
+
+      if (height > maxSize) {
+        width /= height / maxSize
+        height = maxSize
+      }
+
+      width = Math.round(width)
+      height = Math.round(height)
+    } else {
+      width = Math.min(maxSize, width)
     }
-
-    if (height > maxSize) {
-      width /= height / maxSize
-      height = maxSize
-    }
-
-    width = Math.round(width)
-    height = Math.round(height)
-  } else {
-    width = Math.min(maxSize, width)
   }
 
   return changeImageUrlSize(src, width, height)