How to use featured post thumbnail as entry background

[DesignJunkie270]

Hey guys,

I usually google and find ways to hack together code that works. This one has been bugging me for ages so thought i would ask on the forum. Suprisingly i cant find the answer to this anywhere online.

So on the blog page i have a huge listing of blog entries. How do i get each entry to use the featured post thumbnail as the background via php? I've tried to see if it fits into the genesis loop, i have even tried to use the code below on the functions.php page. I have nooo idea how to make it work. Any ideas? Im still somewhat a beginner in php so any help would be appreciated!

add_action( 'genesis_entry_header', 'tmh_cover', 9 );
 
function tmh_cover {
    ?>
<style>
	<?php echo ".entry "; ?> {
		background-image:url( <?php echo genesis_get_image; ?>); 
        max-height:600px;
        min-height:400px;

	}
		
	@media only screen and (min-width : 992px) {       
        <?php echo ".$featured_class "; ?> {
        	background-image:url(<?php echo genesis_get_image;?>); 
        }
}
</style>
<?php
}

[D. van de Kamp]

following thread...

[Brad Dalton]

The best way to do this is to use backstretch.

You'll need to change the value for the $image variable so its equals your featured image as well as the class selector in backstretch-set.js from body to .entry.

---

Tutorials for StudioPress Themes.

[DesignJunkie270]

Brad, thanks for the quick response. Given the holiday timeframe i wasn't expecting such a fast answer!

Backstrech.js is pretty cool, you just opened my eyes to a whole new world of possibilities - and changed my perspective a bit. Here is where i'm struggling:

I'm now loading a single entry at a time. At the end of the entry i got the infinite scroll by sridhar katakam and Bill to load the next entry on click.

Where im struggling is, how do i call backstretch to change the background of the new entry (loading in via ajax)?

I found the backstrech call below on chris's backstrech on genesis article and tried to use that in every place i could stick it inside the infinite scroll functions.php function as well as the template-more.php file. Can't seem to get it to work. Any ideas? Once again, thanks for all your help!

//* Localize backstretch script
add_action( 'genesis_after_entry', 'cegg_set_background_image' );
function cegg_set_background_image() {
	$image = array( 'src' => has_post_thumbnail() ? genesis_get_image( array( 'format' => 'url' ) ) : '' );
	wp_localize_script( 'cegg-backstretch-set', 'BackStretchImg', $image );
}

[Author]

Posts