--- name: interchange url: /interchange title: Interchange ---

Interchange

A simple JavaScript solution for responsive images. But not just images, it can even load in HTML partials. Interchange uses media queries to dynamically load responsive content that is appropriate for different users' browsers.



Interchange allows you to specify what specific content to display based on the user's current screen size. This is great for loading up a mobile-friendly component on small devices, and a more robust or heavier load component on desktops.

To set up Interchange, start with a container with the zf-interchange directive.


Use with Images

A basic example of Interchange involves images. In the below example, we're loading images with a lower resolution (and thus a lower file size) on small screens, and progressively higher-res images on larger screens.

Note the values of the media attributes on each item inside the container—these are the breakpoints defined in your Sass files. Check out the documentation for media queries to learn how these breakpoints can be changed.


Use with HTML

Interchange can also switch between entire chunks of HTML. These can be loaded as partials (external HTML files), or by dropping the content right into the tag.

Note that partials are reloaded every time, meaning if the user's device scales from medium, to small, back to medium, the medium partial will be loaded twice.

You are on a large screen.
You are on a large screen.