This package provides helpers for utilizing Storyblok's Image Service with a simple interface and a handful of options you can pass to it.
npm i @sporkbytes/storyblok-image
or yarn add @sporkbytes/storyblok-image
We currently have a single transform
function that is exported for use. It takes two parameters:
originalUrl
- the original URL of the image from Storyblok. This should containa.storyblok.com
.options
- an optional object describing the transformations to be made.focalPointX
- a number between 0 and 100 representing where in the image's width the crop should focus. This will work in tandem withfocalPointY
and only has an effect if you setwidth
. If this is not defined, the center of the image's width is the focal point when cropping.focalPointY
- a number between 0 and 100 representing where in the image's height the crop should focus. This will work in tandem withfocalPointX
and only has an effect if you setheight
. If this is not defined, the center of the image's height is the focal point when cropping.height
- the number of pixels to crop the image's height.smartCrop
- a boolean that determines whether cropping should attempt to keep human faces in-frame. This only has an effect when eitherheight
orwidth
is set. It is recommended that you only use this if you don't manually setfocalPointX
orfocalPointY
.width
- the number of pixels to crop the image's width.
Check the tests file for some detailed examples.
We export in CommonJS, UMD, and ES module formats based on rollup-starter-lib, so this should be usable in any environment. If you have issues in your environment, please let us know.
The original function code was written by @DumitruMitaru. The original commit for this repository was committed by @ajmueller, who was responsible for open-sourcing the library.