Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

 

Module of the Month: Focus on what matters

Focus Point is SilverStripe’s Module of the Month. It provides a solution for automatic image cropping, enabling content editors to easily set and crop imagery from a focus point, instead of the centre point of the image.

 

 

 

 

 

 

 

 

 

Read post

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.

Falcon Heavy Demo Mission by SpaceX

SpaceX can launch and land a rocket faster than you can do a composer update

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:

Cropped SpaceX image

The image has become unidentifiable. And considering that imagery is integral in effective content - this is far from ideal.

Workarounds

There are a few common workarounds in order overcome this problem, each with their drawbacks.

You could use a different image, cropped specifically 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:

  1. Go into the Files section of the CMS
  2. Select the image
  3. You’ll see a new option to set the focus point of the image
  4. Click where you want the focus to centre on
  5. Hit save


And this will be the resulting view on mobile. The rocket launch is nicely centred compared to a standard crop.

Limitations

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!

About the author
Simon Erkelens

Simon is a developer at SilverStripe. When not at work, he's writing other programs or focusses on one of his modules he wrote or co-wrote. Or writing new things.

As a real backend developer, he's usually staring at a dark screen with code only. Although every now and then, he can be convinced to work on some frontend things or testing.

In real life, he looks nothing like the cow in his avatar, but he does love cows (both alive and medium rare)

Post your comment

Comments

  • FocusPoint can also be used in tandem with css-settings "object-fit" & "object-position". For example useful for a fullscreen-hero, when you don't know how the aspect-ratio of the viewport might look. Additional to the server-side cropping, this maks it possible to also crop with a focus-point in the browser. The example below shows a portrait-, landscape, or 4:3 "square" image depending on the aspect-ratio it is shown. Even if the general rule is not to relay, which picture the browser might pick from the picture-element, it seems to work pretty well. Or in other words: pseudo media-queries in picture-element und css-media query match in praxis pretty well.
    https://gist.github.com/lerni/1a97635a97ca12a4ee78c10a95218382

    Posted by Lukas Erni aka lerni, 12/07/2018 8:10pm (2 months ago)

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

Like what you have read?

Sign up for our weekly blog digest sent to your inbox.

Subscribe