payload-blurhash-plugin
payload-blurhash-plugin copied to clipboard
Payload CMS plugin for automatic Blurhash encoding of images
payload-blurhash-plugin
Payload CMS plugin for automatic Blurhash encoding of images.
Getting started
- Install the package with
npm i payload-blurhash-plugin
oryarn add payload-blurhash-plugin
. - Add the plugin to your
payload.config.ts
:
import computeBlurhash from 'payload-blurhash-plugin';
export default buildConfig({
/* ... */
plugins: [
computeBlurhash(),
],
});
Plugin options
Optionally, you can pass the following options to tweak the behavior of the plugin:
export interface BlurhashPluginOptions {
/*
* Array of collection slugs that the plugin should apply to.
* By default, the plugin will apply to all collections with `upload` properties.
*/
collections?: CollectionConfig['slug'][];
/*
* Width to resize the image to prior to computing the blurhash.
* Default: 32
*/
width?: number;
/*
* Height to resize the image to prior to computing the blurhash.
* Default: 32
*/
height?: number;
/*
* X component count to pass to the Blurhash library.
* Default: 3
*/
componentX?: number;
/*
* Y component count to pass to the Blurhash library.
* Default: 3
*/
componentY?: number;
/*
* Pattern to determine which MIME types to target
* Default: image/*
*/
mimeTypePattern?: string;
}
The defaults are chosen somewhat arbitrarily, they are just values that I've found to work nicely for me.