Responsive Images in Drupal: Part 2

In [part one](/blog/responsive-images-drupal-part-1) we looked at setting up Drupal’s [Breakpoints](https://www.drupal.org/project/breakpoints) and [Picture](https://www.drupal.org/project/picture) modules in order to serve appropriately cropped images at different breakpoints. This enabled us to optimize page performance on all devices, and maintain design requirements. However, clients often request the ability to control the crop of the images. In this post we will look at the [Manual Crop module](https://www.drupal.org/project/manualcrop), and apply it to what we set up in part one. ## Installing Manual Crop Download and install Manual Crop as well as its dependency, [Libraries API](https://www.drupal.org/project/libraries). Currently, the dev release of Manual Crop (from January 26, 2015) has [Media module](https://www.drupal.org/project/media) support and better documentation for installation. I would recommend using that over the recommended release (dated June 22, 2013). ## Setting up the image styles While the slogan for responsive web design has been “mobile first,” when thinking about images it’s best to think the opposite. You want to start with the largest, highest resolution image you can. Scaling down images is rarely an issue. Trying to scale up images leaves them looking pixelated and blurry. With that in mind, what we need is to enable content creators to control the crop on the largest image style. The smaller image styles will inherit that selection before scaling down the images for smaller devices. Let’s edit the **Responsive - Large** we created in part one. If you look at the effects list, there should be four new effects to choose from. We want to add the **Manual Crop: Custom crop** effect. ![Image Style admin](/sites/default/files/image00_0.png) It’s important to mention only one Manual Crop effect can be applied to each image style, and it must come first in the list. Next provide the same dimensions from the **Scale and crop** effect that was already there. ![Image style settings](/sites/default/files/image05_0.png) Notice I left the **Fallback cropping style** field empty. We could have created an entire new Image Style, and the set our **Responsive - Large** style as the fallback. Instead, we’re applying the manual crop effect first, and then scaling the image down to the size we want. You end up with the same result either way, but keeping it all in one style feels more organized to me. You also don’t have to set your image fields to to use a new style. Now we need to set the rest of the Image Styles in our stack to inherit the crop selection from **Breakpoint - Large**, and then scale that down. On the styles **Breakpoint - Medium** and **Breakpoint - Small**, add the effect **Manual Crop: Reuse cropped style** and select **Breakpoint - Large** from the dropdown. ![Reuse crop style](/sites/default/files/image03_0.png) ## Enabling cropping on your image field The next step is to visit the image field we want our users to be able to manually crop. Expand the **Manual Crop** fieldset on the field settings page, and you should see the following options: ![Manual crop field settings](/sites/default/files/image04_0.png) First, click **Enable**. The rest you can leave as their default. Now under **Styles list**, check the **Breakpoint - Large** style. Because we made sure there was a fallback style in place, we don’t need to make cropping this style required. Next, create a new node and upload an image. You should see a **Crop** button available after upload. ![Crop field](/sites/default/files/image06.png) Not surprisingly, if you click that button you’ll be able to crop the photo. ![Manual crop interface](/sites/default/files/image01_0.png) Save the node and the first thing you should notice is the image cropped to the area you specified. If you look at the **Network** tab of your [browser’s inspector](/blog/how-determine-which-css-styling-element), as you resize the window you should notice the other images load at their appropriate breakpoints. Depending on the changes in the images, as well as bandwidth, this may be the only way to ensure this is working. ![Responsive demo](/sites/default/files/responsiv-demo.gif) ## Other use cases In our example, we addressed the performance use case for responsive images. Content creators needed to control only one crop because we needed only scaled down photos for smaller breakpoints. What if we’d wanted to serve uniquely cropped photos to each breakpoint instead? To allow cropping for each breakpoint, add the **Manual Crop: Custom crop** effect to each image style, and check those Image Styles on the field configuration page. The **Crop** button will change to a select list, and content creators can choose which Image Style they wish to crop. ## Tip of the iceberg We’ve covered a lot about responsive images in the last two posts, and still haven’t scratched the surface. Hopefully you now have enough understanding to start using these tools in your own projects. We’ve laid a foundation you can expand upon and really begin to create highly optimized experiences.
Content Drupal Mobile User Experience