Updating externa images with images sizes frpm strapi.

diggsweden · Mar 26, 2024 · f312876 · f312876
1 parent 9b56559
commit f312876
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 23 deletions.
diff --git a/components/content/Promo/index.tsx b/components/content/Promo/index.tsx
@@ -35,7 +35,6 @@ export const Promo: FC<PromoProps> = ({
       {image && (
         <CustomImage
           image={image}
-          width={384}
           sizes="(max-width: 640px) 100vw, (max-width: 1080px) 50vw, (max-width: 1200px) 33vw, 20vw"
           className="min-h-[152px] w-full object-cover"
         />

diff --git a/components/content/Publication/PublicationTeaser/index.tsx b/components/content/Publication/PublicationTeaser/index.tsx
@@ -40,7 +40,6 @@ export const PublicationTeaser: FC<PublicationTeaserProps> = ({
       <div>
         <CustomImage
           image={image}
-          width={384}
           sizes="(max-width: 640px) 100vw, (max-width: 1080px) 50vw, (max-width: 1200px) 33vw, 20vw"
           className="h-[184px] w-full object-cover md:h-[240px] lg:h-[184px]"
         />

diff --git a/components/content/blocks/MediaBlock/index.tsx b/components/content/blocks/MediaBlock/index.tsx
@@ -40,9 +40,8 @@ const renderMedia = (
         <figure className="border-b border-brown-200 pb-sm">
           <CustomImage
             image={media}
-            width={640}
             className="pb-sm"
-            sizes="(max-width: 640px) 80vw, (max-width: 1200px) 60vw, (max-width: 1920px) 30vw, 25vw"
+            /* sizes="(max-width: 640px) 70vw, (max-width: 1200px) 60vw, (max-width: 1920px) 30vw, 25vw" */
           />
           {mediaDescription && (
             <figcaption className="text-brown-600">

diff --git a/components/content/blocks/QuoteBlock/index.tsx b/components/content/blocks/QuoteBlock/index.tsx
@@ -17,8 +17,7 @@ export const QuoteBlock: FC<QuoteFragment> = ({ quote, author, image }) => {
       </div>
       {image && (
         <CustomImage
-          sizes="(max-width: 640px) 10vw, 100px"
-          width={128}
+          sizes="(max-width: 640px) 10vw, 5vw"
           image={image || {}}
           className="h-[50px] max-w-[50px] rounded-full object-cover md:h-[100px] md:max-w-[100px] lg:h-[130px] lg:max-w-[130px]"
         />

diff --git a/components/global/CustomImage/index.tsx b/components/global/CustomImage/index.tsx
@@ -10,18 +10,19 @@ interface CustomImageProps {
   sizes?: string;
   className?: string;
   priority?: boolean;
-  width?: number;
 }
 
 const isNextStatic = (url: string) =>
   typeof url != "string" || !url.startsWith("/uploads");
 
+const imageSizes = ["thumbnail", "small", "medium", "large"];
+const imageWidths = ["248w", "500w", "750w", "1000w"];
+
 export const CustomImage: FC<CustomImageProps> = ({
   image,
   sizes,
   className,
   priority = false,
-  width,
 }) => {
   if (!image) {
     return (
@@ -56,20 +57,37 @@ export const CustomImage: FC<CustomImageProps> = ({
     );
   }
 
-  const src = isExternalLink(image.url)
-    ? image.url
-    : (env("MEDIA_BASE_URL") || "") + image.url;
+  const src = isExternalLink(image.url);
+
+  const srcset = imageSizes
+    .map(
+      (w, idx: number) =>
+        `${
+          src
+            ? image.url
+            : (env("MEDIA_BASE_URL") || "") +
+              image.url.replace("uploads/", "uploads/" + w + "_") +
+              " " +
+              imageWidths[idx]
+        }`,
+    )
+    .join(", ");
 
   return (
-    <Image
-      key={src}
-      src={`${src}?w=${width || 384}&q=${75}`}
-      width={Number(image.width) || 384}
-      height={Number(image.height) || 200}
-      className={className ? className : ""}
-      alt={image.alt || ""}
-      unoptimized={true}
-      priority={priority}
-    />
+    <picture>
+      <source
+        srcSet={srcset + `, ${env("MEDIA_BASE_URL") + image.url} 1920w`}
+        type={image.mime}
+        sizes={sizes}
+      />
+      <img
+        className={className}
+        src={src ? image.url : (env("MEDIA_BASE_URL") || "") + image.url}
+        width={image.width || ""}
+        height={image.height || ""}
+        alt={image.alt || ""}
+        loading="lazy"
+      />
+    </picture>
   );
 };
diff --git a/components/global/Typography/HtmlParser/index.tsx b/components/global/Typography/HtmlParser/index.tsx
@@ -47,7 +47,6 @@ export const HtmlParser: FC<{ text: string }> = ({ text }) => {
           return (
             <CustomImage
               image={image as ImageFragment}
-              width={640}
               sizes="(max-width: 640px) 80vw, (max-width: 1200px) 60vw, (max-width: 1920px) 30vw, 25vw"
             />
           );

diff --git a/components/layout/Hero/index.tsx b/components/layout/Hero/index.tsx
@@ -47,7 +47,6 @@ export const Hero: FC<HeroProps> = ({
       {image && (
         <div className="absolute left-none top-none h-full w-full">
           <CustomImage
-            width={1920}
             image={image}
             sizes="(max-width: 640px) 90vw, (max-width: 1200px) 90vw, 90vw"
             className="h-full w-full object-cover"