Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Wordpress lazysizes implementation for image attachments
* Get all the info we can get from a WP attachment
* @param int $img_id attachment id of the image to obtain the info
* @return an associative array with all the info of the image
function get_all_image_info($img_id) {
$img = wp_get_attachment_metadata($img_id);
//we add the original source info to the sizes array given in the previous function
$img["sizes"]["full"] = array(
"file"=> substr(strrchr($img["file"],"/"),1),
"width" =>$img["width"],
"height" =>$img["height"]
//we put the path for all the images.
$img["path"]= content_url()."/uploads/".str_replace($img["sizes"]["full"], "", $img["file"]);
//we set the src for each size
foreach($img["sizes"] as &$size) {
$size["src"] = $img["path"].$size["file"];
//other usefull info
$img["alt"] = get_post_meta( $img_id, '_wp_attachment_image_alt', true );
$info = get_post($img_id);
$img["caption"] = $info->post_excerpt;
$img["description"] = $info->post_content;
$img["title"] = $info->post_title;
$img["id"] = $img_id;
return $img;
* Print or return a responsive lazy image
* @param int $img_id attachment id of the image to print the html layout for lazysizes
* @param boolean $echo print the result directly or only returned
* @returns the picture HTML tag
function lazy_responsive_image($img_id=false,$echo=true) {
//if no id is given will try to get the thumbnail of the post.
if (!$img_id) {
global $post;
$img_id = get_post_thumbnail_id( $post->ID );
$result = false;
//we get all the info from the attachment with my own function.
$img = get_all_image_info($img_id) );
//lets create the string with all the sizes
$images = array();
foreach ($img["sizes"] as $size) {
$images[$size["width"]] = $size["src"]." ".$size["width"]."w";
//reordering by the width
$srcset = implode(",\n",$images);
<!--[if IE 9]><video style="display: none"><![endif]-->
data-srcset="<? echo $srcset?>"
data-src="<?echo $img["sizes"]["thumbnail"]["src"] ?>" />
<? // A generated image to validate?>
data-src="<?echo $img["sizes"]["thumbnail"]["src"] ?>"
<?if ($img["alt"]) {?>alt="<? echo $img["alt"]; ?>" <? }?>
<!--[if IE 9]></video><![endif]-->
//we put all the "echoed" data into a variable
$result = ob_get_clean();
if ($echo) echo($result);
return $result;
add_shortcode( 'lazy_responsive_img', 'lazy_responsive_img_shortcode');
* A shortcode to display the lazysizes images
* @params string ids a comma separated images ids
* @return a set of html tags with the imgsizes
function lazy_responsive_img_shortcode( $atts ) {
//returns a msg to alert the img couldn't been found.
$result = "[lazy_responsive_img can't find the image, sorry]";
// if no ids given get the featured image
if (!isset($atts["ids"])) {
global $post;
$atts["ids"] = get_post_thumbnail_id( $post->ID );
//if we still don't have the ids return the error result
if ($atts["ids"]) {
$ids = explode(",", $atts["ids"]);
//let's populate the result with items
$result = array();
foreach ($ids as $img_id) {
$result[] = lazy_responsive_image($img_id,$echo=false);
//array to the result string
$result = implode("\n", $result);
return $result;
// We add the javascript from CDN in the bottom of the page, without it everything else is useless
add_action( 'wp_enqueue_scripts', 'lazysizes_js' );
function lazysizes_js() {
wp_enqueue_script( 'lazysizes', "//",false,"1.3.2",true );

pikilon commented Dec 14, 2015

A little Wordpress snippet/plugin to show lazy and responsive images using the lazysizes.js.

Shortcode like this:
[lazy_responsive_img ids="132,109"]

in addintion we have a function to return all possible data from images called get_all_image_info($id).

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