Implementing Zurb’s Interchange Into WordPress

If you haven’t already enabled thumbnails in your theme, add this snippit to your functions.php:

add_theme_support('post-thumbnails');

Then add this code.

add_image_size( 'responsive-small', 300, 500 );
add_image_size( 'responsive-large', 768, 500 );

Here’s how it works:

function( 'unique_identifier', width, height);

Now the fun part. To use this in your template:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php 
    $smallsrc = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'responsive-small' );
    $largesrc = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'responsive-large' );
?>
<img src="https://wordpress.stackexchange.com/questions/102686/<?php echo $smallsrc[0]; ?>" data-interchange="[<?php echo $smallsrc[0]; ?>, (only screen and (min-width: 1px))], [<?php echo $smallsrc[0]; ?>, (only screen and (min-width: 768px))], [<?php echo $largesrc[0]; ?>, (only screen and (min-width: 1280px))]"> 
<?php endwhile; endif; ?>