Chat with us, powered by LiveChat

This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

Say hello to redesigned Cloudways, an empowering Startup Program, enhanced Staging, a new Let’s Encrypt Wildcard SSL certificate feature, and more. GET STARTED

How to Create Responsive Images in Drupal 7

Updated on December 26, 2017

3 Min Read
Reading Time: 3 minutes

With the advent of smartphones and tremendous growth in the use of the Internet, the world has seen a dramatic technological shift. Unlike the old day, different screen sizes are used to browse the Internet. And with that, there’s a need to cater to all these screen sizes and correctly display the web pages.

drupal 7 responsive images

A website that formats web pages so that they can be displayed on various screen sizes without getting distorted is known as a responsive site. In a previous blog post, I discussed a simple method for creating a responsive Drupal theme using bootstrap framework, however in this post, I will focus on Drupal and how one can create responsive images in Drupal 7. So, without further ado, let’s get down to it.

Download and Install Picture Module

The very first thing that you’ll have to do is download the Picture module along with its dependencies (the picture module needs breakpoint module and ctools). I use drush to download and install modules, you can choose whichever method you prefer.

To download and install via drush, enter these commands:

Configure Breakpoints

Breakpoints are basically the limits at which the image will change its size. For example: when the browser window size shrinks beyond a certain limit, the image will change its size according to what breakpoints have been set. To set breakpoints, navigate to admin->configuration->media->breakpoints. Once here, we will set the custom breakpoints like in the image below.


Here we have set the breakpoints as follows:

Example_large = min-width: 960px;

Example_medium = min-width: 480px;

Example_small = mind-width: 0px;

Now, we will add the breakpoints we have set to a group so that it can be easily assigned to our picture module. You can do this by clicking the ‘add new group’ button at the top. Name the group, and tick the checkboxes beside the breakpoints that you want to assign.

breakpoints group name

Configure Picture Module

Now, we will assign image styles to the breakpoints we configured earlier. This is done through the picture module configuration. In order to do this, navigate to admin->configuration->media->picture mapping.

picture mapping

Click the ‘add’ button. Give the mapping a name of your choice. Select the breakpoint group you defined earlier from the drop-down menu. Now for each breakpoint, set the image style by selecting ‘Use Image Styles’ and select the image style you want from the drop-down menu.

image style

Configure Fields in Content Types

Now that we have successfully set the image mapping, we need to associate it with a field in a content type. I will configure it for a blog post or ‘article’ content type in this post. In order to do this, navigate to admin->structure->content type and click the ‘manage display’ link for ‘Article’.

Select ‘Picture’ from the dropdown menu below Format column for Image. Now click the configuration icon for Image and from the dropdown menu for Picture Mapping select the mapping name you gave earlier in the Picture module configuration. Once done click Update, and then Save.


That’s it! You’ve successfully configured responsive images on your Drupal site. Note that just like we set responsive images for our Article content type, we can set it for other content types as well. Hope you found this tutorial useful. If you encounter any issues, please let me know in the comments section below.

Share your opinion in the comment section. COMMENT NOW

Hamza Zia

Hamza is a Drupal Community Manager at Cloudways - A Managed Drupal Hosting Platform. He loves to write about Drupal and related topics. During his free time, he can be seen obsessing over Football, Cars, Android and Gaming.

Create interactive Drupal websites easily on the Cloud.

Host your website on optimized Drupal hosting servers.

Get Our Newsletter
Be the first to get the latest updates and tutorials.