Responsive images with FoundationPress and Interchange?

[ramones79]

Can I use this as a separate file, loaded by the functions.php, will it be compatible with FoundationPress, assuming that I make the image sizes in the code here and in the responsive-images.php the same?

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

The above code is from here https://gist.github.com/Shelob9/5695177

If this code is appropriate and compatible it can also be added as a feature to FoundationPress. Only an idea...

[olefredrik]

Hi @ramones79 ,

FoundationPress has support for responsive images using srcset.

Background info:
https://responsiveimages.org/
https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/

Most modern browsers support srcset today. That said, it could be relevant to add an Interchange fallback for not-so-modern browsers.

If you're up for the challenge to incorporate the gist code as a fallback solution for our current responsive images solution using srcset, I'm happy to review any pull requests :)

Closing this issue for now. Feel free to re-open if you have time to improve the theme with a responsive images fallback solution for old browsers.