I'm creating a classified website and in the main page and other pages will be a listing of ads, meaning that the user will create his ad and upload a few pictures, specially one that will be in the main page, the thing is that each image can have different sizes and I need to resize/crop them before. What is the best way to handle upload of images with different sizes? What is the right way to resize/crop them to keep the same aspect in the entire website and avoid images messing up the entire layout?
I would allow users to crop it themselves with a cropper. I've used this one in the past: https://github.com/zhanziyang/vue-croppa
Otherwise, if you want to crop it in the backend, take a look at: https://docs.spatie.be/laravel-medialibrary/v7/converting-images/defining-conversions/
You can do all of that with Image Intervention: http://image.intervention.io/
the ultimate solution for image resizing etc http://image.intervention.io/ its easy and popular. just try it :)
@sti3bas In this case make the user resize the image in an determined aspect ratio right? Like a vertical image aspect ratio instead of a defined width and height. I ask this cause the same image might be used in different places with different width and height and in the backend use some kind of library such as intervention mentioned by @cronix and @fida - am I right? Imagine this situation: the image gallery on the main page is vertical, like an ecommerce with clothes, if the user tries to upload a horizontal image how would intervention handle cropping it in a vertical manner? That is why I thought about using a frontend component to make the user crop the image himself in a vertical aspect ratio and on the backend intervention would resize the image to different sizes keeping the aspect ratio, would that work or am I complicating things here?
@zfdeveloper you would still need to set the output height and width for the cropper, but yeah, you would be able to control the aspect ratio this way. I would ask to upload the photo in the biggest dimensions (1 x horizontal and 1 x vertical) used on site and then would create smaller ones by cropping it in the backend maintaining the aspect ratio.
I think that I could also check using javascript if the image select is too small or even create a custom rule in Laravel to check if the image size is too small and return an error saying that the user needs to select a bigger image.
I used this in the past https://pqina.nl/slim/ (its a paid for Javascript library) but it still takes some time to get it to do everything required.
I've been thinking about using cloudinary more recently https://cloudinary.com/ as they will handle cropping, resizing and storage
Cloudinary 25 credits free is awesome, I really liked it, for real, I will think about it. To use in the beginning might help a lot. The problem is the plan difference, if I want a little bit more credits I will have to pay $99 to go from 25 to 225, it's a lot and kinda unnecessary.
Please or to participate in this conversation.