https://github.com/invakid404/payload-blurhash-plugin
Payload CMS plugin for automatic Blurhash encoding of images
https://github.com/invakid404/payload-blurhash-plugin
blurhash payload payload-plugin payloadcms
Last synced: 4 months ago
JSON representation
Payload CMS plugin for automatic Blurhash encoding of images
- Host: GitHub
- URL: https://github.com/invakid404/payload-blurhash-plugin
- Owner: invakid404
- License: unlicense
- Created: 2022-05-27T17:32:06.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2025-02-14T10:33:17.000Z (over 1 year ago)
- Last Synced: 2025-10-06T15:06:23.545Z (8 months ago)
- Topics: blurhash, payload, payload-plugin, payloadcms
- Language: TypeScript
- Homepage:
- Size: 530 KB
- Stars: 88
- Watchers: 2
- Forks: 7
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# payload-blurhash-plugin
Payload CMS plugin for automatic Blurhash encoding of images.
## Getting started
1. Install the package
- Payload v2: `npm i payload-blurhash-plugin@2`
- Payload v3: `npm i payload-blurhash-plugin@3`
2. Add the plugin to your `payload.config.ts`:
```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:
```ts
export type 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'][];
/*
* Pattern to determine which MIME types to target
* Default: image/*
*/
mimeTypePattern?: string;
/*
* Whether to show the Blurhash field when viewing media items in the admin interface.
* Default: false
*/
showBlurhashField?: boolean;
} & AlgorithmOptions;
```
The `AlgorithmOptions` depend on which algorithm you are using. Currently, there
are two algorithms available: "blurhash" (the default) and "thumbhash". You can
select an algorithm by specifying the algorithm name under the `algorithm` key.
These are the options for the "blurhash" algorithm:
```ts
type BlurhashOptions = {
// Default: 32
width?: number | undefined;
// Default: 32
height?: number | undefined;
// Default: 3
componentX?: number | undefined;
// Default: 3
componentY?: number | undefined;
};
```
There are currently no options for the "thumbhash" algorithm.
The defaults are chosen somewhat arbitrarily, they are just values that I've
found to work nicely for me.