use getImageSource for FullWidthImage and StoryImage

Author: yvonnetangsu

components/Image/FullWidthImage.tsx

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
 import { cnb } from 'cnbuilder';
-import { getProcessedImage } from '@/utilities/getProcessedImage';
 import { getSbImageSize } from '@/utilities/getSbImageSize';
 import { getImageSources } from '@/utilities/getImageSources';
 import { type SbImageType } from '@/components/Storyblok/Storyblok.types';
@@ -12,16 +11,6 @@ export type FullWidthImageProps = SbImageType & React.HTMLAttributes<HTMLImageEl
   visibleHorizontal?: styles.VisibleHorizontalType;
 };
 
-// Define breakpoints for generating responsive images
-const responsiveBreakpoints = [
-  { cropWidth: 2000, minWidth: 1500 },
-  { cropWidth: 1500, minWidth: 1200 },
-  { cropWidth: 1200, minWidth: 992 },
-  { cropWidth: 1000, minWidth: 768 },
-  { cropWidth: 800, minWidth: 461 },
-  { cropWidth: 460, minWidth: 0 }, // Mobile/smallest size
-];
-
 export const FullWidthImage = ({
   filename,
   alt,
@@ -32,42 +21,9 @@ export const FullWidthImage = ({
 }: FullWidthImageProps) => {
   const { width: originalWidth, height: originalHeight } = getSbImageSize(filename);
 
- // Find corresponding image sizes for responsive images
+ // Get corresponding image sources for responsive images
   const imageSources = useMemo(() => {
-    const sources = [];
-
-    // If the original image width is < 2000px, find out what breakpoint range it falls into
-    const largestBp = responsiveBreakpoints.find(bp => originalWidth >= bp.minWidth && originalWidth < bp.cropWidth);
-
-    // If we found an appropriate breakpoint, insert the original image at that breakpoint
-    // For example, if the original image is 1100px, it will be used for the min-width: 992px breakpoint
-    if (largestBp) {
-      sources.push({
-        srcSet: getProcessedImage(filename), // Original size
-        media: `(min-width: ${largestBp.minWidth}px)`,
-        width: originalWidth,
-        height: originalHeight,
-      });
-    }
-
-    // Add all smaller sizes that are relevant
-    responsiveBreakpoints
-      // First pass: always include the mobile size, and keep all the breakpoints with minWidth < the original image width
-      .filter(bp => bp.cropWidth < originalWidth || bp.cropWidth === 460)
-      // If the original image is wider than 2000px (no largestBp assigned), keep all the breakpoints from the first pass
-      // Otherwise, keep only the breakpoints that are smaller than the largestBp
-      .filter(bp => !largestBp || bp.minWidth < largestBp.minWidth)
-      .forEach(bp => {
-        const cropSize = `${bp.cropWidth}x0`;
-
-        sources.push({
-          srcSet: getProcessedImage(filename, cropSize),
-          // The smaller source uses max-width while the larger uses min-width for the media attribute
-          media: bp.minWidth > 0 ? `(min-width: ${bp.minWidth}px)` : `(max-width: ${bp.cropWidth}px)`,
-        });
-      });
-
-    return sources;
+    return getImageSources(filename, originalWidth, originalHeight);
   }, [originalWidth, filename, originalHeight]);
 
   return (
@@ -95,4 +51,3 @@ export const FullWidthImage = ({
     </div>
   );
 };
-

components/Image/StoryImage.tsx

@@ -1,7 +1,8 @@
 import { cnb } from 'cnbuilder';
+import { useMemo } from 'react';
 import { MediaWrapper, type MediaWrapperProps } from '@/components/Media';
 import { type LightPageBgColorsType } from '@/utilities/datasource';
-import { getProcessedImage } from '@/utilities/getProcessedImage';
+import { getImageSources } from '@/utilities/getImageSources';
 import { getSbImageSize } from '@/utilities/getSbImageSize';
 import * as styles from './Image.styles';
 
@@ -27,7 +28,11 @@ export const StoryImage = ({
   ...props
 }: StoryImageProps) => {
   const { width: originalWidth, height: originalHeight } = getSbImageSize(imageSrc);
-  const cropSize = styles.imageCropsDesktop['free'];
+
+  // Get corresponding image sources for responsive images
+  const imageSources = useMemo(() => {
+    return getImageSources(imageSrc, originalWidth, originalHeight);
+  }, [originalWidth, imageSrc, originalHeight]);
 
   return (
     <MediaWrapper
@@ -43,27 +48,18 @@ export const StoryImage = ({
     >
       {!!imageSrc && (
         <picture>
-          <source
-            srcSet={getProcessedImage(imageSrc, cropSize)}
-            media="(min-width: 1500px)"
-          />
-          {/* <source
-            srcSet={getProcessedImage(imageSrc, styles.imageCropsSmallDesktop[aspectRatio], imageFocus)}
-            media="(min-width: 992px)"
-          />
-          <source
-            srcSet={getProcessedImage(imageSrc, styles.imageCropsTablet[aspectRatio], imageFocus)}
-            media="(min-width: 576px)"
-          />
-          <source
-            srcSet={getProcessedImage(imageSrc, styles.imageCropsMobile[aspectRatio], imageFocus)}
-            media="(max-width: 575px)"
-          /> */}
+          {imageSources.map(({ width, srcSet, media }) => (
+            <source
+              key={`source-${width}`}
+              srcSet={srcSet}
+              media={media}
+            />
+          ))}
           <img
-            src={getProcessedImage(imageSrc, cropSize)}
+            src={imageSources[0].srcSet}
             loading="lazy"
-            // width={cropWidth}
-            // height={cropHeight}
+            width={originalWidth}
+            height={originalHeight}
             alt={alt || ''}
             className={cnb(styles.image, styles.objectPositions('center', visibleVertical))}
           />

utilities/getImageFocus.ts

@@ -1,18 +1,18 @@
 import { getProcessedImage } from './getProcessedImage';
 
-export type ResponsiveBreakpoint = {
+type ResponsiveBreakpoint = {
   cropWidth: number;
   minWidth: number;
 };
 
-export type ImageSource = {
+type ImageSource = {
   srcSet: string;
   media: string;
   width?: number;
   height?: number;
 };
 
-// Define standard breakpoints for generating responsive images
+// Default breakpoints for generating responsive images
 const defaultResponsiveBreakpoints: ResponsiveBreakpoint[] = [
   { cropWidth: 2000, minWidth: 1500 },
   { cropWidth: 1500, minWidth: 1200 },
@@ -28,15 +28,13 @@ const defaultResponsiveBreakpoints: ResponsiveBreakpoint[] = [
  * @param filename - The image filename from Storyblok
  * @param originalWidth - Original width of the image
  * @param originalHeight - Original height of the image
- * @param imageFocus - Optional focus point for image cropping
  * @param customBreakpoints - Optional custom breakpoints to override defaults
  * @returns Array of image sources with srcSet and media queries
  */
 export const getImageSources = (
   filename: string,
   originalWidth: number,
   originalHeight: number,
-  imageFocus?: string,
   customBreakpoints?: ResponsiveBreakpoint[],
 ): ImageSource[] => {
   const sources: ImageSource[] = [];
@@ -49,7 +47,7 @@ export const getImageSources = (
   // For example, if the original image is 1100px, it will be used for the min-width: 992px breakpoint
   if (largestBp) {
     sources.push({
-      srcSet: getProcessedImage(filename, '', imageFocus), // Original size
+      srcSet: getProcessedImage(filename), // Original size
       media: `(min-width: ${largestBp.minWidth}px)`,
       width: originalWidth,
       height: originalHeight,
@@ -67,11 +65,9 @@ export const getImageSources = (
       const cropSize = `${bp.cropWidth}x0`;
 
       sources.push({
-        srcSet: getProcessedImage(filename, cropSize, imageFocus),
+        srcSet: getProcessedImage(filename, cropSize),
         // The smaller source uses max-width while the larger uses min-width for the media attribute
         media: bp.minWidth > 0 ? `(min-width: ${bp.minWidth}px)` : `(max-width: ${bp.cropWidth}px)`,
-        width: bp.cropWidth,
-        height: Math.round(bp.cropWidth * (originalHeight / originalWidth)), // Maintain aspect ratio
       });
     });