From 521b49afbf79d043dc27283030e86d3c0bb46751 Mon Sep 17 00:00:00 2001 From: James Date: Sun, 14 Mar 2021 15:50:44 -0400 Subject: [PATCH] docs: adminThumbnail feature --- docs/upload/overview.mdx | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/docs/upload/overview.mdx b/docs/upload/overview.mdx index 2fbe9f83c2..9b976a557f 100644 --- a/docs/upload/overview.mdx +++ b/docs/upload/overview.mdx @@ -42,7 +42,7 @@ Every Payload Collection can opt-in to supporting Uploads by specifying the `upl | **`staticURL`** * | The base URL path to use to access you uploads. Example: `/media` | | **`staticDir`** * | The folder directory to use to store media in. Can be either an absolute path or relative to the directory that contains your config. | | **`imageSizes`** | If specified, image uploads will be automatically resized in accordance to these image sizes. [More](#image-sizes) | -| **`adminThumbnail`** | Which of your provided image sizes to use for the admin panel's thumbnail. Typically a size around 500x500px or so works well. | +| **`adminThumbnail`** | Set the way that the Admin panel will display thumbnails for this Collection. [More](#admin-thumbnails) | *An asterisk denotes that a property above is required.* @@ -111,6 +111,28 @@ The Payload Admin panel will also automatically display all available files, inc Behind the scenes, Payload relies on [`sharp`](https://sharp.pixelplumbing.com/api-resize#resize) to perform its image resizing. You can specify additional options for `sharp` to use while resizing your images. +### Admin thumbnails + +You can specify how Payload retrieves admin thumbnails for your upload-enabled Collections. This property accepts two different configurations: + +1. A string equal to one of your provided image size names to use for the admin panel's thumbnail (seen in the example Media collection above) +1. A function that takes the document's data and sends back a full URL to load the thumbnail. For example, to dynamically set an admin thumbnail URL, you could write a function that returns a string pointing to a different file source: + +**Example custom Admin thumbnail:** +```js +const Media = { + slug: 'media', + upload: { + staticURL: '/media', + staticDir: 'media', + imageSizes: [ + // ... image sizes here + ], + adminThumbnail: ({ doc }) => `https://google.com/custom-path-to-file/${doc.filename}`, + } +} +``` + ### Uploading Files