u/chad_hill

So while it is available, I am still perfecting/testing this images plugin. But while using it I caught a showcase example I want to share.

In the video you can see an improperly formatted image, so using the block relationship I go and edit the images hotspot (focal + zoom). I check and can see the image has many image variants generated. Then on save that specific images placements on the site are atomically updated, and the now incorrect variants are deleted and jobs are created and queued to prewarm new images.

Features include but not limited to:

On Demand Image Variant Generation
Automatic Srcset Generation
Smart Image Prewarming
Blurhash & Webp Placeholders
Upload To Delivery Full Image Pipeline Handling

This image plugin is my attempt at "Perfect" image handling. Where its fully featured, perfectly optimized, and super simple to use. I think I'm getting close, but curious to hear what others think.

Repo / Docs

Built a type safe seeding plugin that helps with asset uploading and automatically handles references so you don't have empty relationships. It also hooks in to payload startup so that the defineSeed function types are automatically up to date with the latest schema , so you know if your writing incorrect seed data.

Think it turned out well, and has made working with AI to generate starting/placeholder content a breeze.

Docs Link / Github Link

Here's a simple example: (Taken from the docs quick start section)

// src/collections/Media/seed.ts
import { defineSeed } from '@pro-laico/payload-seed'

export default defineSeed('media', ({ file }) =&gt; [
  {
    _key: 'serviceImg',
    _file: file('service-a.jpg'), // assets/media/service-a.jpg
    alt: 'Consulting',
  },
])

// src/collections/Services/seed.ts
import { defineSeed } from '@pro-laico/payload-seed'

export default defineSeed('services', () =&gt; [
  {
    _key: 'consulting',
    title: 'Consulting',
  },
])

// src/collections/Posts/seed.ts
import { defineSeed } from '@pro-laico/payload-seed'

export default defineSeed('posts', ({ ref }) =&gt; [
  {
    _key: 'launch',
    title: 'We launched',
    heroImage: ref('media', 'serviceImg'),
    relatedService: ref('services', 'consulting'),
  },
])

// src/payload.config.ts
import { buildConfig } from 'payload'
import { seedPlugin } from '@pro-laico/payload-seed'
import media from './collections/Media/seed'
import services from './collections/Services/seed'
import posts from './collections/Posts/seed'

export default buildConfig({
  plugins: [
    seedPlugin({
      definitions: [media, services, posts],
    }),
  ],
  // ...
})

Curious to hear what people think about it.

I built an Images Plugin

I built a Seeding Plugin