Customize Sitecore Image field to add focal point picker for cropping

Sitecore Version: 9.3

Often with responsive designs, we come across the need to output images on mobile with different aspect ratio than the images on desktop on a given component.
This gives the option to go with either route to stick with out of the box features:

  • Create distinct multiple fields for desktop and mobile images – so the content author can manage different images, resized & cropped based on need of the design for the breakpoints. A fallback strategy can be worked upon from back end – which would use the desktop image if mobile image isnt managed. Although this does increase the work of the content author, and results in a lot of additional media in the CMS, it is surely the most straight forward approach. This approach to storing media, along with the use of markup which expects breakpoint specific media, like <picture> tags would definitely do the trick.
  • Maintain a single image across desktop and mobile, and crop images as needed from front end to suit mobile designs – this comes with the flip side that cropping would need to stick with centre crop – and this might not be suitable on certain images with text – or where the focal point is off centre – like say a person’s face!

In continuance to the second option above, using an image resizer plugin in tandem would allow for optimized media sizes and better website performance.

The remaining con to be addressed is the focal point for cropping. Allowing for a provision to the content author to select a focal point for cropping, addresses this very real concern in the best manner possible.

You can either update the existing image field in Sitecore or create a new custom field – this would depend on you and the place you are at on your project.

This blog post helped me immensely while coming up with this solution: Sitecore Custom Field – Image Coordinate Picker

You can find the complete code along with Sitecore items page in Github

The end result here, is a new custom field (or updated Image field as mentioned)

Clicking on the ‘Pick Focal Point’ opens the new window, where the content author can click and choose a focal point.

Note: the focal point data is stored in the ‘Description’ field of the Media Library item itself as per this fields code.

In addition to this, you would ideally write some sort of helper method, which would pull this information from the media item and render the same in the markup, so that the FE code can access these coordinates to crop the media in an appropriate manner, possibly using some sort of plug in, like the Focal Point Crop.

Here’s a look into the Sitecore core DB updates:

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s