Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

http://zurb.com/playground/foundation-interchange

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.

share|improve this question
    
What have you tried so far? Where are you running into problems? –  Pat J Jun 12 '13 at 3:30
    
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? –  Anthony Myers Jun 12 '13 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? –  Anthony Myers Jun 12 '13 at 4:58
add comment

2 Answers 2

up vote 2 down vote accepted

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="<?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; ?>
share|improve this answer
    
You are the man! This is working perfectly! Thank you very much! –  Anthony Myers Jun 14 '13 at 3:16
add comment

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;
}
share|improve this answer
    
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. –  Anthony Myers Jun 18 '13 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 '13 at 5:39
1  
Ok, great! I will give this a try as well. Thank you very much. –  Anthony Myers Jun 20 '13 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 '13 at 3:21
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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