Implementing Zurb’s Interchange Into WordPress

1 Views

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

Read More

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.

Post Views: 1

Related posts

2 comments

  1. 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; ?>

  2. 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;
}

Comments are closed.