Blog

Click Me!

Resizing Images On The Fly in Smarty

By Eli Van Zoeren Posted Filed in: ,

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)

Comments

  1. Ron's avatar
    Ron
    Permalink

    This is awesome! I was rewriting some ancient mixed PHP/HTML code in Smarty this evening and thought it'd be nice if a plugin like this existed. Apparently my timing was perfect since you just released this yesterday.

    I had to make two changes to get it to work on my system:

    1) on line 43, I added a strtolower() call to lower-case the file extension because my users had uploaded files with extensions like .JPG, etc

    2) pathinfo() on line 47 was not returning the base filename (that element was blank) so I replaced "$paths['fileBasename'] = $pathInfo['filename'];" with " $paths['fileBasename'] = basename($filePath);". I suspect this isn't exactly what you intended as it seems to include the extension still, but it works fine.

  2. Eli Van Zoeren's avatar
    Eli Van Zoeren
    Permalink

    @Ron: Good catches, both! I just updated the plugin to fix those issues. The second thing you mentioned was due to $pathInfo['filename'] only being added in PHP 5.2. I am now checking and getting the file name in a different way if the first fails.

    Keep the bug reports coming, everyone!

  3. Helge johnsen's avatar
    Helge johnsen
    Permalink

    Hi Eli

    What a fanastic plugin. I have tried to play with it and have one problem. I suppose it's not a bug, but still I can't get it to work.

    Some of the "/" backslash becomes ordinary "\" slashes in the url to my pictures.

  4. Eli Van Zoeren's avatar
    Eli Van Zoeren
    Permalink

    Helge: Are you using a Windows server? I added some code to try and handle Windows-style paths (with backslashes) better, but without access to a Windows box to test it, I am not sure how well my fix works. If you dont mind, can you give it another try and let me know what happens?

  5. Greg's avatar
    Greg
    Permalink

    Great plugin! I need to access images from a directory outside of the parent Smarty directory, but my '../' is stripped from the file path. I assume this is for security purposes, but is there a workaround for this (or an obvious method I'm oblivious to)?

  6. Helge Johnsen's avatar
    Helge Johnsen
    Permalink

    Thanks Eli. Now it works perfect :-)

  7. Justin Jones's avatar
    Justin Jones
    Permalink

    Hey Eli, thanks for such a great plugin!

    I'm using it in conjunction with CodeIgniter, but my reason for posting isn't exclusive to CI.

    I use this scheme when it comes to URLs and path names:

    "/images/file.jpg"

    I'm working on a way to check for this, and modify paths correctly.

  8. Arnaldo's avatar
    Arnaldo
    Permalink

    Hi Eli,

    I installed the plugin inside plugins directory and called it using:

    {imagesize src=$emp_dest[i].logo width=200 height=100} (without brackets in width and height because I get a blank page with them)

    When I load the page, in the place of the images, appears: "Could not create a cache directory under your image directory. Create it manually and try again. "

    I've already created a "cache" directory inside my images directory, but nothing happens.

    Could you help me?

  9. Eli Van Zoeren's avatar
    Eli Van Zoeren
    Permalink

    Arnaldo- Did you create the cache folder under the folder containing the image you want to resize, or under your main images folder? It needs to the former (if the two folders are different). Are you on a linux or Windows server? If you can give me a link to the page you are using it on I will take a look and see what I can figure out.

  10. griffin1987's avatar
    griffin1987
    Permalink

    Hi there,

    Nice plug you got there, but i think you should mention if you use GD, IM or some other type of image library, which you probably do.

    Also, Arnaldo's syntax is wrong, it should be:
    {imagesize src='`$emp_dest[i].logo`' width=200 height=100}
    if you do it correctly. The backticks are for using variables with dot in them as function parameters.

    Best Regards

  11. Tihomir's avatar
    Tihomir
    Permalink

    Hello there,

    The plugin is great and probably one of fewest in the net!
    I installed it in smarty (I am new to the templating engine). I cannot make the plugin to see the image. It says
    "Could not find the file" and the file is there, I tried to use relative and absolute paths (src="images/layout/logo.png"), but nothing.
    I am using wamp in windows. the smarty is configured and working fine.
    I might be probably doing sth wrong. But could you give me an advice, please?

  12. Tihomir's avatar
    Tihomir
    Permalink

    Hi, there!
    I made the plugin working. The problem was that somehow $smarty->_supers did not work and I changed them directly with the php server vars.

  13. Aart's avatar
    Aart
    Permalink
    Thanks a lot for this plugin. Had the same issue with the $smarty->_supers and some errors with handling an image object (with seperated file, folder and other information) but got it going and it's working like a spin.
  14. Andrey's avatar
    Andrey
    Permalink
    I have error
    Fatal error: Uncaught exception 'SmartyException' with message 'template property '_supers' does not exist.' in S:\home\shop\www\smarty\sysplugins\smarty_internal_template.php:668

    Can you hrlp me?

Leave a Comment