Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save maxyudin/9bcf7e287a5cadf486c9edfb62922ef9 to your computer and use it in GitHub Desktop.
Save maxyudin/9bcf7e287a5cadf486c9edfb62922ef9 to your computer and use it in GitHub Desktop.
Function to use Foundation's Interchange to make WordPress images automatically responsive. Also included is a function to add Interchange to the theme if Foundation is not already being used.http://foundation.zurb.com/docs/components/interchange.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;
}
function slug_interchange() {
wp_enqueue_script('foundation-js', get_template_directory_uri().'/js/foundation.js', array('jquery'), false, true);
wp_enqueue_scripts('foundation-interchange', get_template_directory_uri().'/js/interchange.js', array('jquery', 'foundation-js'), false, true);
wp_enqueue_style('foundation-style', get_template_directory_uri().'/css/foundation.css');
}
add_action('wp_enqueue_scripts', 'sluge_interchange')
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment