Interchange for Foundation 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 based theme such as ZURB Foundation.

Full Interchange documentation can be found here.

Branches

  • 1.x is based to work with Foundation 4.
  • 5.x is based to work with Foundation 5.

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.

If you want to use the images as a background image, check off the setting "Set as a background image with Zurb Interchange". Drupal will format the image as a div tag instead of img, and Interchange will handle the rest. You will need to add your own background CSS properties aside from background-image, such as position and repeat. More information on this can be found in the Zurb Interchange documentation.

If you want to use your own custom media queries, you can, by declaring them with Javascript as outlined in the documentation. This is the easiest way to achieve more complex configuration.

Supporting organizations: 
Developed 1.x
Developed 5.x

Project Information

Downloads