Picture fill with wordpress – Version 1

functions.php

<?php 
// Custom sizes for Picturefill. You might need to repeat these for every image size you need.
add_image_size( 'size-alpha-small', 320, 175, true );
add_image_size( 'size-alpha-medium', 600, 350, true );
add_image_size( 'size-alpha-large', 1200, 700, true );

add_image_size( 'size-beta-small', 320, 175, true );
add_image_size( 'size-beta-medium', 600, 350, true );
add_image_size( 'size-beta-large', 1200, 700, true );


/* This enqueues the PictureFill element. */
	function enqueue_picturefill() { 
		wp_enqueue_script( 'picturefill', get_template_directory_uri() . '/library/js/picturefill.min.js', array(), '20150125', false );
	}
	add_action( 'wp_enqueue_scripts', 'enqueue_picturefill' );
?>

picture-element.php

<?php if ( get_the_post_thumbnail() != '' ):
    $image_small  = wp_get_attachment_image_src( get_post_thumbnail_id(), 'size-alpha-small' );
    $image_medium = wp_get_attachment_image_src( get_post_thumbnail_id(), 'size-alpha-medium' );
    $image_large  = wp_get_attachment_image_src( get_post_thumbnail_id(), 'size-alpha-large' );

	// These are Breakpoints relative to the site. Using px for the moment
	$mobile = '400px';	
	$tablet = '700px';
?>

	<picture class="picture" data-class="responsive">
	    <!--[if IE 9]><video style="display: none;"><![endif]-->
	    <source srcset="<?php echo esc_url( $image_large[0] ); ?>" media="(min-width: <?php echo $tablet; ?>)">
	    <source srcset="<?php echo esc_url( $image_medium[0] ); ?>" media="(min-width: <?php echo $mobile; ?>)">
	    <source srcset="<?php echo esc_url( $image_small[0] ); ?>"></span>
	    <!--[if IE 9]></video><![endif]-->
	    <img srcset="<?php echo esc_url( $image_small[0] ); ?>">
	</picture>

<?php endif; ?>