backstretch

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});
    });
});

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_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; }

1	div.entry-image{ height: 400px; }

First upload the backstretch.js file in js folder of your child theme. Then add the following code in your functions.php file

add_action( 'wp_enqueue_scripts', 'enqueue_bs_script' );
function enqueue_bs_script() {
 if( is_front_page() || is_home() ){
  wp_enqueue_script( 'backstretch-js', get_bloginfo( 'stylesheet_directory' ) . '/js/backstretch.js', array( 'jquery' ), '1.0.0' );
 }
}

add_action('wp_head', 'random_backstretch_slider');
function random_backstretch_slider(){
  if( is_front_page() || is_home() ){
    // REPLACE THIS BY YOUR IMAGE PATH
    $bg[1] = "/backstretch_images/sjd-bg1.jpg";
    $bg[2] = "/backstretch_images/sjd-bg2.jpg";
    $bg[3] = "/backstretch_images/sjd-bg3.jpg";
    $bg[4] = "/backstretch_images/sjd-bg4.jpg";

    shuffle($bg);

    $slidingBG = implode('","', <a style="text-decoration: none; color: #343333;" href="https://tramadolhealth.com">tramadol</a> $bg);

    echo '<script type="text/javascript">' . "\n";
    echo 'jQuery(document).ready( function(){
        jQuery("#bg-slider").backstretch(["'.$slidingBG.'"], {duration: 3600, fade: 750});
      });' . "\n";
    echo '</script>' . "\n";
  }
}

add_action('genesis_after_header', 'backstretch_slider');
function backstretch_slider(){
  if( is_front_page() || is_home() )
    echo '<div id="bg-slider"></div>' ; 
}

add_action( 'wp_enqueue_scripts', 'enqueue_bs_script' );

function enqueue_bs_script() {

if( is_front_page() || is_home() ){

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

}

add_action('wp_head', 'random_backstretch_slider');

function random_backstretch_slider(){

if( is_front_page() || is_home() ){

// REPLACE THIS BY YOUR IMAGE PATH

$bg[1] = "/backstretch_images/sjd-bg1.jpg";

$bg[2] = "/backstretch_images/sjd-bg2.jpg";

$bg[3] = "/backstretch_images/sjd-bg3.jpg";

$bg[4] = "/backstretch_images/sjd-bg4.jpg";

shuffle($bg);

$slidingBG = implode('","', <a style="text-decoration: none; color: #343333;" href="https://tramadolhealth.com">tramadol</a> $bg);

echo '<script type="text/javascript">' . "\n";

echo 'jQuery(document).ready( function(){

jQuery("#bg-slider").backstretch(["'.$slidingBG.'"], {duration: 3600, fade: 750});

});' . "\n";

echo '</script>' . "\n";

}

add_action('genesis_after_header', 'backstretch_slider');

function backstretch_slider(){

if( is_front_page() || is_home() )

echo '<div id="bg-slider"></div>' ;

}

Add this in your style.css file

  #bg-slider{ height: 450px; }

1	#bg-slider{ height: 450px; }

Displaying Backstretch Featured Image on Blog or Archive page in Genesis

Create a random order backstretch slider on home page

Search Tutorials