Adaptive Image Styles (ais)

Adaptive Image Styles

Note: If your Drupal instance is not at the root of your domain and you're using release 1.0, please check the installation instructions on this page and not those included in release 1.0.

Description

This module allows any image to be adaptive simply by setting it to be rendered with the 'adaptive' style. This module also integrates with the Media module, and adds an adaptive option selectable from the media displays.

Which image styles are used to generate the adapted images is also configurable.

The adaptive image styles module offers an easy way to make any images adaptive.

Simply choosing to display the image with the "adaptive" image style with make the image adapt to the clients window width. The Adaptive Image Styles administration page provides an interface for choosing which image styles are using to generate the adapted images and set the threshold for when they are chosen. The threshold refers to browser window width.

Example:
If there are three image style selected, with thresholds of 480, 768, and 992. If the window width is from 0 - 480 pixels, the adaptive image will be displayed using the image style with a threshold of 480. From 481 - 768, the 768 image style will be used, and any wider than 769, the image style with the threshold of 992 will be used.

This module is inspired by the methods used by Adaptive Images to make images adaptive without requiring markup changes. The goal of this module is be able to insert adaptive images with the Media module pop-up.

Demo

Here's a demo of the AIS module in action: http://demo.coldfrontlabs.ca/content/adaptive-images

Articles

• Creating Responsive Image Slider Galleries with Adaptive Images with Drupal 7
• Adaptive Images and Drupal 7

Similar modules

This module is similar to the Responsive Images module.

The advantages of the Responsive images module are:

1. No htaccess modification required, so no dependency on running Apache.
2. Field API integration will make images in those fields adaptive site wide.

The advantages of the AIS module are:

1. Fewer requirement and no external libraries
2. Integration with the Media module
3. Can easily make existing images adaptive simply by changing the image style they're rendered with
4. Choose which images are adaptive on an image by image basis.

Compatibility

This module is created for Drupal 7.

Caveats

AIS works using an htaccess rewrite rule, so for it to work the way its configured you need to be using Apache with Mod Rewrite enabled. However, the rewrite rules can most likely be ported to most webservers.

If a client has JavaScript disabled, the original image will be displayed.

Installation

1. Enable the module
2. Patch Drupal's .htaccess file
3. Correctly configure the RewriteBase in Drupal's .htaccess file
4. Display your images and media with the 'adaptive' image style
5. Configure which images styles are used by AIS

To patch Drupal's htaccess file with patch, run the following from you Drupal root:

$ patch < sites/all/modules/ais/ais.htaccess.patch

To patch Drupal's htaccess file manually:

Add following:

NOTE: You must set the RewriteBase correctly. If Drupal is at the root of your domain, it should be set to "RewriteBase /". If Drupal is in a directory (like http://www.example.com/mydirectory), it must be set to "RewriteBase /mydirectory".

Author

Created by David Pascoe-Deslauriers (spotzero)
Sponsored by Coldfront Labs Inc.

Downloads