Make template return raw image

Is there a way to make a template output an image after using thumb() or something like that, as opposed to outputting an html img tag?

On my site I have javascript which detects the size of the image that I want to retrieve based on the page layout and then uses a PHP library (SLIR) to do the re-sizing. The problem is, the re-sizing library seems to be slow so I want to try using Kirby’s system for re-sizing and caching images. Currently the javascript calls a PHP page where I do a bit more mathematics and then I include the re-sizing library. Now instead I am trying a redirect to a Kirby page.

I have tried creating a simple Kirby template like this:

$im = new Media('/portfolio/test.jpg', url() . '/portfolio/test.jpg') ;
echo thumb($im);

And then from my custom PHP script I say


and “/image-test” uses the simple template above. It works fine if I view the image on it’s own. But images do not load when they are embedded in a page. I know this has something to do with headers and content-type or whatever, but I am not sure what to do in this situation.

I don’t quite understand why you need two php scripts, your custom script and the template? how is the information from the script/template returned to the javascript?

I guess at this point I wouldn’t need two PHP scripts. I could put it all in the template. I don’t return anything back to the javascript. The javascript is just used to figure out the dimensions needed and generate a URL for an img source or a background. The URL is like “/image-resizer/?width=400&height=300”.

But I did some experiments with another image re-sizing library and it wasn’t any faster, so I don’t expect Kirby’s to be any better anyway. I think I just have mysterious image cache problems because sometimes the images still load slowly even though they should be cached.

But if there is an answer to my original question perhaps it would be helpful for someone else to know down the line.