Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Responsive Images in WordPress
/*
* 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);
@kahls

This comment has been minimized.

Copy link

@kahls kahls commented Feb 4, 2015

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

@floq-design

This comment has been minimized.

Copy link

@floq-design floq-design commented Apr 3, 2015

@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>';
}
@qutek

This comment has been minimized.

Copy link

@qutek qutek commented Nov 9, 2015

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment