Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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')
@mrjonnywood

This comment has been minimized.

Copy link

mrjonnywood commented Jun 28, 2017

This works really well, however it doesn't include the image alt tag. Is it possible to retrieve the alt tag by including the following? $image_alt = get_post_meta( $image->id, '_wp_attachment_image_alt', true);

I've "hacked" this together, it works but I'm not sure it's the best approach....

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;
	$image_alt = trim( strip_tags( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true )) );
	$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 .= ' alt="'.$image_alt.'"';
	$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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.