Skip to content

Instantly share code, notes, and snippets.

@jg314
Last active August 29, 2015 14:06
Show Gist options
  • Save jg314/ae70a820f39242eb89dd to your computer and use it in GitHub Desktop.
Save jg314/ae70a820f39242eb89dd to your computer and use it in GitHub Desktop.
WordPress Featured Image Using Picturefill Responsive Image Solution
<?php
//Created using code from http://scottjehl.github.io/picturefill/,
//http://ericportis.com/posts/2014/srcset-sizes/,
//http://www.taupecat.com/2014/05/picturefill-js-wordpress/,
//http://www.smashingmagazine.com/2014/05/12/picturefill-2-0-responsive-images-and-the-perfect-polyfill/
//For homepage where featured image should live
if( has_post_thumbnail() ){
$thumbnail_id = get_post_thumbnail_id();
$alt = get_post_meta( $thumbnail_id, '_wp_attachment_image_alt', true );
//Each is an array where [0] = url and [1] = width
$thumb = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail' );
$medium = wp_get_attachment_image_src( $thumbnail_id, 'medium' );
$large = wp_get_attachment_image_src( $thumbnail_id, 'large' );
$homepage_size = wp_get_attachment_image_src( $thumbnail_id, 'NAME_OF_LARGER_IMAGE_SIZE' );
echo '<img srcset="' . $thumb[0] . ' ' . $thumb[1] . 'w,';
echo $medium[0] . ' ' . $medium[1] . 'w,';
echo $large[0] . ' ' . $large[1] . 'w,';
echo $homepage_size[0] . ' ' . $homepage_size[1] . 'w"';
echo ' sizes="100%" alt="' . $alt . '">';
}
//To add to functions.php where js is enqueued. Make sure it loads in the head.
//Picturefill 2.1.0 minified can be downloaded from http://scottjehl.github.io/picturefill/#download.
if( is_front_page() ){
wp_enqueue_script( 'picturefill', get_stylesheet_directory_uri() . '/js/picturefill.min.js' );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment