In Drupal, there are a few modules that offer responsive image functionality, but today I want to talk about the Picture module. The Picture module allows you to define different image styles for specific screen sizes or breakpoints, and you define the breakpoints using the Breakpoints module.
In this video, I’ll show you how to make images displayed from the Image field responsive. And just a quick side note: Both the Picture and Breakpoints module are part of Drupal 8 core. The Drupal 7 version of the modules are backports.
Modules and Theme
- Picture (1.1)
- Breakpoints (1.0)
- Ctools
- Omega
drush dl picture breakpoints ctools omega
Resources
Breakpoints:
| Name | Value |
|---|---|
| mobile | (min-width: 0px) |
| narrow | (min-width: 740px) |
| normal | (min-width: 980px) |