Resizing Images On The Fly in Smarty

When I started working at New Media Campaigns last month, I immediately set about learning our custom-made content management system. Although it is generally very well-made and easy to use, I did find that there were things I missed from the other CMSs I have used in my freelance career. High among those was the ability to resize images to particular dimensions within templates. It seemed silly to be creating thumbnails manually for every photo gallery, or explaining to clients that their sidebar images must be 300 pixels wide or the layout would break. Expression Engine has a wonderful Image Sizer plugin. Wordpress and Radiant let you specify a couple of thumbnail sizes per-site that will automatically be created. Why coudn't we do the same thing?

Our CMS uses the Smarty templating system, which I had never used before starting at NMC. This seemed like a good opportunity to dig into the Smarty plugin structure and create a custom function that would take an image file and the desired dimensions and would resize and cache the image.

If there are other options you would find useful leave your requests in the comments section...I will incorporate them if possible. And, of course, if you find any bugs please let me know.

Usage

{imagesize src=$imageUrl [width=200] [height=100] [crop=true] [bw=true] [colorize="#ff0000"] [radius=10] [forcepng=true] [background='#000000'] [alt='Alternate Text'] [title='Image Title'] [class='className'] [id='idName'] [style='inline styles']}

The only required attribute is src. This is the absolute or relative url to the original image file that you want to use. You can optionally pass in alt, id, class, or title attributes, which will be output as they would in a normal image tag.

Finally you will want to give it either a width or a height (if you don't, it will just output the image at its original size). If you specify only one of the two dimensions, the image will be resized proportionally. If you specify both the width and the height it will be resized to fit within those dimensions. Additionally, if you include crop=true the image will be cropped to the exact size you specify. This last option is very handy for creating square thumbnails, for instance. Update: You can now use bw=true to convert the image to black and white, or colorize="#ff0000" to output a monochrome colorized image. radius=x will round the corners with a radius of x. If you give it rounded corners and the file is a JPEG or GIF, you can also use background='#ff0000' to specify the background color, or you can use forcepng=true to ensure the image is saved as a 24-bit PNG with full transparency.

Installation

Download the plugin file and put it in the plugins folder inside your copy of Smarty. That's all you need to do!

Caveats

This is still beta software! I have tested it on several systems, but if it deletes all the images on your server and sends an insulting email to your mother we are not responsible. Please backup before you install.

• You will need to be running the most recent version of Smarty to use this plugin. The plugin interface changed recently to allow plugins to access the $_SERVER variables we need to figure out the path to the cache folder.
• In some cases when you are using mod_rewrite on your server and a relative image url you will get an error because it can't calculate the cache folder. If this happens, try using relative urls.
• Depending on how your server is set up, you may have to manually create a cache folder in the same folder as the image you are trying to access.

Changelog

• 0.9: Initial public release. (7/22/09)
• 0.91: New crop attribute, no longer caches images that don't need resizing, code is better commented. (7/23/09)
• 0.92: Fixed the issues Ron reported in the comments. (7/24/09)
• 0.93: Added style attribute. Better handling of backslashes. (8/25/09)
• 1.0: Added bw, radius, and background attributes. (10/27/09)
• 1.0.1: Added forcepng attribute. (2/3/09)
• 1.0.2: Added colorize attribute. Better error reporting: errors are now written as html comments, so as not to break your design if an image is missing. (2/3/09)
• 1.0.3: Fixed bugs introducted in previous update. (2/4/09)