fix: use thumbnailUrl for upload documents in folder view (#13368)
### What? Fix the folder view for upload documents only using `formatFolderOrDocumentItem()` function and only if the upload is an image, even when there's a `thumbnailURL` available. ### Why? Folder view for upload collections (especially those with sharp resizing disabled) renders different thumbnails between the folder view and list view. With sharp resizing disabled and an `adminThumbnail` fn provided, the list view will correctly render optimised images, while the folder view renders full source images - resulting in a huge discrepancy in loaded image sizes. ### How? We're passing the `value.thumbnailURL` **before** the `formatFolderOrDocumentItem()` call rather than passing it directly as a function parameter to cover cases where non-image uploads have a `thumbnailURL` defined. Fixes #13246
This commit is contained in:
@@ -30,15 +30,17 @@ export function formatFolderOrDocumentItem({
|
||||
if (isUpload) {
|
||||
itemValue.filename = value.filename
|
||||
itemValue.mimeType = value.mimeType
|
||||
itemValue.url = isImage(value.mimeType)
|
||||
? getBestFitFromSizes({
|
||||
sizes: value.sizes,
|
||||
targetSizeMax: 520,
|
||||
targetSizeMin: 300,
|
||||
url: value.url,
|
||||
width: value.width,
|
||||
})
|
||||
: undefined
|
||||
itemValue.url =
|
||||
value.thumbnailURL ||
|
||||
(isImage(value.mimeType)
|
||||
? getBestFitFromSizes({
|
||||
sizes: value.sizes,
|
||||
targetSizeMax: 520,
|
||||
targetSizeMin: 300,
|
||||
url: value.url,
|
||||
width: value.width,
|
||||
})
|
||||
: undefined)
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
@@ -2,7 +2,19 @@ import type { CollectionConfig } from 'payload'
|
||||
|
||||
export const Media: CollectionConfig = {
|
||||
slug: 'media',
|
||||
upload: true,
|
||||
upload: {
|
||||
adminThumbnail: ({ doc }) => {
|
||||
if (doc.testAdminThumbnail && typeof doc.testAdminThumbnail === 'string') {
|
||||
return doc.testAdminThumbnail
|
||||
}
|
||||
return null
|
||||
},
|
||||
},
|
||||
folders: true,
|
||||
fields: [],
|
||||
fields: [
|
||||
{
|
||||
name: 'testAdminThumbnail',
|
||||
type: 'text',
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user