fix: adds option to enforce no cover for sanity image (#1001)

varianter · Dec 12, 2024 · 451422d · 451422d
1 parent 6351c01
commit 451422d
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 13 deletions.
diff --git a/src/components/image/SanityImage.tsx b/src/components/image/SanityImage.tsx
@@ -39,9 +39,11 @@ const useNextSanityGlobalImage = (
 const SanityAssetImage = ({
   image,
   imageProps,
+  objectFit = "cover",
 }: {
   image: IImage;
   imageProps?: UseNextSanityImageProps;
+  objectFit?: "cover" | "none";
 }) => {
   const objectPosition = image.hotspot
     ? `${image.hotspot.x * 100}% ${image.hotspot.y * 100}%`
@@ -56,12 +58,16 @@ const SanityAssetImage = ({
       width={imageProps.width}
       height={imageProps.height}
       blurDataURL={image.metadata?.lqip}
-      style={{
-        objectFit: "cover",
-        objectPosition,
-        maxWidth: "100%",
-        maxHeight: "100%",
-      }}
+      style={
+        objectFit === "none"
+          ? {}
+          : {
+              objectFit: "cover",
+              objectPosition,
+              maxWidth: "100%",
+              maxHeight: "100%",
+            }
+      }
     />
   );
 };
@@ -76,24 +82,44 @@ export function SanitySharedImage({ image }: { image: IImage }) {
   return <SanityAssetImage image={image} imageProps={imageProps} />;
 }
 
-function SanityGlobalImage({ image }: { image: IImage }) {
+function SanityGlobalImage({
+  image,
+  objectFit = "cover",
+}: {
+  image: IImage;
+  objectFit?: "cover" | "none";
+}) {
   const imageProps = useNextSanityGlobalImage(image);
   return (
-    <SanityAssetImage image={image} imageProps={imageProps ?? undefined} />
+    <SanityAssetImage
+      objectFit={objectFit}
+      image={image}
+      imageProps={imageProps ?? undefined}
+    />
   );
 }
 
-export function SanityImage({ image }: { image: IImage }) {
+export function SanityImage({
+  image,
+  objectFit = "cover",
+}: {
+  image: IImage;
+  objectFit?: "cover" | "none";
+}) {
   if (image?.src) {
     return (
       <Image
         alt={image?.alt || ""}
         src={image.src.src}
-        style={{ objectFit: "cover", height: "100%", width: "100%" }}
+        style={
+          objectFit === "none"
+            ? {}
+            : { objectFit: "cover", height: "100%", width: "100%" }
+        }
         width={300}
         height={300}
       />
     );
   }
-  return <SanityGlobalImage image={image} />;
+  return <SanityGlobalImage image={image} objectFit={objectFit} />;
 }
diff --git a/src/components/sections/image-split/ImageSplit.tsx b/src/components/sections/image-split/ImageSplit.tsx
@@ -55,7 +55,7 @@ const ImageSplitComponent = ({ section }: ImageSplitProps) => {
       {section.imageExtended && (
         <div className={imageClass}>
           <div>
-            <SanityImage image={section.imageExtended} />
+            <SanityImage image={section.imageExtended} objectFit="none" />
           </div>
         </div>
       )}

diff --git a/src/components/sections/image-split/image-split.module.css b/src/components/sections/image-split/image-split.module.css
@@ -55,6 +55,7 @@
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
+  justify-content: center;
 }
 
 .textContainer__link {
@@ -77,5 +78,6 @@
 .image img {
   display: block;
   margin: 0 auto;
-  width: 100%;
+  max-width: 100%;
+  height: auto;
 }