tweak: single post header picture wrong

[Jean-Pierre Michaud]

your single.php

your way, not resized, completely useless to call the thumbnail if you are not using it

       <?php
        $is_photo = '';
        $style = '';
        if ( has_post_thumbnail() ){
            $id = get_post_thumbnail_id($post->ID);
            $style = 'style="background-image: url('.wp_get_attachment_url($id).')"';
            $is_photo = 'data-photo="yes"';
        }
        ?>
        <header class="page-cover table" <?php echo $is_photo; ?> <?php echo $style; ?>>

result: this image is also one of the biggest on the whole web…
<header class="page-cover table" data-photo="yes" style="background-image: url(http://yoursite.com/wp-content/uploads/2015/11/Georgetown_PowerPlant_interior_pano-27184x16995.jpg)">

corrected, speed, size and all media compatible:

        <?php
        $style = ( has_post_thumbnail() ) ? 'style="background-image: url(' . get_the_post_thumbnail_url( $post ) . '); background-position: center;background-size: cover;background-repeat: none;" data-photo="yes"' : '';
        ?>
        <header class="page-cover table" <?php echo $style; ?>>

result:
<header class="page-cover table" style="background-image: url(http://yoursite.com/wp-content/uploads/2015/11/Georgetown_PowerPlant_interior_pano.jpg-624x416.jpg)" data-photo="yes">

why is this a solution?…
– because it loads the featured image as it is supposed to, and show properly
– because my code is smaller 🙂
– because the code i add is compatible with all browsers and mobiles, compared to your code which bring crappy resizing effect in some platforms

[Anonymous]

Hi @jeanpierre
We have used full image up to now and and reducing image size will affect other customers

I have updated our code with your approach with slight modification.

        <?php
        $style = ( has_post_thumbnail() ) ? 'style="background-image: url(' . get_the_post_thumbnail_url( $post ,$size = 'post-thumbnail') . '); background-position: center;background-size: cover;background-repeat: none;" data-photo="yes"' : '';
        ?>
        <header class="page-cover table" <?php echo $style; ?>>

Thanks

[Anonymous]

if we go with limited apprach for thumbnail or medium or large image size
Background image will be blur or stretched.

Regards
Varun Dubey

[Jean-Pierre Michaud]

.. funny that you take my “approach”, but franckly, Varun, this is just pure php, there is nothing changed in here… most of your codes need to fit the latest OOP protocols and that quite simple.

for the streched and blur thing, you are right… would be better to have a “selection based on display”, as you can do it simply… cellphones do not need to see the 4000 px wide header images when loading a page. it’s easy to detect what image size to use, it’s basic wordpress code.

remember that not all the admins are design geeks that know exactly how to use 35mb photos on a webpage…

[Anonymous]

🙂 i agree.
We have updated queries with media parameter
Thanks