The Picture module allows you to manage images in Drupal sites that are using Responsive Design. The module provides an interface to map existing image styles to breakpoints. The Picture module is a backport of the Drupal 8 solution for responsive images, and promises to provide a smooth upgrade path.
Install and enable
- Place all the modules in: your sites/all/modules directory; or your sites/[my site]/modules directory.
- Enable the modules at: admin/modules
1. Configure your theme
After you have all the modules enabled and ready to go, start with theme configuration. You set the breakpoints for view ports in your theme’s .info file.
breakpoints[mobile] = (min-width: 0px)
breakpoints[narrow] = (min-width: 560px)
breakpoints[wide] = (min-width: 851px)
breakpoints[tv] = only screen and (min-width: 3456px)