[Resolved] Featured image on single post as div background.

Home Forums Support [Resolved] Featured image on single post as div background.

Home Forums Support Featured image on single post as div background.

  • This topic has 7 replies, 4 voices, and was last updated 5 years ago by Tom.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #200953
    Nick

    I use featured images for my posts and they show up on the single post pages. What I would like to do is set the featured image on the single post pages as the background of a div so that they are a uniform aise. If the image is smaller than the containing div, I would like a different part of the image to be revealed as the page is scrolled.

    Basically, I want to replace this:

    <div class="page-header-image-single grid-container grid-parent">
    <img src="featured-image-url>
    </div>

    with this:

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

    #200987
    Tom
    Lead Developer
    Lead Developer

    Something like this might help: http://wordpress.stackexchange.com/questions/115954/featured-image-as-background-image-on-pages

    So you could write some CSS in the wp_head hook in GP Hooks like this:

    <?php 
    $thumb = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'full' );
    
    if ( $thumb && is_single() ) {
        ?>
        <style>
            .whatever-element {
                background-image: url( $thumb );
            }
        </style>
        <?php
    }
    ?>

    Make sure you check the “Execute PHP” checkbox.

    #201063
    Nick

    Thank you Tom, that did the trick.

    At first the code snippet you provided didn’t exactly work. With the help of the link you provided, I was able to get it working.

    I replaced
    background-image: url( $thumb );
    with

    background-image: url('<?php echo $thumb['0'];?>')

    and it worked perfectly.

    I also added the following CSS so that the post image is hidden on the single page.

    img.wp-post-image {
         display: none;
       }
    

    Ultimately, my final code snippet looks like this:

        <?php 
    $thumb = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'full' );
    
    if ( $thumb && is_single() ) {
        ?>
        <style type="text/css">
            div.page-header-image-single {
                background-image: url('<?php echo $thumb['0'];?> ');
                background-attachment: fixed;
                background-repeat: no-repeat;
                background-position: top;
    	    width: 100%;
    	    height: 300px;
                margin: 0px;
            }
            img.wp-post-image {
                display: none;
            }
        </style>
        <?php
    }
    ?>

    Thank you again for your help. The add-on made it very easy.

    #201097
    Tom
    Lead Developer
    Lead Developer

    Ah, of course – that’s what happens when you provide code at midnight ๐Ÿ™‚

    Glad you got it sorted out – thanks for posting the code!

    #243579
    Wim

    Just passing through the comments as I was merely looking for the same thing.
    I got your solution working, but there’s an extra catch: the image must be blurred.
    Came across the same effect on wpclips for genesis: http://clipbank.wpclips.net/clips/genesis-bg-featured-img-fx/ and that’s exactly what I was looking for, but for generatepress.
    The problem I have is that everything is blurred, except the background image.
    I guess a container must be added just after the body?
    Could you help me out on this?
    Thanks.

    #243634
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    I’m not too sure what you mean? Can you show me an example of the blurred image?

    #243716
    Wim

    Hi Tom, thanks for replying.
    I followed the demo on http://demos.wpclips.net/templates/genesis-bg-featured-img-fx/ and found a solution.
    Just hook a div for the image in the wp_head, css add the featured image to it, flip and blur.

    For those who are looking for something similar, here is the code. Don’t forget to execute php.

    <?php 
    $thumb = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'full' );
    
    if ( $thumb && is_single() ) {
        ?>
     <div class="bg-featured-image"></div>
        <style type="text/css">
           .bg-featured-image {       
                background-image: url('<?php echo $thumb['0'];?> ');
                background-attachment: fixed;
                background-size: cover;
                height: 100%;
                position: fixed;
                width: 100%;
                z-index: -99;
                -webkit-filter: blur(10px) brightness(110%);
                filter: blur(10px) brightness(110%);
                -ms-transform: scale(-1.1,1.1);
                -webkit-transform: scale(-1.1,1.1);
                transform: scale(-1.1,1.1);   
                margin: 0px;
            }
        </style>
        <?php
    }
    ?>
    #243822
    Tom
    Lead Developer
    Lead Developer

    Awesome, thanks for posting the solution ๐Ÿ™‚

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.