Payload Media

Media.ts

import { lexicalEditor } from '@payloadcms/richtext-lexical';
import * as mime from 'mime-types';
import type { CollectionConfig, Field, PayloadRequest } from 'payload';

export const Media = (additionalFields?: Field[]): CollectionConfig => {
    return {
        slug: 'media',
        access: {
            read: () => true,
        },
        fields: [
            {
                name: 'alt',
                type: 'text',
                required: true,
            },
        
        ],
        upload: {
            staticDir: 'media',
            imageSizes: [
                {
                    name: 'webp',
                    formatOptions: {
                        format: 'webp',
                        options: {
                            quality: 80,
                        },
                    },
                },
                {
                    name: 'avif',
                    formatOptions: {
                        format: 'avif',
                        options: {
                            quality: 80,
                        },
                    },
                },
                {
                    name: 'thumbnail',
                    width: 200,
                    position: 'centre',
                },
                {
                    name: 'thumbnail_webp',
                    width: 200,
                    position: 'centre',
                    formatOptions: {
                        format: 'webp',
                        options: {
                            quality: 80,
                        },
                    },
                },
                {
                    name: 'thumbnail_avif',
                    width: 200,
                    position: 'centre',
                    formatOptions: {
                        format: 'avif',
                        options: {
                            quality: 80,
                        },
                    },
                },
                {
                    name: 'mobile',
                    width: 500,
                },
                {
                    name: 'mobile_webp',
                    width: 500,
                    formatOptions: {
                        format: 'webp',
                        options: {
                            quality: 80,
                        },
                    },
                },
                {
                    name: 'mobile_avif',
                    width: 500,
                    height: undefined,
                    formatOptions: {
                        format: 'avif',
                        options: {
                            quality: 80,
                        },
                    },
                },
                {
                    name: 'tablet',
                    width: 800,
                },
                {
                    name: 'tablet_webp',
                    width: 800,
                    formatOptions: {
                        format: 'webp',
                        options: {
                            quality: 80,
                        },
                    },
                },
                {
                    name: 'tablet_avif',
                    width: 800,
                    formatOptions: {
                        format: 'avif',
                        options: {
                            quality: 80,
                        },
                    },
                },
            ],
        },
    };
};