Image cropping in SilverStripe is pretty minimalistic. You don't crop images at all inside the CMS, you can however crop images in the SilverStripe template engine. As a SilverStripe template designer you can use the $CroppedImage(width,height) tag (among other image resizing methods) to ensure that your beautiful design isn't ruined by an image that is too tall or wide for a particular purpose or UI.
That's great, but the challenge is that content authors have no control over how these images are cropped. When they select an image in the CMS, $CroppedImage trims it evenly starting from the centre of the image outwards, and the subject of the image can often be clipped or lost completely if your image composition is off-centre as you can see below.
Going elsewhere for crops
To get around this limitation you could take your image in to a graphics editor, manually crop it to the aspect ratio it's destined for, then re-upload it. If you're happy doing that, great! If you're my average client, you have replied "Graphics what-now?".
It would be better if you could get an acceptable crop without having to leave the CMS.
Better crops in two clicks
The FocusPoint SilverStripe module extends the Image class. Anytime you edit an image in the CMS you have the option of setting a focus point on the image. The focus point starts in the centre but you can move it anywhere you like depending on the subject you need to highlight in your image when it is cropped. When used in conjunction with the template tag $CroppedFocusedImage, the image will be cropped in a way that preserves that point. One click to set the focus point, one click to save the image. Problem solved!
Installing the FocusPoint module
Composer (prefered installation method)
To install via composer (the PHP dependancy manager used to best keep SilverStripe modules in check), ensure you have composer installed then run the following on your command line:
composer require jonom/focuspoint dev-master
Alternatively if your prefer directly editing your projects composer.json requirements you can add:
"jonom/focuspoint": "dev-master"
Manual Install
Download the module from github, unzip, place the directory in your project root named 'focuspoint' and run a dev/build?flush=1.
After installation you will need to replace any instances of $CroppedImage in your templates with $CroppedFocusedImage. Ideally, this module would overload the CroppedImage method so it could be dropped in to a project with no changes to templates. For some reason while creating the module I could not get this to work (if you know how to achieve this please let me know and leave me a comment below or send a pull request on github).
Responsive cropping with jQuery
The FocusPoint module for SilverStripe began because I wanted to create a full screen image slider where the image would always look good no matter what the aspect ratio of the browser window was. This meant positioning the image within the frame in a way that preserved the subject of the image. After setting that up I realised I could apply the same concept to improve the CroppedImage method for SilverStripe.
You can see an example of 'responsive cropping' here, and the sample files are included in the module. If it is useful and there is enough interest, I'll release jQuery FocusPoint as a standalone plugin (again just leave a comment below).
What FocusPoint isn't
This module won't give you the ability to crop images inside the CMS. FocusPoint assumes that the images you've uploaded already have a nice composition, and it helps you get the best out of your images when a template requires they be cropped.
Next steps
This is my first time creating something for the SilverStripe open-source community. I'd love to hear your feedback, suggestions for improvement, or examples of how you're using FocusPoint. Just leave me a comment.
Jono Menz is a freelance graphic designer turned web developer from Adelaide, Australia and one of our SilverStripe Developer Community members. Anything he knows about PHP he learned from tinkering with SilverStripe. When he's not copy/pasting code from Stack Overflow, Jono likes to take photos of frustrating subjects like wildlife, water drops and snow flakes. You can get in touch with him at jonathonmenz.com.
