get_the_post_thumbnail src attribute value

  • What’s the reason for the get_the_post_thumbnail method to put a link to the full res image in the src attribute?

    I have a hi-res featured image for a post. In the post list I’m displaying post thumbnail 300 pixels wide. WordPress produces correct secret attributes so that browsers load low-res images but not original hi-res image.

    However, src attribute of the img tag contains a link to the original hi-res image. The downside of that behavior is that Google PageSpeed thinks my website is slow. According to current information slow websites get worse SEO-ratings than faster performing ones.

    So my question is why is this the default behavior and if there any way to change it?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Bunty

    (@bhargavbhandari90)

    You can do something like this. Just pass the image size as 2nd parameter.

    get_the_post_thumbnail( $post_id, 'thumbnail' );      // Thumbnail (Note: different to Post Thumbnail)
get_the_post_thumbnail( $post_id, 'medium' );         // Medium resolution
get_the_post_thumbnail( $post_id, 'large' );          // Large resolution
get_the_post_thumbnail( $post_id, 'full' );           // Original resolution
    Thread Starter chebum

    (@chebum)

    Thanks for the reply @bhargavbhandari90. That’s what I do. Unfortunately, this only adds width, height attributes to the img tag but doesn’t scale the image.

    Here is my code:
    echo get_the_post_thumbnail( get_the_ID(), $image_size );

    and this is what it produces:
    <img width="355" height="237" src="https://nikitina.pl/wp-content/uploads/2016/12/julia-nikitina-portfolio-Marta112-Large.jpg" class="attachment-nakamura-port-list-landscape size-nakamura-port-list-landscape wp-post-image" alt="Portfolio-stylistka-julia-nikitina-Marta12" srcset="https://nikitina.pl/wp-content/uploads/2016/12/julia-nikitina-portfolio-Marta112-Large.jpg 1620w, https://nikitina.pl/wp-content/uploads/2016/12/julia-nikitina-portfolio-Marta112-Large-300x200.jpg 300w, https://nikitina.pl/wp-content/uploads/2016/12/julia-nikitina-portfolio-Marta112-Large-768x512.jpg 768w, https://nikitina.pl/wp-content/uploads/2016/12/julia-nikitina-portfolio-Marta112-Large-1024x683.jpg 1024w, https://nikitina.pl/wp-content/uploads/2016/12/julia-nikitina-portfolio-Marta112-Large-1200x800.jpg 1200w, https://nikitina.pl/wp-content/uploads/2016/12/julia-nikitina-portfolio-Marta112-Large-425x283.jpg 425w, https://nikitina.pl/wp-content/uploads/2016/12/julia-nikitina-portfolio-Marta112-Large-650x433.jpg 650w, https://nikitina.pl/wp-content/uploads/2016/12/julia-nikitina-portfolio-Marta112-Large-1300x867.jpg 1300w" sizes="(max-width: 355px) 100vw, 355px">

    As you can see the src tag references full-res post featured image.

    Thread Starter chebum

    (@chebum)

    Aha. I found the issue. The problem happens only with images that were uploaded BEFORE new theme were applied. Exact size weren’t generated and thus not shown.

    However, I still don’t understand why julia-nikitina-portfolio-Marta112-Large-425×283.jpg wasn’t selected.

    Thread Starter chebum

    (@chebum)

    deleted

    • This reply was modified 8 years, 1 month ago by James Huff.
    • This reply was modified 8 years, 1 month ago by chebum.
    Bunty

    (@bhargavbhandari90)

    I tried by this:

    echo get_the_post_thumbnail( get_the_ID(), 'medium' );

    And got this:

    <img width="300" height="225" sizes="100vw" srcset="https://localhost/wordpress/wp-content/uploads/2017/01/Chrysanthemum-300x225.jpg 300w, https://localhost/wordpress/wp-content/uploads/2017/01/Chrysanthemum-768x576.jpg 768w, https://localhost/wordpress/wp-content/uploads/2017/01/Chrysanthemum.jpg 1024w" alt="" class="attachment-medium size-medium wp-post-image" src="https://localhost/wordpress/wp-content/uploads/2017/01/Chrysanthemum-300x225.jpg">

    So check if “$image_size” has some value or not. Try by putting static image size like I did.

    Also check all image sizes by installing “AJAX Thumbnail Rebuild” plugin.

    • This reply was modified 8 years, 1 month ago by Bunty.
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘get_the_post_thumbnail src attribute value’ is closed to new replies.

Tags