Overview

Catalyst takes full advantage of the BigCommerce CDN to provide globally-distributed asset hosting and on-the-fly image resizing. This functionality is included with all BigCommerce plans and is agnostic to the hosting provider you use to host your Catalyst storefront.

<Image /> and bcCdnImageLoader

For loading images from the BigCommerce platform, Catalyst provides <Image /> (opens in a new tab) as a wrapper for Next's <Image /> component to allow you to use the BigCommerce CDN directly to reduce load on the Next.js application and hosting costs. If the image doesn't come from the BigCommerce CDN, it defaults back to the default Next.js image loader.

Using store assets uploaded via WebDAV

Two helper functions are provided in lib/store-assets (opens in a new tab) to help build URLs for assets living in your store's object storage.

contentAssetUrl() can be used to generate a URL to an arbitrary file asset in the /content/ folder in WebDAV on your store.

Usage:

<Link href={contentAssetUrl('pdfs/user-manual.pdf')} >
   User Manual
</Link>

For image assets uploaded to /content, you may use contentImageUrl() to build a resizeable image URL that can be used with <Image>.

Usage:

<Image
    alt="an assortment of brandless products against a blank background"
    src={contentImageUrl('newsletter-images/april.png')}
/>

You may optionally request a specific size for the image, using a size parameter of the form 123w, 123x123, or original.

Usage:

<Image
    src={contentImageUrl('newsletter-images/april.png', '1000w')}
/>

Using Images uploaded to the Image Manager

Use the imageManagerImageUrl() function to build a CDN URL for an image asset that has been uploaded to the Image Manager. This returns a resizeable URL template that can be used with <Image>.

Usage:

<Image
    alt="an assortment of brandless products against a blank background"
    src={imageManagerImageUrl('slideshow-bg-01.jpg')}
/>

You may optionally request a specific size for the image, using a size parameter of the form 123w, 123x123, or original.

Usage:

<Image
    src={imageManagerImageUrl('slideshow-bg-01.jpg', '1000w')}
/>
MiddlewareLocalization