FocusPoint: Smarter Image Cropping for SilverStripe

Posted by Jonathon Menz on 31 January 2014

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.

Before using FocusPoint subjects cropped poorly

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!

After using FocusPoint crops account for subjects in images

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

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.


Post your comment

Note: Comments are moderated and won't show until they are approved

Comments

  • That is great work Jono, thanks! Overloading the CroppedImage method would be great but a quick search and replace in your template folder is an easy task.

    Thanks again.

    Posted by Martin, 5 months ago @martinduparc

  • This is a really useful module, huge thanks for developing it. Really handy for building sites where designers like to use the same image at 10 different sizes / crops :)

    Posted by Colin Richardson, 6 months ago @feejin

  • Great idea, I can see us using this on almost all cleint projects. I'm particularly interested in your responsive cropping—would love to see it spun out as a standalone jquery plugin.

    M :)

    Posted by Michael Bollig, 7 months ago @tweetbollig

  • Thanks for the kind words guys!

    Posted by Jono, 7 months ago

  • Great! I can't wait to play with this. Finally a way to deal with the art direction issue with responsive images and layouts in the CMS.

    Posted by Richard Rudy, 7 months ago @thezenmonkey

  • Love this module - install it on every SS site i have done since i found it.
    One of the most usefull modules imho.
    Thanks for writing it and sharing ofc :-)

    Posted by Thomas B. Nielsen, 7 months ago @nobrainerweb

RSS feed for comments on this page | RSS feed for all comments

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.