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 it 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 the case of mass loading of images)
- PHP only works the first time (when the image of the desired size does not exist yet)
- The dimensions of the desired image appear only on the template side, i.e. roughly speaking in html
')


One of the downsides of my technology, I see that it is necessary to handle the 404th error with php-code.

Now the bottom line:

Suppose 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 image, reduced to the required size. Let's say 150 pixels in height

We just connect the picture with the url:

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

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

Accordingly, the next time the request goes specifically to the existing already reduced image. If the layout designer wanted suddenly 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 the reduction in height (h150), it was also possible to reduce in width or on the maximum side, passing accordingly. letter instead of h.

That's all))

I hope that I did not invent a bicycle ...