Last active
August 29, 2015 14:06
-
-
Save jg314/ae70a820f39242eb89dd to your computer and use it in GitHub Desktop.
WordPress Featured Image Using Picturefill Responsive Image Solution
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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