blur-data-urls

Blur Data URLs Payload Plugin

Install

pnpm add @oversightstudio/blur-data-urls sharp

About

This plugin automatically assigns URLs for blur data to media collections in Payload. It will automatically add the blurDataUrl field to the collections you provide and automatically generate and assign a blurDataUrl to the field whenever a media item is uploaded.

Payload Setup

import { buildConfig } from 'payload'
import { blurDataUrlsPlugin } from '@oversightstudio/blur-data-urls'
import { Media } from './collections/Media'

export default buildConfig({
  plugins: [
    blurDataUrlsPlugin({
        enabled: true,
        collections: [Media],
        // Blur data URLs Settings (Optional) 
        blurOptions: {
            blur: 18,
            width: 32,
            height: "auto",
        }
    }),
  ],
})

Options

Option	Type	Default	Description
enabled	boolean	true	Whether the plugin is enabled.
collections	PluginCollectionConfig[]	Required	A list of collections where blurDataUrl should be implemented. Should typically be the main media collection.
blurOptions	object	Optional	Additional settings for generating blurDataUrls.

blurOptions Settings

Option	Type	Default	Description
width	number	32	Width of the blurDataUrl.
height	number | 'auto'	'auto'	Height of the blurDataUrl. If 'auto', it maintains the image’s aspect ratio.
blur	number	18	The amount of blur applied to the generated blurDataUrl.

Usage with next/image

import Image from 'next/image'

<Image
// Your other image settings
placeholder="blur"
blurDataURL={image.blurDataUrl ?? undefined}
/>

Generating BlurData URLs for Existing Images

If you already have images in your media collection, you might want to generate blurDataUrls for them.

To do so:

1. Place this script on your ./src/scripts/ directory.
2. Make sure you have tsx installed either globally or on your project. You can uninstall it after running the script.
3. Modify the plugin configuration on the script. You'll be able to set the blur options + which collections to migrate.
4. Run the script: tsx ./src/scripts/blurDataUrlsMigrationScript.ts
5. Let it cook.

Credits

• Shoutout to Paul for being a real one.