leonardstruck

payload base64 plugin

by leonardstruck
Media & images
v1
^1.0.11
Unlicense

Overview

Summary generated from the README

Adds automatic base64 encoding of uploaded images to Payload upload collections, useful as low-quality blur placeholders. Registered through the plugins array in the Payload config and applies to all upload collections by default. Options allow limiting collections, adjusting placeholder size between 4 and 64, and toggling alpha channel removal. Targets Payload 1.x.

Features

  • Automatically encodes uploaded images to base64 placeholders
  • Applies to all upload collections by default
  • Option to restrict the plugin to specific collection slugs
  • Configurable placeholder size from 4 to 64
  • Toggle for alpha channel removal

Use cases

  • Show blurred placeholders while full images load on a frontend
  • Reduce layout shift and perceived load time for image-heavy pages

From the author

Payload CMS plugin for automatic base64 encoding of images

Installation

npm i payload-base64-plugin

17

Stars

3

Forks

2

Open Issues

3 years ago

Last Updated

0

Weekly Downloads

v1.2.0

npm Version

13.2 KB

Unpacked Size

1

Dependencies

GitHub stars

Trends appear after 7 days of data. Daily snapshots have not started yet.

npm weekly downloads

Trends appear after 7 days of data. Daily snapshots have not started yet.

Each point is npm's rolling 7-day download count.

Health Score

30/100Fair

Composite score based on GitHub activity, stars, npm downloads, publish recency, dependency count, and package size.

Badge for your README

Payload Directory health badge
Markdown
[![Payload Directory](https://payloaddirectory.dev/badge/571626986-root.svg)](https://payloaddirectory.dev/plugins/571626986-root)
HTML
<a href="https://payloaddirectory.dev/plugins/571626986-root"><img src="https://payloaddirectory.dev/badge/571626986-root.svg" alt="Payload Directory"></a>
Updated Jan 21, 2023Created Nov 28, 2022Published Nov 27, 2022

README

payload-blurhash-plugin

Payload CMS plugin for automatic base64 encoding of images.

Getting started

  1. Install the package with npm i payload-base64-plugin or yarn add payload-base64-plugin.
  2. Add the plugin to your payload.config.ts:
import generateBase64 from 'payload-blurhash-plugin';

export default buildConfig({
  /* ... */
  plugins: [generateBase64()],
});

Plugin options

Optionally, you can pass the following options to tweak the behavior of the plugin:

export interface Base64PluginOptions {
  /*
   * 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'][];

  /*
   * an integer (between 4 and 64) to adjust the returned placeholder size
   * Default: 4
   */
  size?: number;

  /*
   * turn on/off the alpha channel removal
   * Default: true
   */
  removeAlpha?: boolean;
}

Credits

This plugin is heavily based on the plugin payload-blurhash-plugin by invakid404.

Since I only changed the encoding to base64, I decided to fork the original plugin instead of creating a new one.

Thank you a lot for your work!

Similar plugins