Display Responsive Images Using Client-side Adaptive Image Module

By: Ivan Zugec
http://webwash.net |   / webwashnet  

Modules:

- Client-side adaptive image(https://drupal.org/project/cs_adaptiv...) (7.x-1.0)

Transcript:

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 display page, define your breakpoints and you're done.

Installing the module is pretty simple. Just download Client-side adaptive image and install the module.

Throughout this video I'll use Omega as the responsive theme. Avoid using the default Bartik theme as it's not responsive.

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.

So go to Structure, "Content types" and click on "manage display" within the Article row. Select "Adaptive image" from the Format drop-down list and click on Save. Click on the cog wheel.

And here we need to 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 different widths to get the right results.

For this video, I'll set the following options. Four hundred and thumbnail. Eight hundred and medium. twelve hundred and large.

When the browser window is less than four hundred pixels, it'll display the thumbnail image. Then, when the the browser window is less than eight hundred pixels, it'll display the medium image. And finally, set the Maximum option to large.

Save the formatter settings by clicking on Update, and click on Save. Go to Content, "Add content" and Article. Enter in a title and upload an image.Now, if I resize the browser, you can see the large, medium and thumbnail size.

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's configuration page.

Go to Configuration, "Adaptive images". Change the value in the "Number of breakpoints" and click on Save configuration. Now if we go back to Structure, "Content types" and "manage display". Click on the cog wheel and you'll see that we have 10 breakpoint options.