@beemstream/keystone-document-gallery v2.0.6

Keystone 6 Document Gallery Block

Manage and upload your post images with a gallery block for powerful Keystone's Document Editor!

Installation

Install the yarn package:

yarn add @beemstream/keystone-document-gallery

Usage

Make sure you configure image uploading in keystone.ts config, otherwise it will not work:

images: {
  kind: 'local',
  type: 'image',
  generateUrl: path => `${process.env.SERVER_URL}/images${path}`,
  serverRoute: {
      path: '/images',
  },
  storagePath: 'public/images',
},

Add a new list to your schema (you can set your own list key, if needed):

Image: list({
    fields: {
        name: text(),
        image: image({ storage: 'images' }), // choose storage provider
        publishDate: timestamp(),
    }
})

Create component-blocks.tsx in your root directory and import the gallery block (don't forget to change listKey, if it is different):

import { gallery } from "@beemstream/keystone-document-gallery";

// naming the export componentBlocks is important because the Admin UI
// expects to find the components like on the componentBlocks export
export const componentBlocks = {
    gallery: gallery({
        listKey: "Image",
    }),
};

Import the file in schema.ts:

import { componentBlocks } from './component-blocks';

Add the component blocks to the document configuration for the list that you want (e.g. Post):

Post: list({
    ...
    content: document({
        ui: {
            views: require.resolve('./component-blocks')
        },
        componentBlocks
    })
}),