How to handle different image aspect ratio's and cropping within a media library

mvdve2 years ago

13

• 

  arielarial2 years ago

  hi,

  @557183523879124992

  ! Is this what you're looking for?

  
  https://payloadcms.com/docs/upload/overview#image-sizes
  
  

  in this page there is an "Example Upload collection" which I think does what you described

• 

  mvdve2 years ago

  Hi

  @736673642158620680

  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?

• 

  arielarial2 years ago

  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.

• 

  mvdve2 years ago

  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

• 

  elliotyoyo2 years ago

  @557183523879124992

  You can run a script to regenerate images :

  https://github.com/payloadcms/payload/discussions/1834
• 

  mvdve2 years ago

  @280062818890547200

  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..

• 

  elliotyoyo2 years ago

  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.

• 

  mvdve2 years ago

  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.

• 

  arielarial2 years ago

  @557183523879124992

  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

  
  
  @280062818890547200

  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 :/

• 

  mvdve2 years ago

  @736673642158620680

  ah, i am also starting a nextjs project so i will look in to that

• 

  elliotyoyo2 years ago

  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},

  ?

• 

  arielarial2 years ago

  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/1080843016413118544
• 

  mvdve2 years ago

  No 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.