Displaying Backstretch Featured Image on Blog or Archive page in Genesis

First upload the backstretch.js and theme-script.js file in js folder of your child theme.

Here is the script of theme-script.js file

jQuery(function( $ ){
    $( "main.content .post .entry-image" ).each( function(){
        var post_image = $(this).data( "entry-img" );
        $(this).backstretch([BackStretchImg]=post_image,{duration:3000,fade:750});
    });
});

Add the following code in your functions.php file:

add_action( 'wp_enqueue_scripts', 'enqueue_bs_script' );
function enqueue_bs_script() {

wp_enqueue_script( 'backstretch-js', get_bloginfo( 'stylesheet_directory' ) . '/js/backstretch.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_script( 'theme-script-js', get_bloginfo( 'stylesheet_directory' ) . '/js/theme-script.js', array( 'backstretch-js' ), '1.0.0' );

}

add_action('get_header', 'backstretch_featured_image');
function backstretch_featured_image(){
// Loading Backstretch Featured image on Home, blog or archive pages
if( is_home() || is_page_template('page_blog.php') || is_archive() ) :
// Removing Default featured image 
remove_action( 'genesis_entry_content', 'genesis_do_post_image', 8 );
// Adding Featured image above the Post Title
add_action( 'genesis_entry_header', 'genesis_do_bs_post_image', 6 );
endif;
}

function genesis_do_bs_post_image(){
$img = genesis_get_image( array(
'format' => 'src',
'size' => "full",
'context' => 'archive',
'attr' => array ( 'class' => 'alignnone post-image' )
) );
if ( $img )
echo '<div class="entry-image" data-entry-img="'. home_url() . $img.'"></div>' . "\n";
}

Add this single line of CSS in your style.css file

  div.entry-image{ height: 400px; }
This site uses cookies to offer you a better browsing experience. By browsing this website, you agree to our use of cookies.