How to make a beautiful background if the photo / picture is in a vertical position?

Question

PHP

Screenshot from YouTube))
Is it possible to make the same "smart" background using javascript, php, etc.? If the size of the photo should be for example 600x600 but the photo is in a vertical position and there are white margins on the sides? Maybe there are some libraries? Google didn't work, I don't even know what to call it))

Answer 1

I can describe the image construction algorithm in words:
1) Calculate the width of the sidebar ((final width - original width) / 2)
2) Create a temporary image as wide as the sidebar, but n pixels wider (depending on the blur strength)
3) Copy to temporary image the left side of the image (blunted by the imagecopy function), aligning it to the left.
4) We blur with the imagefilter function, select the blur strength yourself to your artistic taste.
5) Create the final image
6) Copy our blurred image to the left side of the final image
7) Copy the right side of the original image to the temporary image with right alignment
8) Repeat the blur for it
9) Copy to the final image on the right edge
10) Finally - copy the source image to the final image in the center (left coordinate = ((final width - original width) / 2)
11) Save the image and free the memory (however, PHP itself will free)

Answer 2

There is a blur filter, google blur css, in fact, you can implement it in different ways.
When you hover or click on the photo, we get the photo by the link, and we smear the background behind with this blur, according to the structure, something like this:

<div class="blur"></div>
<div class="image">
<a href="image/1.jpg" class="popup_image"><img src="image/1sm.jpg" alt="" title=""></a>
</div>