Instantly share code, notes, and snippets.

Embed
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
ksort($images);
$srcset = implode(",\n",$images);
ob_start();
?>
<picture>
<!--[if IE 9]><video style="display: none"><![endif]-->
<source
data-srcset="<? echo $srcset?>"
data-src="<?echo $img["sizes"]["thumbnail"]["src"] ?>" />
<img
<? // A generated image to validate?>
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-sizes="auto"
data-src="<?echo $img["sizes"]["thumbnail"]["src"] ?>"
class="lazyload"
<?if ($img["alt"]) {?>alt="<? echo $img["alt"]; ?>" <? }?>
/>
<!--[if IE 9]></video><![endif]-->
</picture>
<?
//we put all the "echoed" data into a variable
$result = ob_get_clean();
if ($echo) echo($result);
return $result;
}
// SHORTCODES
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', "//cdnjs.cloudflare.com/ajax/libs/lazysizes/1.3.2/lazysizes.min.js",false,"1.3.2",true );
}
@pikilon

This comment has been minimized.

Show comment
Hide comment
@pikilon

pikilon 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).

Owner

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