How to handle different image aspect ratio's and cropping within a media library
Hi All, i am curious on how you handle different image aspect ratio's? I am used to having one global media library and then defining the image crop dimensions within a field. This is (correct me if i am wrong) not possible within payload. What is the best way to configure a system for for example landscape and portrait images? Setting up two different collections or is there a better solution?
hi, @mvdve ! Is this what you're looking for?
https://payloadcms.com/docs/upload/overview#image-sizesin this page there is an "Example Upload collection" which I think does what you described
Hi @arielarial thanks for the link. This is for the whole collection. Say you have one Media collection, with images in landscape and portrait and you want to crop both, a very wide slider image will also be cropped to portrait which is not useful. Normally i would set the crop dimension within the image field. So for example a Page collection with a portrait image would have a portait crop and an image within Slider collection would have a landscape crop. This would result in one crop per image instead of two. I Could solve this by create two Media collections, one for portrait images and one for landscape, but this would be less user friendly for the admin. Any suggestions?
Got it now. I think that I'm used to this kind of "useless crops" because it is how wordpress deals with them, and never bothered about it.
I actually like that these crops are created because if by any change I need, they're already there.
But anyway, I don't know if payload can create image sizes conditionally, tough.
That's a good take on in, maybe best to just accept it 🙂 Any idea on how to rerun resizing after adding a new image size? can't find it in the docs anywhere
@mvdve You can run a script to regenerate images :
https://github.com/payloadcms/payload/discussions/1834@ElliotYoYo Cool thanks, did not find that post. My client wants to use S3 so maybe a lambda which will resize the image on the fly is good option, new territory for me but what the heck..
Payload is handling Media in the same way as Wordpress, not an optimal approach but I can't thing of a better way.
- If you generate image sizes on the fly, the first request will be slow, and you open your application to possible DDOS
- If you set specific sizes per images, the users can't use the whole library
A solution might be to define a set of sizes needed per fields and payload would generate the sizes when selecting an image.
I have used Drupal allot an there you select an image size within the field which references the media library. This works excellent and images are only resized when needed, adding a new size works without resizing the whole library.
@mvdve I'm using payload with Next on a project. I use imagesizes from payload to generate the crops in the maximum size possible, and then Next/image to serve it in avif and optimized for screen dimensions
@ElliotYoYo By any chance, did you use the regenrate media sizes script with payload-plugin-cloud-storage? The way the script is made it only works for media stored locally, couldn't make it work with media stored on the cloud :/
@arielarial ah, i am also starting a nextjs project so i will look in to that
I don't think payload should rely on another module like Next/Nuxt image. If you are creating a static website/mobile application you can't use them
Never used the script sry.
Is the compatibility issue here
filePath: ${staticDir}/${mediaDoc.filename},?
exactly!
my thread is here, if you think of anything (and so we dont mess with this one from mvdve 😅 )
https://discord.com/channels/967097582721572934/1080843016413118544/1080843016413118544No problem, i'm running into the same issues.
Not sure why, but my client insist on using AWS with S3, which makes this a bit complicated. I see that Amazon has a image processing repo for lambda, that could be a nice solution, completely bypassing the payload image resizing system.
Continue the discussion in Discord
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.