14

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?

1

1 Answer 1

19

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:

enter image description here

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/

enter image description here

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/

8
  • Looks very interesting. I've wanted to something similar for a long time, also with the ability to manually select crops for different aspect ratios - haven't gotten to it yet though. Oct 14, 2016 at 10:15
  • That's great info, @aseabridge, roughly what I was expecting. I guess it's time to wrap some of this up into a community package.
    – Laver
    Oct 14, 2016 at 13:09
  • 1
    Thanks @Laver I'll try and find time to do so. It also depends if I'm 'allowed to' as well given the project I'm working on. Oct 14, 2016 at 15:41
  • @AdamSeabridge I am looking for something same, can you please share the codebase of this module. Thanks.
    – PSS
    May 7, 2019 at 12:39
  • @PrabhatSharma I've not been able to do so I'm afraid however If you look above I've updated my answer with another module you could potentially use under the 'Further Update' section. May 12, 2019 at 23:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.