Responsive WordPress Image Sizing With Foundation’s Interchange

Josh Pollock - August 15, 2013

There is a lot of debate these days about the exact definition of “responsive” web-design. I will not waste anytime trying to nail down a precise definition. For me, a responsive design is one that adapts seamlessly to any size screen. Most responsive frameworks merely resize the same elements, which works, but is inefficient for images. Why serve big images, designed to be viewed on a big desktop monitor for a tiny mobile device? A good responsive design should be optimized for layout, presentation and speed on mobile devices. Avoiding unnecessarily large images is key to the last component in terms of the ever so important page load time.

Most responsive frameworks merely resize the same elements, which works, but is inefficient for images. Why serve big images, designed to be viewed on a big desktop monitor for a tiny mobile device?

In order to serve the right image size, based on screen size, I use Foundation’s Interchange. Below is code adapted from my theme _Second Foundation. As you can see it has two parts. The first defines a few image sizes for Interchange to use. Since you are adding new image sizes, it is probably a good idea to run Resize Thumbnails and any image optimization plugins at this point. The second part is a filter to alter the behaviour of WordPress’ thumbnail function is the easiest and most standard compliant way to accomplish this type of task. In your theme’s templates you do not need to change anything. Interchange will be applied whenever you use get_thumbnail() and the_thumbnail(). All you have to do is add this to your theme’s functions.php and you will be good to go:

add_filter('post_thumbnail_html', 'slug_responsive_img', 5, 5);
//Image sizes for Interchange
add_image_size( 'fd-lrg', 1024, 99999);
add_image_size( 'fd-med', 768, 99999);
add_image_size( 'fd-sm', 320, 9999);
function slug_responsive_img($html, $post_id, $post_thumbnail_id, $size, $attr) {
//make image links
$attachment_id = $post_thumbnail_id;
$default = wp_get_attachment_image_src($attachment_id);
$size = 'fd-sm';
$small = wp_get_attachment_image_src($attachment_id, $size);
$size = 'fd-med';
$med = wp_get_attachment_image_src($attachment_id, $size);
$size = 'fd-lrg';
$lrg = wp_get_attachment_image_src($attachment_id, $size);
//create image tag with queries
$html = '<img src="'.$default[0].'"';
$html .= 'data-interchange="['.$default[0].', (default)],';
$html .= '['.$small[0].', (only screen and (min-width: 320px))],';
$html .= '['.$med[0].', (only screen and (min-width: 768px))],';
$html .= '['.$lrg[0].', (only screen and (min-width: 1024px))],';
$html .='">';
return $html;
}

Interchange works based on CSS media queries. Instead of serving one image and letting the browser resize it, Interchange allows you to define a media query and specify a different image file for each screen size range. In this example I created some new image sizes based on a few common desktop and mobile breakpoints and applied each based on Interchange’s predefined media queries. Interchange also has a predefined media query for Retina images, and allows you to define your own. For more information see the documentation.

Interchange also has a predefined media query for Retina images, and allows you to define your own.

This gist presumes that you have Foundation 4 and jQuery running on your site already and interchange is initialized. For more information on doing this, see my post on adding Foundation to WordPress the right way. If you are not using Foundation in your theme that is OK. You can add Interchange without the rest of the Foundation framework. Go to the Foundation Download Page to create a custom build. Once you have added the downloaded files to your theme’s JS and CSS folders, you can add them to your theme like this:

function slug_interchange() {
wp_enqueue_script('foundation-js', get_template_directory_uri().'/js/foundation.js', array('jquery'), false, true);
wp_enqueue_scripts('foundation-interchange', get_template_directory_uri().'/js/interchange.js', array('jquery', 'foundation-js'), false, true);
wp_enqueue_style('foundation-style', get_template_directory_uri().'/css/foundation.css');
}
add_action('wp_enqueue_scripts', 'sluge_interchange')

Let me know in the comments, or on Twitter about any cool uses for this you find or if you have any questions.