How to store the same image twice with additional smaller variant of the original photo-CodePudding

I'm using jQuery Fancybox Plugin which works pretty good. The problem is that I don't like the fact that on page load the original image with its size is loaded. I need to somehow load a smaller variant of this picture on page load and when clicked to show the original one. It's very easy to do when it comes to fancybox. But the storing process of the smaller variant is confusing me. On upload, I'll store 2 images - the original, and the resized (smaller variant) one. The div that is containing the smaller variant of the photo is set to max-width:500px;max-height:150px; and that's how the smaller variant photo should be resized. Max width of 500px and Max height of 150px. Another question is how will I save the aspect ratio of the image? And how will I determine whether there is a need to store a second (smaller) photo at all. I'm so confused. I'm waiting for you replies. Thanks in advance.

smaller variant visualization1

original variant - fancybox opened visualization2

I'm using Image Intervention.

My project is on Laravel 8.

CodePudding user response：

Yes, you need to store 2 images on your storage.

You need to define either width or height to main aspect ratio of the image. Check the below code

// open an image file
$img = Image::make('public/foo.jpg');

// now you are able to resize the instance with maintaining aspect ratio
$img->resize(300, null, function ($constraint) { $constraint->aspectRatio(); });


// finally we save the image as a new file
$img->save('public/foo_sm.jpg');

I personally like spatie media package (Which uses image intervention in behind). It handles media on separate table using polymorphic relation. Have a look into the docs, it's amazing

https://spatie.be/docs/laravel-medialibrary/v10/introduction