feat: rendering of additional di params

amplience · Nov 27, 2023 · c96d098 · c96d098 · vercel · Nov 27, 2023
1 parent feba7dd
commit c96d098
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 10 deletions.
diff --git a/components/cms-modern/AdaptiveImage/AdaptiveImage.tsx b/components/cms-modern/AdaptiveImage/AdaptiveImage.tsx
@@ -7,12 +7,13 @@ export interface AdaptiveImageProps extends React.DetailedHTMLProps<React.ImgHTM
     imageRef?:any;
     children?: React.ReactElement[];
     imageAltText?: string;
+    diParams?:string;
 }
 
 type ContextState = {
     image: CmsImage;
     transformations?: ImageTransformations;
-
+    diParams?: string;
     srcset?: {
         [factor: string]: ImageTransformations
     }
@@ -25,6 +26,7 @@ const AdaptiveImage: React.SFC<AdaptiveImageProps> = (props) => {
         image,
         imageAltText = "",
         transformations,
+        diParams = "",
         children,
         imageRef,
         ...other
@@ -34,12 +36,13 @@ const AdaptiveImage: React.SFC<AdaptiveImageProps> = (props) => {
         return null;
     }
 
-    const defaultImageUrl = getImageURL(image, transformations);
+    const defaultImageUrl = getImageURL(image, transformations, false, diParams);
 
     return (
         <AdaptiveImageContext.Provider value={{
             image,
-            transformations
+            transformations,
+            diParams
         }}>
             <picture>
                 {children}

diff --git a/components/cms-modern/AdaptiveImage/AdaptiveImageSource.tsx b/components/cms-modern/AdaptiveImage/AdaptiveImageSource.tsx
@@ -14,7 +14,8 @@ const AdaptiveImageSource: React.SFC<Props> = (props) => {
 
     const {
         image,
-        transformations: rootTransformations
+        transformations: rootTransformations,
+        diParams
     } = useContext(AdaptiveImageContext) || {};
 
     const [imageUrl, imageUrl2x] = useMemo(() => {
@@ -28,15 +29,18 @@ const AdaptiveImageSource: React.SFC<Props> = (props) => {
         }
         else {
             return [
-                getImageURL(image, params),
+                getImageURL(image, params, false, diParams),
                 getImageURL(image, {
                     ...params,
                     width: params.width ? params.width * 2 : undefined,
                     height: params.height ? params.height * 2 : undefined
-                })
+                },
+                false,
+                diParams
+                )
             ]
         }
-    }, [image, rootTransformations, transformations]);
+    }, [image, rootTransformations, transformations, diParams]);
     return imageUrl ? <source srcSet={`${imageUrl} 1x, ${imageUrl2x} 2x`} src={imageUrl} {...other} /> : null
 };
 

diff --git a/components/cms-modern/AdaptiveImage/DefaultAdaptiveImage.tsx b/components/cms-modern/AdaptiveImage/DefaultAdaptiveImage.tsx
@@ -1,7 +1,6 @@
 import React, { forwardRef } from 'react';
 import AdaptiveImage, { AdaptiveImageProps } from './AdaptiveImage';
 import AdaptiveImageSource from './AdaptiveImageSource';
-import { ImageFormat } from '@utils/getImageURL';
 
 const DefaultAdaptiveImage: React.SFC<Omit<AdaptiveImageProps, 'children'>> = (props) => {
     const {imageRef} = props;

diff --git a/components/cms-modern/Image/Image.tsx b/components/cms-modern/Image/Image.tsx
@@ -8,13 +8,15 @@ type Props = {
     query?: any;
     format?: string;
     imageAltText?: string;
+    di?: string;
 } & CmsContent;
 
 const Image: FC<Props> = ({
     display,
     image,
     imageAltText,
     seoText,
+    di = "",
     query,
     roundel
 }) => {
@@ -89,7 +91,7 @@ const Image: FC<Props> = ({
         if (roundel && roundel[0] && roundel[0].roundel && roundel[0].roundelPosition && roundel[0].roundelRatio) {
             queryString += `&$roundel$&${getRoundelConfig(roundel)}`
         }
-        return getImageURL(`${baseUrl}?${queryString}`, transformations);
+        return getImageURL(`${baseUrl}?${queryString}`, transformations, false, di);
     };
 
     const source = ({ minWidth, maxWidth, width, highDensityWidth, format, poiAspect }: any) => {

diff --git a/components/cms-modern/SimpleBanner/SimpleBanner.tsx b/components/cms-modern/SimpleBanner/SimpleBanner.tsx
@@ -55,6 +55,7 @@ export interface SimpleBannerProps {
         };
         disablePoiAspectRatio: boolean;
         imageAltText: string;
+        di: string;
     },
 
     /**
@@ -153,7 +154,7 @@ const SimpleBanner: React.FC<SimpleBannerProps> = ({
                 }>
                 {imageLoading ? <DefaultAdaptiveImageSkeleton/> : null}
                 <Box style={{display: `${imageLoading ? 'none': 'block'}`}}>
-                    <DefaultAdaptiveImage ref={imageRef} onLoad={() => handleImageLoaded()} image={img?.image.image} imageAltText={image?.imageAltText} transformations={transformations} className={classes.image} />
+                    <DefaultAdaptiveImage ref={imageRef} onLoad={() => handleImageLoaded()} image={img?.image.image} imageAltText={image?.imageAltText} transformations={transformations} diParams={image?.di} className={classes.image} />
                 </Box>
 
             </Overlay>