Responsive images with art direction in Drupal

A few months ago I realized how lucky we are in Drupal for the solution we have for responsive images. I reviewed the different automated tools for Responsive Images outside Drupal when I was looking for documentation for a Responsive Web Design talk. I saw there are many great solutions, but few of them incorporate the concept of artistic direction, or in other words the ability to decide how the images should be adapted to each device.

Starting from the beginning

If we look only at the HTML markup itself there are 2 ways to work with responsive images: with the img ag or the newer picture.

With the img tag itself we can create responsive images with the srcset attribute. This allows us to upload an image or another depending on the size and density of the screen.

<img
  srcset=”image-large.jpg  1920w,
         image-medium.jpg  960w,
          image-small.jpg   480w”						
  sizes=”50vw”
  src=”quilt_2/detail/medium.jpg”
  alt=”Detail text.”
/>

But this solution is designed to use the same scaled image. But what if in mobile we want to focus on a certain point because just scaling the image makes it so small that some detail that is important to get the image gets lost? This is where the art direction comes into play.

 

A step beyond: automating art direction

Scaled image vs cropped image

In the top example, we can see that the left mobile version has the same image from the desktop, but only scaled. Instead of that, on the right one we have focused on the part that has a meaning for the article. And that is the markup that we would get with Drupal:

<picture title=”Image title”>
  <source srcset=”image-big.jpg 1x” 
          media=”(min-width: 0px) and (max-width: 29.99em)”>
  <source srcset=”image-small.jpg 1x”
          media=”(min-width: 30em)”>
  <img srcset=”image-big.jpg 180w”>
</picture>

Here is where Focal Point module is useful, a module created by bleen that is currently involved in the Media initiative, specifically Crop API.

This module’s goal is to allow the user creating the content to define what is the important part of an image. This information is used to crop the image automatically (or crop and scale) when it is displayed and not lose the most important area during the process. What the module does is to provide two new filters to configure the image styles that will be used when we visualize our entities, either with the default formatter for Image or for the one provided by Responsive Images. This module’s strength is to give a very simple solution for the day to day end user, but also a very quick implementation for the one building the site.

To start working with responsive images we must have decided already which breakpoints we need and we should have them available in our Drupal installation. If you want to know more about that you can check the Drupal Documentation page.

On the first place we need to enable the Responsive Images module. We also need to download and enable the Focal Point module and its dependency, the Crop API module.

Then we need to create the image styles for each breakpoint point in Manage > Configuration > Media > Image Styles.

Select the crop effect

In this case we are creating an image style corresponding to each of the breakpoints provided by Bartik: Wide, Narrow and Mobile. For example, for the Mobile breakpoint we need to create a 420px x 420px image style.

Creació de l'estil d'imatge

When we have the 3 image styles created we need to go to Manage > Configuration > Media > Responsive image styles and we create a new responsive image style with the button "+ Add a new responsive image". In this case we are naming it "Header" and we select the Bartik breakpoint group. For each one of them we select the corresponding image style from the ones we have created on the last step.

The next step is to configure the field in the view mode that we are going to use, in this case is the default one for the content type Article. Navigate to Manage > Structure > Content Types > Article and go to the "Manage display" tab. Here we need to change the default format from "Image" to "Responsive Image". This let us insert the settings for the field, where we have to select our responsive image group if it has not been selected by default.

Field settings

So far we have the settings for the image so now we can start using Focal Point. To do so we need to create new content going to Manage > Content > "+ Add content" and add a new Article node type. When we add content in the Image field we’ll see a thumbnail with a cross on it, that will allow us to select the most important point of the image.

Select the focal point

In addition to that, we have the chance of checking how the cropping will be applied to different image styles by clicking on "Preview".

Results preview

Once we save the node we’ll see the result if we change the size of the browser.

Display results

 

Conclusions

Like in many other cases, Drupal offers an out of the box solution for the most common scenarios and is easily configurable through the user interface (in Drupal this is known as site-building). But what stands out from this solution is how simple and transparent is for the end user because with a minimum effort a lot control over its contents can be achieved.

To sum up, I think the balance between the effort we do adding this functionality vs. the added value we give to the end user makes Focal Point essential. I encourage you to add it in your projects!