Responsive images and styles

Overview

This module solves the problems with images and responsive themes, it allows you to define multiple image style suffixes and their corresponding maximum width.

Features

• Full support for image fields
• Full support for colorbox
• Partial support for field_slideshow
• Doesn't need any changes to .htaccess / nginx
• Supports page caching per size
• Can do an automatic reload if the cookie isn't set
• Can do an automatic reload if the window size is changed
• Supports expire module, so the cache gets cleared for all defined suffixes
• Supports the Context Module
• Supports the Media Module
• Supports images within blocks (can be disabled on the settings page)
• Supports images within entity textfields (must be enabled in the settings of the field)

Responsive images and the Media module

There are a few steps that need to be taken before this module plays nice with the Media module:

• Enable Responsive images and styles and the Media module
• Add some suffixes for responsive images (see 'Tutorials' further down)
• Create image styles according to these suffixes(see 'Tutorials' further down)
• Go to /admin/config/media/file-types/manage/image/file-display/media_responsive
• Check the checkbox next to 'Image'
• Select the image style with the default suffix as image style
• Save the settings
• Go to where you can manage the fields of your entity type (for node -> Basic Page that would be admin/structure/types/manage/page/fields)
• Click 'edit' next to the field where you want to insert responsive images (e.g. 'Body')
• At the bottom, check the checkbox 'Apply responsive images and styles to this field'
• Now, when you add a file to a field with the Media plugin for WYSIWYG, choose 'Responsive' as your format.
• Your images should resize as expected now.

Requirements

• None

Known problems

• If you enable 'Force resize' the module tries to resize everything, this works for plain images, but not for field_slideshow and some other jQuery slideshow like plugins.
• If you use barracuda/octopus (http://drupal.org/project/barracuda) you have to change the cache key, add $cookie_respimg to the fastcgi_cache_key directive inside nginx_advanced_include.conf

Tutorials

Install a responsive theme like omega and create the following image styles at /admin/config/media/image-styles

• thumbnail_mobile: width 100px;
• thumbnail_narrow: width 150px;
• thumbnail_normal: width 220px;
• thumbnail_wide: width 300px;

goto admin/config/media/resp_img and add the following

• add a suffix: _narrow - 500
• add a suffix: _normal - 720
• add a suffix: _wide - 900

goto admin/config/media/resp_img/settings and enter _mobile for the default suffix

Similar projects

1/ Responsive Images

• works as a field formatter
• only supports 2 sizes

2/ Adaptive Image

• works with screen size, not window size

3/ Adaptive Image Styles (ais)

• needs .htaccess rules

4/ Client-side adaptive image

• works as a field formatter

5/ Media: Responsive

• works only on media field
• set as maximum width
• uses css for the smaller variants

Downloads