Interchange for Foundation 4 uses media queries to load the images that are appropriate for a user's browsers, making responsive images a snap. Instead of loading the lone image and letting the viewport resize the image, the appropriately sized image for the device is loaded by default instead. Expanding or shrinking the browser on desktop, for example, will load in/out the right sized image based on media query breakpoints recognized by Interchange.
This works best when paired with a Foundation 4 based theme such as ZURB Foundation.
How to Use
ZURB Interchange adds settings to Image field types in the Field UI display settings under Manage Display.
For images you want to trigger Interchange on, simply check off 'Enabled' next to each image style you want to use with Interchange, and set the order of the styles for this field.
The ordering is important, because the smallest sized image should be loaded first, in order of smallest to largest. Interchange will determine what image is referenced in 'src' based on the display resolution / device width being used, and swap accordingly for responsive design.
Additional support for styles can be extended via the Foundation plugin framework, reference the official documentation for more information.
Development sponsored by Inclind, Inc.
- Maintenance status: Actively maintained
- Development status: Under active development
- Reported installs: 33 sites currently report using this module. View usage statistics.
- Downloads: 358
- Last modified: September 28, 2013