🖼️ Storyblok Images

Resize and use all the storyblok images service operations easily.

Instalation

Install the package using npm...

npm install --save storyblok-images

or yarn

yarn add storyblok-images

Basic example

import storyblokImages from 'storyblok-images'

const resizedImage = storyblokImages({
  url: 'https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg', // Image uploaded to Storyblok
  size: {
    // Resize to
    width: 200,
    height: 300,
  },
})

// resizedImage = https://img2.storyblok.com/200x300/f/39898/3310x2192/e4ec08624e/demo-image.jpeg

The configuration object

The configuration object accepts the following values:

Field	Required	Type	Default	Example
url	true	String		https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg
size	false	{width: Number, height: Number}		{ width: 100, height: 200 }
fitIn	false	Boolean	false	false
fill	false	String	''	'cccccc'
format	false	String. Valid values: 'webp', 'jpeg' and 'png'		'webp'
quality	false	Number. From 1 to 100		40
smartCrop	false	Boolean	false	false
focalPoints	false	Matrix [[number, number], [number, number]]		[[100, 100], [20, 30]]

📒 Chech storyblok images service for further details on what any of this fields do.

Contributing

PRs welcome! Please, follow Prettier rules included in .vscode

Running tests:

npm test

Or

yarn test

Thanks! ✌️