Responsive Images in WordPress

responsive-images.php

/* 
* Start by creating a few image sizes for us to use
*/
add_image_size('smallest', 479, 9999);
add_image_size('small', 768, 9999);
add_image_size('largest', 1800, 9999);


/* 
* Enqueue our Picturefill Javascript
*/
function picturefill_script() {
    wp_enqueue_script( 'picturefill', get_stylesheet_uri() . '/js/picturefill.min.js', '', '', true );
}
add_action( 'wp_enqueue_scripts', 'picturefill_script' );


/* 
* Function we will use to retrieve the Image Alt text
*/
function get_img_alt( $image ) {
    $img_alt = trim( strip_tags( get_post_meta( $image, '_wp_attachment_image_alt', true ) ) );
    return $img_alt;
}


/**************************************************************
*** Implementation of Picturefill using the picture element ***
***************************************************************/

// Start by buildling our source srcset string given an image ID
function add_picture_sources( $image ) {
	$img_small = wp_get_attachment_image_src($image, 'small');
	$img_med = wp_get_attachment_image_src($image, 'medium');
	$img_large = wp_get_attachment_image_src($image, 'large');
	$img_largest = wp_get_attachment_image_src($image, 'largest');


	$srcset =  '<source srcset ="' . $img_largest[0] . '" media="(min-width: 1405px)">';
	$srcset .= '<source srcset ="' . $img_large[0] . '" media="(min-width: 981px)">';
	$srcset .= '<source srcset ="' . $img_med[0] . '" media="(min-width: 768px)">';
	$srcset .=  '<source srcset ="' . $img_small[0] . '" media="(min-width: 468px)">';
	

	return $srcset;
}

// Create a shortcode which builds our desired HTML output
function responsive_insert_image($atts) {

    extract( shortcode_atts( array(
        'id'    => 1,
        'caption' => ''
    ), $atts ) );

	$sources = add_picture_sources($id);

return '<figure class="responsive_img">
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->' .
$sources .
'<!--[if IE 9]></video><![endif]-->
<img srcset="' . wp_get_attachment_image_src($id, 'smallest')[0] . '" alt ="' . get_img_alt($id) . '">
</picture><figcaption>' . $caption . '</figcaption></figure>';

}
add_shortcode( 'resp_image', 'responsive_insert_image' );


// Filter the WordPress Media Uploader to return our shortcode
function responsive_editor_filter($html, $id, $caption, $title, $align, $url) {
	return "[resp_image id='$id' caption='" . $caption . "' ]";
}

add_filter('image_send_to_editor', 'responsive_editor_filter', 10, 9);

/**************************************************************
*** Implementation of Picturefill using the img  element ******
***************************************************************/

// Use an array to build up a list of our image URLs and associated widths
function add_srcset_element($image) {
	
	$sizes = array('smallest', 'small', 'medium', 'large', 'largest');
	$arr = array();
	$get_sizes = wp_get_attachment_metadata($image);

	foreach($sizes as $size) {

		if(array_key_exists($size, $get_sizes['sizes'])) {
			$image_src = wp_get_attachment_image_src($image, $size);
				$image_size = $get_sizes['sizes'][$size]['width'];
				$arr[] = $image_src[0] . ' ' . $image_size . 'w';
			}
		}

	return implode(', ', $arr);
}

// Create a shortcode which passes an image ID to the above function and builds out the necessary HTML
function responsive_insert_image($atts) {

	extract( shortcode_atts( array(
	  'id'    => 1,
	  'caption' => ''
	), $atts ) );

	$srcsets = add_srcset_element($id);

	return '<figure>
	<img sizes="(min-width: 1405px) 50vw, 75vw" srcset="' 
	. $srcsets . '" alt="' 
	. get_img_alt($id) . '">
	<figcaption>' . $caption . '</figcaption></figure>';


}
add_shortcode( 'resp_image', 'responsive_insert_image' );

// Filter the WordPress Media Uploader to return our shortcode
function responsive_editor_filter($html, $id, $caption, $title, $align, $url) {
	return "[resp_image id='$id' caption='" . $caption . "' ]";
}

add_filter('image_send_to_editor', 'responsive_editor_filter', 10, 9);

Line 63 is giving me an unexpected '[' error. Any ideas on how to fix this?

@kahis
this should fix that problem...

function responsive_insert_image($atts) {
    extract( shortcode_atts( array(
        'id'    => 1,
        'caption' => ''
    ), $atts ) );
    $sources = add_picture_sources($id);
    $img_smallest = wp_get_attachment_image_src($id, 'smallest');
    return '<figure class="responsive_img"><picture><!--[if IE 9]><video style="display: none;"><![endif]-->' . $sources . '<!--[if IE 9]></video><![endif]--><img srcset="' . $img_smallest[0] . '" alt="' . get_img_alt($id) . '"></picture><figcaption>' . $caption . '</figcaption></figure>';
}

on line 13, i think should be
wp_enqueue_script( 'picturefill', get_stylesheet_directory_uri() . '/assets/js/picturefill.min.js', '', '', true );