Overview
The getResponsiveImageSrc helper allows you to manually manipulate the image's transformation on Shogun Frontend CDN.
Import
The getResponsiveImageSrc helper can be imported directly from the frontend-ui package, which is pre-installed in your Shogun Frontend store.
import getResponsiveImageSrc from 'frontend-ui/getResponsiveImageSrc'
Usage
Resize image width and scale height proportionally:
const imgSrc = "https://f.shgcdn.com/cbc7d039-b532-42d4-979a-2c8180befadd/"
getResponsiveImageSrc(imgSrc, { width: "1000" })
// https://f.shgcdn.com/cbc7d039-b532-42d4-979a-2c8180befadd/-/resize/1000x/
Resize the image to exact dimensions:
const imgSrc = "https://f.shgcdn.com/cbc7d039-b532-42d4-979a-2c8180befadd/"
getResponsiveImageSrc(imgSrc, { width: "1000", height: "500" })
// https://f.shgcdn.com/cbc7d039-b532-42d4-979a-2c8180befadd/-/resize/1000x500/