The Client-side adaptive image module allows you to display responsive images from a field formatter. The module resizes images via JavaScript on the client-side, hence the name.
This module is relatively easy to setup, there are no dependencies and you don’t have to modify the .htaccess file. To setup just select the “Adaptive image” formatter from the manage fields page, define your breakpoints and you’re done.
If you’re in the process of researching modules take a look at the Picture module and our tutorial Handle Responsive Images Using Picture Module In Drupal 7.
Getting Started
Installing the module is pretty simple. Just download Client-side adaptive image and install the module.
If you use Drush, run the following command:
$ drush dl cs_adaptive_image $ drush en cs_adaptive_image
Throughout this tutorial I’ll use Omega as the responsive theme. Avoid using the default Bartik theme as it’s not responsive.
Configure Image Field
The module ships with a custom field formatter called “Adaptive image” for the image field. All we have to do is configure this formatter, define breakpoints and image styles and we are done.
1. Go to Structure -> “Content types” and click on “manage display” within the Article row.
2. Select “Adaptive image” from the Formatter drop-down list and click on Save.
3. Click on the cog wheel and define specific breakpoints and image styles.
The breakpoint widths may vary depending on the defined breakpoints within your responsive theme. You’ll have to experiment with the widths to get the right results.
For this tutorial I set the following options:
| Breakpoint | Image style |
|---|---|
| 400px | thumbnail |
| 800px | medium |
| 1200px | large |
4. Save the formatter settings by clicking on Update, then go and test the image field.
Extra Breakpoints
By default the module allows you to define five breakpoints. But if you need more than five, you can add extra breakpoints by going to the module configuration page.
1. Go to Configuration -> “Adaptive images” (admin/config/media/cs-adaptive-image).
2. Change the value in the “Number of breakpoints” and click on Save configuration.
If you have any questions, please leave a comment.
After being inspired by your great tutorial i found this website to generate all kinds of breakpoints:
http://responsivepx.com/
https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Matrices
Cool thanks for the links.
Google requires our on screen images NOT TO BE smaller than their actual size on server.
We need images to fit our divs or regions or blocks 100%. If the image is smaller in size on server, it doesn’t necessarily fit our divs. So how many breakpoints do we need to fit our divs and the image size on disk? It is a paradox. Further more, we use breakpoints to display our regions. Images’ styles should correspond to these breakpoints, otherwise they, AGAIN, don’t fit.
So, is this a wicked problem or not?
Especially now, when we have metro styles and all, we need these images to fit exactly our divs, to deliver the best visual experience. So, what to do? Deliver the best design experience or satisfy Google?
Google requires our on screen images NOT TO BE smaller than their actual size on server.
Where can I learn more about this? Do you have any links?