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.
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 src="[[ImageResize? &src=`assets/images/sample.jpg` &width=`300` &height=`200`]]">
|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.