Simplify image loader implementation by using lossy param directly fr…

…om API (#1391)
bigcommerce · Sep 23, 2024 · 4d64c31 · 4d64c31
1 parent 5a6b2f5
commit 4d64c31
Show file tree

Hide file tree

Showing 15 changed files with 20 additions and 29 deletions.
diff --git a/.changeset/strange-beers-smile.md b/.changeset/strange-beers-smile.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Get lossy image from API instead of setting param in code
diff --git a/core/app/[locale]/(default)/blog/[blogId]/_components/sharing-links.tsx b/core/app/[locale]/(default)/blog/[blogId]/_components/sharing-links.tsx
@@ -13,7 +13,7 @@ export const SharingLinksFragment = graphql(`
         post(entityId: $entityId) {
           entityId
           thumbnailImage {
-            url: urlTemplate
+            url: urlTemplate(lossy: true)
           }
           seo {
             pageTitle

diff --git a/core/app/[locale]/(default)/blog/[blogId]/page-data.ts b/core/app/[locale]/(default)/blog/[blogId]/page-data.ts
@@ -22,7 +22,7 @@ const BlogPageQuery = graphql(
               tags
               thumbnailImage {
                 altText
-                url: urlTemplate
+                url: urlTemplate(lossy: true)
               }
               seo {
                 pageTitle

diff --git a/core/app/[locale]/(default)/cart/_components/cart-item.tsx b/core/app/[locale]/(default)/cart/_components/cart-item.tsx
@@ -12,7 +12,7 @@ const PhysicalItemFragment = graphql(`
     brand
     sku
     image {
-      url: urlTemplate
+      url: urlTemplate(lossy: true)
     }
     entityId
     quantity
@@ -70,7 +70,7 @@ const DigitalItemFragment = graphql(`
     brand
     sku
     image {
-      url: urlTemplate
+      url: urlTemplate(lossy: true)
     }
     entityId
     quantity

diff --git a/core/app/[locale]/(default)/compare/page.tsx b/core/app/[locale]/(default)/compare/page.tsx
@@ -51,7 +51,7 @@ const ComparePageQuery = graphql(
               }
               defaultImage {
                 altText
-                url: urlTemplate
+                url: urlTemplate(lossy: true)
               }
               reviewSummary {
                 numberOfReviews

diff --git a/core/app/[locale]/(default)/product/[slug]/_components/gallery/fragment.ts b/core/app/[locale]/(default)/product/[slug]/_components/gallery/fragment.ts
@@ -6,14 +6,14 @@ export const GalleryFragment = graphql(`
       edges {
         node {
           altText
-          url: urlTemplate
+          url: urlTemplate(lossy: true)
           isDefault
         }
       }
     }
     defaultImage {
       altText
-      url: urlTemplate
+      url: urlTemplate(lossy: true)
     }
   }
 `);
diff --git a/...default)/product/[slug]/_components/product-form/fields/multiple-choice-field/fragment.ts b/...default)/product/[slug]/_components/product-form/fields/multiple-choice-field/fragment.ts
@@ -21,7 +21,7 @@ export const MultipleChoiceFieldFragment = graphql(`
             __typename
             defaultImage {
               altText
-              url: urlTemplate
+              url: urlTemplate(lossy: true)
             }
           }
         }

diff --git a/core/app/[locale]/(default)/product/[slug]/_components/product-schema.tsx b/core/app/[locale]/(default)/product/[slug]/_components/product-schema.tsx
@@ -19,7 +19,7 @@ export const ProductSchemaFragment = graphql(`
       numberOfReviews
     }
     defaultImage {
-      url: urlTemplate
+      url: urlTemplate(lossy: true)
     }
     prices {
       price {

diff --git a/core/app/[locale]/(default)/product/[slug]/page-data.ts b/core/app/[locale]/(default)/product/[slug]/page-data.ts
@@ -33,7 +33,7 @@ const ProductPageQuery = graphql(
           entityId
           name
           defaultImage {
-            url: urlTemplate
+            url: urlTemplate(lossy: true)
             altText
           }
           categories(first: 1) {

diff --git a/core/components/blog-post-card/fragment.ts b/core/components/blog-post-card/fragment.ts
@@ -10,7 +10,7 @@ export const BlogPostCardFragment = graphql(`
       utc
     }
     thumbnailImage {
-      url: urlTemplate
+      url: urlTemplate(lossy: true)
       altText
     }
   }

diff --git a/core/components/footer/fragment.ts b/core/components/footer/fragment.ts
@@ -19,7 +19,7 @@ export const FooterFragment = graphql(`
         }
         ... on StoreImageLogo {
           image {
-            url: urlTemplate
+            url: urlTemplate(lossy: true)
             altText
           }
         }

diff --git a/core/components/header/fragment.ts b/core/components/header/fragment.ts
@@ -11,7 +11,7 @@ export const HeaderFragment = graphql(`
         }
         ... on StoreImageLogo {
           image {
-            url: urlTemplate
+            url: urlTemplate(lossy: true)
             altText
           }
         }

diff --git a/core/components/product-card/fragment.ts b/core/components/product-card/fragment.ts
@@ -10,7 +10,7 @@ export const ProductCardFragment = graphql(
       name
       defaultImage {
         altText
-        url: urlTemplate
+        url: urlTemplate(lossy: true)
       }
       path
       brand {

diff --git a/core/components/store-logo/fragment.ts b/core/components/store-logo/fragment.ts
@@ -10,7 +10,7 @@ export const StoreLogoFragment = graphql(`
       }
       ... on StoreImageLogo {
         image {
-          url: urlTemplate
+          url: urlTemplate(lossy: true)
           altText
         }
       }

diff --git a/core/lib/cdn-image-loader.ts b/core/lib/cdn-image-loader.ts
@@ -1,25 +1,13 @@
 'use client';
 
-const addCompressionParam = (url: string, lossy: boolean): string => {
-  const urlObj = new URL(url);
-
-  const paramValue = lossy ? 'lossy' : 'lossless';
-
-  urlObj.searchParams.set('compression', paramValue);
-
-  return urlObj.toString();
-};
-
 export default function bcCdnImageLoader({
   src,
   width,
   height,
-  lossy = true,
 }: {
   src: string;
   width: number;
   height?: number;
-  lossy?: boolean;
 }): string {
   let url;
 
@@ -29,7 +17,5 @@ export default function bcCdnImageLoader({
 
   url = src.replace('{:size}', `${width}w`);
 
-  url = addCompressionParam(url, lossy);
-
   return url;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,7 +10,7 @@ export const BlogPostCardFragment = graphql(` @@
           utc
         }
         thumbnailImage {
-          url: urlTemplate
+          url: urlTemplate(lossy: true)
           altText
         }
       }
@@ Expand Down @@