Your site visitors’ content experience should be consistent across devices. However, when it comes to mobile devices, the standard method of cropping images can create a headache for content editors.
The standard cropping method starts at the centre of the image, and works its way outward. This becomes an issue when the main subject of your image is not centred. On smaller screens, the main subject of the image may get cropped out, effectively making the image irrelevant to the article.
Let’s assume you’re publishing a piece of content focusing on rockets, and want to use the above image for your header. This image of SpaceX is a simple composition, but neither of the two objects (rocket nor hangar) are centred.
Applying a crop for smaller screens, produces this:
The image has become unidentifiable. And considering that imagery is integral in effective content - this is far from ideal.
There are a few common workarounds in order overcome this problem, each with their drawbacks.
You could use a different image, specifically cropped for mobile. However, this requires some double-handling, including a separate upload in the CMS.
Alternatively, you could resize the image, or simply display the whole image. While these are adequate, both can lead to a poor experience for your visitor. For example, depending on the image’s composition, overlaying text (e.g. when the image includes a call-to-action) can result in poor readability.
And full size images can take up a lot of space on mobile devices, which can push content down, or possibly even outside of the initial view. Additionally, full size images often take longer to load, resulting in content jumping.
But what if we could shift the focus of the cropped image to what really matters?
Module: Focus Point
Let’s make this a user story:
- As a CMS Content Editor
- I want cropped images to focus on the subject
- So that my visitors to my website have a consistent experience on all platforms
Unless you have access to a good AI or machine learning resource, this is going to be quite difficult to achieve automatically.
Even Microsoft’s Machine Learning Image Identifier was unable to immediately identify what the focus point of the SpaceX image ought to be.
If the article’s topic was ‘SpaceX’, the image’s focus point could either be the rocket, or the hangar. On the other hand, if the topic was ‘rockets’, the focus point would obviously be the rocket.
Instead, Jonom’s Focus Point module gives the content editor the ability to self-select the ideal focus point.
As usual, the way to install this module in a project is to require it via composer:
composer require jonom/focuspoint
How to use in the template
To view a focus cropped image on mobile only, all that is required in the template is the following.
This will work in modern browsers only, although the fallback image tag works well for Internet Explorer.
<%-- Desktop/tablet and mobile image source (only fetches required image) and fallback to regular img --%> <picture> <source srcset="$Image.FillMax(2100, 720).URL" media="(min-width: 1024px)" /> <source srcset="$Image.FillMax(1536, 720).URL" media="(min-width: 640px) and (max-width: 1023px)" /> <source srcset="$Image.FillMax(1152, 720).URL" media="(min-width: 480px) and (max-width: 639px)" /> <source srcset="$Image.FocusFillMax(719, 639).URL" media="(max-width: 479px)" /> <img src="$Image.FillMax(1400, 480).URL" alt="$Image.Title" class="hero__image--img" /> </picture>
Note the FocusFillMax for small media devices. This is your focussed image that will ensure that mobile devices see the correctly cropped image.
Using Focus Point in SilverStripe CMS
Setting the focus point is straightforward:
- Go into the Files section of the CMS
- Select the image
- You'll see a new option to set the focus point of the image
- Click where you want the focus to centre on
- Hit 'Save'
And this is the resulting view on mobile. The rocket launch is nicely centred compared to a standard crop.
While the Focus Point module is very useful, it’s not an image editing tool. Your image should be well composed from the start.
The Focus Point module does not allow setting a focus point for images uploaded in the WYSIWYG editor. It’s only compatible with images that are explicitly set up in the CMS.
As per usual, give it a try, contribute and enjoy!