1 year ago

How to handle image gallery to have the same height and width

Posted 1 year ago by zefex

I'm creating a website and I will allow the users to upload multiple images. In the first page of the website has a list of images organized in Bootstrap rows. Bootstrap rows are responsive, meaning that if I put an image there it will resize and fit nicely, the problem is the height. As each user will have an image with different height I have a problem where the users might upload different images with different heights and something like this happens (with Bootstrap):

I want to keep the images with the same height - but not by using CSS or JS.

I was wondering: what is the best way to handle this kind of situation?

1 - Use some kind of Vue component to crop the image and make it on the same aspect ratio for every single image and on the server side (Laravel) resize the image to multiple sizes but keeping the aspect ratio? 2 - Crop and resize on the server side using Laravel - this one I'm not sure cause i might crop something important from the picture. Or maybe only resizing by the height and keeping the aspect ratio (the image might be small on the width in some cases right?)

The first option is valid, the problem is that MOST or all of the Vue plugins I found for croping is for single files online, I can't find one that allows me to create multiple and upload them later using Laravel. (I also need to create a kind of checkbox so the user can select which image is the default (to appear on the front of the website - the rest will be in the gallery)

Any tips on how I can do this? Thank you very much

Please sign in or create an account to participate in this conversation.