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

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.

I'm using Image Intervention.

smaller variant visualization1

original variant - fancybox opened visualization2

Nakov

4 years ago

Best Answer

Level 73

Create a thumbnail using Intervention library and display that one: https://artisansweb.net/create-thumbnail-in-laravel-using-intervention-image-library/

lat4732

4 years ago

Level 12

@Nakov I ended up with this code even before your answer

$width = 500; // max width
$height = 150; // max height
$img = Image::make($uploaded_file);
$img->height() > $img->width() ? $width=null : $height=null;
$img->resize($width, $height, function ($constraint) {
    $constraint->aspectRatio();
});

but yeah

Please or to participate in this conversation.