Have you ever faced the problem, that you created a layout using an image with a defined aspect ratio, but the image you want to use has a different aspect ratio? Or do you need an image in a getResources output with a different aspect ratio than the original image displayed on another resource? In both cases, the image you want to use can't be cropped automatic, because the subject of the image may not be in the center.
This is when the freshly updated Image+ package could be very useful. It's a custom template variable, which lets you select and crop the image during editing a resource. And it includes a snippet that allows you to output the cropped image with other options too.
Aside from being able of cropping an image, the Image+ template variable does something else a regular image template variable can't do: guarantee a minimal height and width of the selected image. When that happens, Image+ will warn the editor and does not allow to use the image.
All input and output options of the Image+ custom template variable and the snippet properties are described in the comprehensive documentation. Now let's look at some examples of how you can use Image+.
Example 1: Keep the Crop
If you want to use the the selected crop of an Image+ image, but you want to display the image in a different size, you can use the following ImagePlus snippet call:
[[ImagePlus? &tvname=`imageplus` &options=`w=100&h=50&zc=1` ]]
This call will crop the image first, resizes it to 100px width and 50px height using zoom crop after and returns the url to the image.
Example 2: Responsive Images
If you want to create responsive images that uses a crop i.e for the small size, you can use the following ImagePlus snippet call:
[[ImagePlus? &tvname=`imageplus` &options=`w=200` &type=`tpl` &tpl=`ImagePlus.responsive` ]]
Assuming you are using the pThumb MODX crop engine you can use the following ImagePlus.responsive chunk:
<picture> <source media="(min-width: 36em)" srcset="[[+source.src:pthumb=`w=1024`]] 1024w, [[+source.src:pthumb=`w=640`]] 640w, [[+source.src:pthumb=`w=320`]] 320w" sizes="33.3vw" /> <source srcset="[[+source.src:pthumb=`[[+crop.options]]&w=640`]] 2x, [[+source.src:pthumb=`[[+crop.options]]&w=320`]] 1x" /> <img src="[[+url]]" /> </picture>
The cropped versions will be served on all browser viewports smaller than 36em in this example.
In an upcoming version of Image+ you will be able of defining more than one crop for even better support of responsive images.