ImageResize snippet for MODx Evolution

This snippet allows you easily resize and crop JPG, GIF and PNG images using my ImageResize PHP class. In general, it is just a shell for that class, but its main feature is that all resized image copies are stored in cache and will not be recreated each time the snippet is called. In addition, if the original image is changed or replaced by another image with same file name, the snippet will detect it and recreate the cached copy.


Version: 1.1
File size: 5.35 KB


1) Unzip the downloaded archive and place "imageresize" folder to "assets/snippets/" directory of your installed MODx Evolution.

2) In MODx Manager area create new snippet and call it "ImageResize". Copy contents of the "ImageResize.snippet.txt" file into snippet you just created and save it.


The basic snippet usage example looks like this:

[[ImageResize? &src=`assets/images/sample.jpg` &width=`300` &height=`200`]]

The above line of code should downscale image to maximum width of 300 pixels and maximum height of 200 pixels with keeping of original proportions. The result returned by snippet is url to resized copy of the original image (of course, make sure the path to original image is correct). Something like:


If you need to display this image in HTML document, just wrap the snippet with img tag:

<img src="[[ImageResize? &src=`assets/images/sample.jpg` &width=`300` &height=`200`]]">

Snippet parameters

Name Description Default
src Source image url (absolute or relative to base url).
width New image width.
height New image height.
longSide Sets long side size based on image orientation.
shortSide Sets short side size based on image orientation.
resize If set to 0, image will be cropped without resizing. 1
upscale If set to 1, small images is allowed to be upscaled. 0
fill If set to 1, image will be resized and cropped to fill the canvas. 0
keepProportions If set to 0, proportions will not be preserved on resize. 1
cropPositionX Horisontal cropping position ('left', 'center', 'right' or numeric value). center
cropPositionY Vertical cropping position ('top', 'center', 'bottom' or numeric value). center
qualityJPG Quality for JPG images (0..100; best is 100).
qualityPNG Quality for PNG images (0..9; best is 0).


The images cache is separate from MODx documents cache. If you clear your site cache from Manager area, it will not affect the stored copies of resized images. However, if you need to clear your images cache, you have to manually delete the assets/cache/imageresize folder from your server.