Skip to content

invakid404/payload-blurhash-plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

56 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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
  1. 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.

About

Payload CMS plugin for automatic Blurhash encoding of images

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published