[Resolved] Featured Image Background

Home Forums Support Featured Image Background

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #399802
    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

    #400072
    Tom
    Lead Developer
    Lead Developer

    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
    }
    ?>
    #400088
    Antar

    Tom –

    Brilliant.

    Thank you.

    :0)

    Antar

    #400090
    Tom
    Lead Developer
    Lead Developer
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.