getResponsiveImageSrc

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/

Did this page help you?