sizes
and responsive srcset
#235
Replies: 2 comments 4 replies
-
Hey Richard —
I am not 100% following here. You can specify any size(s) you want and Payload will auto-resize, including specifying exact aspect ratios. Here is an example for how to do that: const Media = {
slug: 'media',
access: {
read: () => true, // Everyone can read Media
},
admin: {
useAsTitle: 'filename',
},
upload: {
adminThumbnail: 'card',
imageSizes: [
{
name: 'card',
width: 640,
height: 480,
},
{
name: 'portrait',
width: 768,
height: 1024,
},
{
name: 'square',
width: 1200,
height: 1200,
},
{
name: 'feature',
width: 1024,
height: 576,
},
],
},
fields: [
{
name: 'alt',
label: 'Alt Text',
type: 'text',
required: true,
},
],
};
export default Media; Do you mean that if you were to upload, say, a 4x5 image, you would want it to crop down to smaller sizes, but always retain its original ratio? Soo, you'd have no way of knowing what the predefined sizes would be at config-level? If this is the case, we can extend our config typing to allow https://sharp.pixelplumbing.com/api-resize#parameters If my second assumption is correct, this would be a quick change for us. One that we should likely do anyway, actually. What do you think? |
Beta Was this translation helpful? Give feedback.
-
I wonder, what's the point of defining these image sizes, when we can resize on the fly with next/image? |
Beta Was this translation helpful? Give feedback.
-
I'm interested in leveraging nextjs's responsive sizes on the frontend and I thought that I could maybe use the
sizes
property on images within payload.Unfortunately the
sizes
property seems pretty heavily geared toward thumbnails which means I might have to make my own implementation.Do you think it'd be difficult to extend the
sizes
functionality to allow for resizing that maintains the image aspect ratio?Beta Was this translation helpful? Give feedback.
All reactions