I'm really scratching my head trying to figure out the best method for responsive images with Wordpress. Zurb just released a new javascript plugin for their Foundation framework. I'm using Foundation in my custom theme, but I'm just unsure as to how to make featured images work with this? Can anyone help me out with getting it to work with WP?


Ps. Just want to clarify. Not exactly talking about making an images responsive. I know how to do that, but I'm talking about loading the different size images that WP creates, based on the screen size or device.

  • Well, if I'm using get_the_thumbnail in my theme, how would I apply Interchange to that? They use it like this: "<img src="small.jpg" data-interchange="[small.jpg, (only screen and (min-width: 1px))], [small.jpg, (only screen and (min-width: 768px))], [medium.jpg, (only screen and (min-width: 1280px))]">" , I would need to use that but along with get_the_thumbnail. Is there some way, conditionally, that I could call a different size thumbnail for each media query? Jun 12, 2013 at 4:42
  • Like something similar to what apostl3pol recommended on this question: stackoverflow.com/questions/16120819/… Although, I did try his method, and my featured image thumbs disappear, but something similar like what he was suggesting, maybe? Jun 12, 2013 at 4:58

2 Answers 2


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


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(); ?>
    $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="<?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; ?>
  • You are the man! This is working perfectly! Thank you very much! Jun 14, 2013 at 3:16

Old question, but I thought I'd share my solution, which makes all images responsive by adding a filter for post_thumbnail_html.

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;
  • Very nice. Thank you for adding this to my question! Just so I'm clear though. Is this another way to do exactly the same thing, or does this actually make the images responsive to their containers as well? Because I ended up adding width="100%" at the end of the img link in my template. Not exactly the best I guess, but it works. Jun 18, 2013 at 15:49
  • 1
    The difference between my method is mine doesn't require you to modify your templates. It applies to every time WordPress displays an image. Ultimately it accomplishes the same thing when it is used. I'm still playing around with it, just finished this last night while updating my theme.
    – JPollock
    Jun 19, 2013 at 5:39
  • 1
    Ok, great! I will give this a try as well. Thank you very much. Jun 20, 2013 at 5:15
  • 1
    @AnthonyMyers I was testing in Firefox and was getting some inconsistant behavior, which wasn't happening in Chrome, where sometimes the thumbnails would get huge and escape their containers. I realized it was because they had a class of th. Removing that class solved the problem. Thought this might explain some of your issues.
    – JPollock
    Jun 21, 2013 at 3:21
  • Great solution mate. Any suggestions on how to tackle the images within the contents? Nov 9, 2015 at 21:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.