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.
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:
$ drush dl breakpoints $ drush dl ctools $ drush dl picture $ drush en picture -y
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.
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.
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.
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.
Conclusion
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.
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.
