I use the following code to see if a featured image exists and set my banner image like so:

<?php if ( has_post_thumbnail() ) : 
        $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'hero', '' );
    ?>
    <div class="banner" style="background: url(<?php echo $src[0]; ?>) no-repeat center center; 
                      -webkit-background-size: cover;
                      -moz-background-size: cover;
                      -o-background-size: cover;
                      background-size: cover;">

I would like to alter this and display different images at different breakpoints using:

<?php if ( has_post_thumbnail() ) : 
    $hero = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'hero', '' );
    $tablet = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID), 'tablet', '' );
    $phablet = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'phablet', '' );
    $phone = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'phone', '' );
?>

I'm not sure how to specify the media queries in the I've used something similar with the tag, but I would rather have the image as a background cover.

Any suggestions?

I use the following code to see if a featured image exists and set my banner image like so:

<?php if ( has_post_thumbnail() ) : 
        $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'hero', '' );
    ?>
    <div class="banner" style="background: url(<?php echo $src[0]; ?>) no-repeat center center; 
                      -webkit-background-size: cover;
                      -moz-background-size: cover;
                      -o-background-size: cover;
                      background-size: cover;">

I would like to alter this and display different images at different breakpoints using:

<?php if ( has_post_thumbnail() ) : 
    $hero = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'hero', '' );
    $tablet = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID), 'tablet', '' );
    $phablet = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'phablet', '' );
    $phone = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'phone', '' );
?>

I'm not sure how to specify the media queries in the I've used something similar with the tag, but I would rather have the image as a background cover.

Any suggestions?

• images

1 Answer 1

The way I would do this would be to inline the background: url(...) property.

<?php if ( has_post_thumbnail() ) : 
    $hero = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'hero', '' );
    $tablet = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID), 'tablet', '' );
    $phablet = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'phablet', '' );
    $phone = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'phone', '' );
?>
<style>
    @media only screen and (min-width : 480px) {
        .banner {
            background-image: url('<?php echo $phone; ?>');
        }
    }

    @media only screen and (min-width : 768px) {
        .banner {
            background-image: url('<?php echo $phablet; ?>');
        }
    }

    @media only screen and (min-width : 992px) {
        .banner {
            background-image: url('<?php echo $tablet; ?>');
        }
    }

    @media only screen and (min-width : 1200px) {
        .banner {
            background-image: url('<?php echo $hero; ?>');
        }
    }
</style>
<?php endif; ?>

You'll have to adjust the breakpoints to your needs. Note that I'm selecting the banner by class. If you have mutltiple banners on a page then you'll have to assign each one an ID and use the ID to select them.

The background-size property can be in your stylesheet since it applies to all devices.

An alternative approach would be to sniff out the device on the server side and then only serve the image in the necessary size. This solution would allow you to only serve one image instead of four.

I don't care for that solution because you have to maintain a list of user agent to device type mappings and you don't get a whole lot of benefit.

Most browsers will not fetch images that it does not need, so even though the inline CSS solution serves up four images, only one should actually be downloaded by the browser.

The best solution, I think, would be to use the picture element. Unfortunately browser support for that element isn't so great right now.