Why use different Image sources?
You really only want to load large resources for devices that handle it well. (Your iPhone on 3G doesn’t need a 2MP header image). It’d be nice if you could serve an equivalent image at, say, 600px wide (and 10KB) instead.
Manually Type an Interchange Tag? No thanks.
Once you read up on how to use Interchange in your markup, you’ll quickly figure out that if you (or your clients) use WordPress to manage images it’ll be a pain to manually insert markup like this for your posts & pages:
Taking a moment to dissect this… Interchange will read the data attribute and determine that for any device with a minimum width of 1px (mobile) we should load the default.jpg (which is small). But once the minimum width reaches 1280px, we should load the bigger, hi-res version. Wouldn’t it be great if you could just use the WordPress editor like normal?
I strongly believe you should keep your content clean, meaning don’t create hard dependencies on third party plugins (like Interchange). Imagine you have dozens or hundreds of Interchange tags all throughout your content and decide someday to move away from Interchange. What a pain it would be to cleanup your content!
Instead, let’s capture the actual
<img> tag before it’s output, replace it with an Interchange tag, and then display it. If you ever decide to move away from Interchange, just remove the filter!
From a big picture, we need to:
- Add some custom image sizes to your theme (these are the mobile sizes that WordPress will automatically generate when you upload a large image for your content).
- Add a filter to the content of your theme so that before we render the page, we can swap out your image tags for Interchange markup.
- Get Foundation Interchange up and running in your theme.
Generate Mobile Images
How small should we make our mobile images? Well, to keep this example simple, let’s just do one: 640px x 480px. Let’s assume a mobile device with a 640px landscape viewport doesn’t need an image larger than 640px wide. (We’ll ignore retina for now). So add this custom image size to
You probably have existing images in your content. Adding this will not automatically generate copies at this size for you. I recommend using the Regenerate Thumbnails plugin to build these sizes for all your older, existing uploads. If you don’t do this, nothing will break, but your older posts won’t benefit.
Filter Your Image Tags
Add the following to
Now Use Interchange
Next, you need to load
foundation.interchange.js. Typically you’ll have a build process to concatenate / minify your scripts, but you can also just enqueue them traditionally.