Preview and Resize images in html

Inspired by almost the same post

I remembered how I once solved this problem. My method is very similar but has several additional advantages ... and minuses)))

Pros:
- Pictures are generated only when they are needed (i.e. we do not store unnecessary images and do not load the server in case of mass loading of images)
- PHP only works for the first time (when the picture of the desired size does not exist yet)
- The dimensions of the desired image appear only on the side of the template, i.e. roughly speaking in html



One of the drawbacks of my technology is that I need to handle the 404th error with php code.

Now the essence:

Let's say there is a file on the server /images/u324/myfoto.jpg

In accordance with the design, somewhere we need to insert a version of the picture, reduced to the required size. Let's say 150 pixels in height.

We simply connect the image with url:

/resize/h150/images/u324/myfoto.jpg

The processor of the 404th error understands what they want from it and creates a picture of the specified size at the specified address well and returns it in response.

Accordingly, the next time the request will go specifically to the already existing thumbnail. If the layout designer suddenly wanted not 150 pixels but 170 - only the url of the connected image in the template changes and nothing else (I liked it the most)

In addition to decreasing the height (h150), it was also possible to reduce the width or the maximum side, passing accordingly. letter instead of h.

That's all))

I hope not the bicycle invented ...