Better editorial image manipulation tools in Sitecore CMS

Question

I often have issues with sites that have multiple aspect-ratios in renderings which reference a single media item.

For example: On a listing page a 1:1 aspect ratio (square) thumbnail is used to list several images, yet on an article detail page that same media item is displayed in a 16:9 (widescreen) aspect ratio across the top of the page.

The causes issues with content editors who don't carefully crop their source image before upload. Instead they upload a single image which may work for one aspect ratio well, but would be less-than ideal for the square thumbnails.

How have you solved this problem in Sitecore?

Ideally you'd have a tool in the Media Library which allowed graphical selection of a focal point in the image and a dynamic image resizing library which attempts to keep that focal point as close to the center of the image throughout all resizes and aspect ratio changes. Bonus points if this tool can automatically make focal point suggestions based on machine learning ;)

Are you using a community module? A third party product? Or do you just rely on consistent aspect ratios and avoid the issue?

Answer 1

We had exactly this problem to solve on the current project that I'm working on.

I wanted to use something like this for Umbraco which allows you to set a focus point:

https://our.umbraco.org/documentation/getting-started/backoffice/property-editors/built-in-property-editors/image-cropper

However unfortunately despite looking extensively I couldn't find anything that had been built already.

There are a couple of modules such as this:

https://marketplace.sitecore.net/en/Modules/Image_Cropper.aspx

And this:

https://marketplace.sitecore.net/en/Modules/ImageProcessor_Module.aspx

Which I looked at but they don't support setting a focus point unfortunately.

So in the end we implemented our own getMediaStream pipeline processor using code similar to this excellent post by Anders Laub to center crop the images:

https://laubplusco.net/make-sitecore-deliver-images-fits-screen-part-2/

As part of this we also implemented support for responsive images with picture element and srcset + similar support for background images too. This means for smaller devices (such as iPhone & iPads) we call the custom media handler with a request for a medium, small image which means smaller file size and a faster experience for the user on smaller screens. We also handle Retina images in this way too.

It outputs markup similar to the following:

<picture>
<source data-srcset="https://mysite.com/-/media/group-ima‫ge.jpg?mw=374&amp;mh=238&amp;as=1&amp;centercrop=1, https://mysite.com/-/media/group-image.jpg?mw=561&amp;mh=357&amp;as=1&amp;centercrop=1 2x" media="(min-width: 800px)" 
srcset="https://mysite.com/-/media/group-image.jpg?mw=374&amp;mh=238&amp;as=1&amp;centercrop=1, https://mysite.com/-/media/group-image.jpg?mw=561&amp;mh=357&amp;as=1&amp;centercrop=1 2x">
</picture>

I also created a focus point setting tool for the content editor, but haven't yet fully tested it so we are using centre crop on it's own currently. Once I complete it, if there is enough demand to do so I'll try and package it up as a module if I can.

--Update--

This is what the focus point selector looks like currently, it's built using SPEAK UI and allows the user to click on the image and stores the x/y of the focus point. This can then be picked up by the image processor and used instead of the centre of the image:

Anyway hopefully this will get you started with things and give you ideas to consider.

Further Update

I wasn't allowed to open source this but Saad Khan built something similar which you can find a blog post on here:

https://inverseproportion.wordpress.com/2017/04/12/image-field-with-focus-cropper-in-sitecore/

This Module can be found on the marketplace here (and on Github): https://marketplace.sitecore.net/en/Modules/A/Advance_Image_Field.aspx

There is a video on how it works here too: https://www.youtube.com/watch?v=JxqHYoASUx0&feature=youtu.be

I think it works in Sitecore 8 but I'm not sure about Sitecore 9. You may find the code is more up to date on Github.

Another Interesting Article

This blog post is in Dutch but if you use Google Translate it is a good read and might give you some ideas on how to approach this using SPEAK 3 instead:

https://blog.comspace.de/automatisierter-zuschnitt-von-bildern-in-sitecore-mit-ki/

BrainJocks also have support for this in their BrainJocks SCORE™ 3.0 product for Sitecore:

https://jockstothecore.com/finally-support-for-responsive-images-in-sitecore/