[Resolved] Featured Image Background

[Antar]

Hello, All –

I wonder if you help me crack something which could be useful for lots of people. On single post pages (under certain conditions) I would like to use the featured image as a background – for the featured image!

I know that sounds crazy but bear with me…

I have a couple of clients who aren’t very good at prepping images for their posts. The result is that lots of times their featured images are the wrong shape/dimensions to appear at the top of the page. Below is a screen shot of a typical example:

http://prntscr.com/gv33t7

The featured image is too small to fill the top of the page so ends up looking like it’s floating in a sea of white space! I want to fix this by covering the background div with a copy of the featured image. Photoshop mock-up below:

http://prntscr.com/gv37e0

It’s the same trick they use will cell phones when filming a movie in portrait mode. It won’t look great every time – but it will make the featured image look more like a proper header and get rid of that awful white space!

I’ve made some progress with code required to create the background effect…

<?php if ( $background = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'full' ) ) : ?>   
<div style="background: url('<?php echo $background[0]; ?>') 50% 50% no-repeat; background-size:cover; box-shadow: inset 0 0 0 1000px rgba(0,0,0,.5);"></div>
<?php endif ?>

I just don’t know how to apply it to the actual GP header div:

<div class="featured-image page-header-image-single grid-container grid-parent">

Could anyone help please?!

Thanks,

Antar

[Tom]

Hi Antar,

Try adding this into the wp_head hook in GP Hooks:

<?php
$image = get_the_post_thumbnail_url( get_the_ID(), 'full' );
if ( $image ) {
    ?>
    <style>
        .page-header-image-single {
            background-image: url('<?php echo $image; ?>');
        }
    </style>
    <?php
}
?>

[Antar]

Tom –

Brilliant.

Thank you.

:0)

Antar

[Tom]

You’re welcome 🙂

[Author]

Posts