diff --git a/.changeset/strange-beers-smile.md b/.changeset/strange-beers-smile.md new file mode 100644 index 000000000..7a7590438 --- /dev/null +++ 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 index bc0720b75..7ebfa3093 100644 --- 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 index 477011034..6b25c564e 100644 --- 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 index 0048fd035..e853a233e 100644 --- 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 index a96b31362..506e38025 100644 --- 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 index c3dbb17cc..7202b1ca5 100644 --- 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/core/app/[locale]/(default)/product/[slug]/_components/product-form/fields/multiple-choice-field/fragment.ts b/core/app/[locale]/(default)/product/[slug]/_components/product-form/fields/multiple-choice-field/fragment.ts index 8e393003a..ae009edb3 100644 --- a/core/app/[locale]/(default)/product/[slug]/_components/product-form/fields/multiple-choice-field/fragment.ts +++ b/core/app/[locale]/(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 index 4760f1a5c..713029fba 100644 --- 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 index dd5e0d90b..2d16108c1 100644 --- 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 index 7e6a49843..ffd7c2de5 100644 --- 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 index 9dfc4db72..ef2e17c80 100644 --- 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 index b1d0a0078..df9fe9ec0 100644 --- 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 index 8d2ca1198..56bfd8dee 100644 --- 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 index 284cfc1ef..1c9127aa9 100644 --- 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 index bb184cbc2..a39a7a783 100644 --- 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; }