0

My goal is to lazy load thumbnails. As seen in here, I need to add class="lazy", placeholder has to be in src and lazy loaded image as data-original.

This code works perfectly:

if ( has_post_thumbnail() ) { 
    $size = 'attachment-thumbnail-400-300';

    //Get thumbnail source
    $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail-400-300' );
    $src = $thumb['0'];

    $placeholder = "//placehold.it/400x300/eee/222/&text=+";

    $default_attr = array(
        'src' => $placeholder,
        'data-original' => $src,
        'class' => "lazy $size",
    );
    the_post_thumbnail('thumbnail-400-300', $default_attr);
}   

This gets source and everything by default:

the_post_thumbnail('thumbnail-400-300'); 

I tried to modify code in many different ways but I got it to work only with this:

 $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail-400-300' );
 $src = $thumb['0'];

It seems like an extra request I don't need (I need to load A LOT of thumbnails). How to modify my code in order to get src directly with the_post_thumbnail and assign it as data-original?

1

You got everything you need, simply build your own img-element like this:

if ( has_post_thumbnail() ) { 
   $class = 'lazy attachment-thumbnail-400-300';

   //Get thumbnail source
   $thumb = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'thumbnail-400-300');
   $src = $thumb['0'];

   $placeholder = "//placehold.it/400x300/eee/222/&text=+";

   echo '<img src="'.$placeholder.'" data-original="'.$src.'" class="'.$class.'" />';
}

Besides that, your main performance issue might be generating a new placeholder every time you want to display an image. Use a local file for that, it´s only a few bytes in size but saves you that extra request (with all the overhead).

|improve this answer|||||
  • Is there a big difference if I use thumbnail or build own image? Hmm.. This code is in while loop - placeholder get's requested with every loop? If I use 1x1 px placeholder from local machine, it reuses it with every loop? – N00b Dec 8 '15 at 16:07
  • There is no real difference, because wp_get_attachment_image_src() simply returns the URL for your 400 x 300 px image. the_post_thumbnail() builds additional HTML output around it. I don´t think that´s a problem in any way. And yes, a local file will of course be used again and again. But you can link directly to it and don´t need to connect to a foreign server, generate the image and wait for it... Much faster obviously. – flomei Dec 8 '15 at 16:47
  • If you want to test the perf for local vs. placehold.it, check out the Pref Map Chrome Extension. It's pretty slick for visualizing load times of image resources. Also, I just wanted to mention that WP 4.4 comes with responsive image support and it's worth taking a look here to see how the markup above might change - should you decide to use responsive images. – jgraup Dec 8 '15 at 22:53
0

How to modify my code in order to get src directly with the_post_thumbnail and assign it as data-original?

You can use str_replace and preg_match with get_the_post_thumbnail.

$size = 'attachment-thumbnail-400-300';
$placeholder = 'src="//placehold.it/400x300/eee/222/&text='.urlencode('+').'"';
$pattern = '/src\s*=\s*"(.+?)"/'; 

$thumb = get_the_post_thumbnail($post->ID , 'thumbnail-400-300'); 

preg_match($pattern, $thumb, $matches, PREG_OFFSET_CAPTURE);

if ( ! empty($matches) ){

    $src = $matches[0][0];

    $thumb = str_replace( $src, $placeholder, $thumb );

    $thumb = str_replace( 'class="', 'class="' . "lazy $size ", $thumb );

    $data_original = str_replace( 'src="', 'data-original="', $src );

    $thumb = str_replace( ' src="', $data_original . ' src="', $thumb );
}

echo $thumb;
|improve this answer|||||
  • What? no props for using 'the_post_thumbnail' in the solution? – jgraup Dec 8 '15 at 22:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.