Resizing of images in WordPress from within a template

WordPress will provide a number of resized images that sit alongside each image that you upload. These are useful to place into posts and pages, archive listings as thumbnails and in themes. Sometimes you may want a specific size for an image to appear in a theme template, but do not want to set it up as one of the “standard” thumbnail sizes that get applied to all uploaded images.

One existing site I worked on did this using the timthumb script. Within the theme templates, thumbnails were delivered like this:

The upshot of this is that each image resulted in a direct call to a PHP script on the server. The original image URL was passed in as a parameter, as was the new desired size (width and height). The timthumb script would then fetch the image, resize it, then stream the image to the browser.

The script did cache the resized image, which cut down on the amount of CPU needed, but the issue that rose with this hosting was memory usage; calling all these PHP scripts – dozens on some pages – at the same time resulted in many of the scripts running out of memory. The end result is that images on the website would randomly appear and disappear on each page load.

So, we needed a solution. The images needed to be resized on the server, but the resized version also needed to be cached so that it was only resized once. The web page needed to be given a direct URL to the resized image – we do not want to go through a PHP script every time and image was needed.

I found the solution here on stackexchange, and it uses the vt_resize function.

The vt_resize function is added to your theme (in functions.php) and is then available to call in all your theme templates. The equivalent to the above timthumb resize looks like this:

The vt_resize function will take the original image, foo.jpg, resize it, then save it back to the same directory as the original image with the size in the name – foo-215×90.jpg. The URL for that resized image is then returned for use in the theme template.

And that was it – problem solved. All instances of timthumb.php in the theme templates (and there were quite a few) were replaced with a call to vt_resize.

The vt_resize function can be downloaded from this gist here. I’ve also reproduced it below, mainly for my own use, but do check the gist link first in case there have been any updates. I do believe image_resize() has been deprecated in WordPress since 3.5. I’m using this script as it appears in WordPress 3.6, and so far it is behaving. A version of vt_resize in a plugin, that can be maintained and kept up-to-date centrally, would be ideal. WordPress does not support dependences, so this kind of thing is unfortunately not encouraged, meaning that every theme that uses this technique will have its own copy of vt_resize. DRY is not something that WordPress generally prescribes to.


2 Responses to Resizing of images in WordPress from within a template

  1. Jonathan 2014-04-21 at 03:00 #

    Thank, your code has served me much

  2. Kishan 2014-08-29 at 10:15 #

    vt_resize code where the put in my wordpress project ?
    Currently vt_resize.php file include in root and call to theme template file, but not work.
    Pls help me.
    Thank u kishan

Leave a Reply