The BigCommerce stencil environment has given us the ability to use the CDN helper in Handlebars; however, when we build a React component, we lose all of our ability to talk to our Handlebars helpers. We also cannot reference images via their path (images that would be uploaded to /assets/images). This makes it nearly impossible to reference images within the next components without help from the CDN helper.
Solution to Get Images from BigCommerce CDN
Lucky for us, there is still a way to get our image from the BigCommerce CDN, with the help of a couple of functions. The functions are as follows and can be added to a helper file in our stencil app.
Note: These functions are modified from BigCommerce’s Catalyst template.
const cdnHostname = 'cdn11.bigcommerce.com';
const storeHash = '<Store Hash>'
const cdnImageUrlBuilder = (sizeSegment, source, path) => {
return `https://${cdnHostname}/s-${storeHash}/images/stencil/${sizeSegment}/${source}/${path}`;
};
export const contentAssetUrl = (path) => {
return `https://${cdnHostname}/s-${storeHash}/content/${path}`;
};
export const contentImageUrl = (path, sizeParam) => {
// return a urlTemplate that can be used with the <BcImage> component
return cdnImageUrlBuilder(sizeParam || '{:size}', 'content', path);
};
export const imageManagerImageUrl = (filename, sizeParam) => {
// return a urlTemplate that can be used with the <BcImage> component
return cdnImageUrlBuilder(sizeParam || '{:size}', 'image-manager', filename);
};To get the CDN image that you need, all you do is import the imageManagerImageUrl() function from the file in which you import the above function. You use this function just like the CDN helper by passing the image name as well as the size that you would like to get from the CDN. Below is an example usage of this function.
import { imageManagerImageUrl } from '../component-helpers/cdnHelpers';
const backgroundUrl = imageManagerImageUrl('orangebacksplash.jpg', '2000w');Now you can reference the backgroundUrl in your web component, and you will have a working image that is rendered from the CDN URL.
Just like that, you have CDN-loaded images in your React components!
More Articles On React Components
- Passing Context Variable to React Components in BigCommerce Stencil
- Adding React Component to BigCommerce Stencil
- Grunt React Component Defined but not Used Stencil ESLint Error
Author: Maxwell Sherwin
Got stuck on a step in this article?
We like to update our blogs and articles to make sure they help resolve any troubleshooting difficulties you are having. Sometimes, there is a related feature to enable or a field to fill out that we miss during the instructions. If this article didn't resolve the issue, please use the chat and let us know so that we can update this article!
BigCommerce Certified Partner, Oracle NetSuite Alliance Partner
As both a BigCommerce Certified Partner and an Oracle NetSuite Alliance Partner, Anchor Group is ready to handle BigCommerce and NetSuite projects alike! Whether you already have one platform and are looking to integrate the other, are considering a full-scale implementation of both platforms or simply need support with ongoing customizations, our team is ready to help answer any questions you might have! Get in touch!
