WP SITES

2766

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

Replace Showcase Pro Front Page Header Image With Slider

This tutorial provides the solution which enables you to replace the page header background image with a responsive slider on the front page of the Showcase Pro theme by Bloom.

By default, the background image for the page header on the front page is added via the customizer. You’ll also find the PHP code below to remove this setting from the customizer.

Demo Video #

The video demo shows you how the slide show only displays on the front page and resizes on smaller screens.

Code Installation #

Once you download the folder below, follow these 3 steps :

Step 1 : Replace the front-page.php file in the Showcase Pro themes root directory with the modified front-page.php file from the download folder.

Step 2 : Merge the js folder with the Showcase Pro themes js folder or copy over the js files from the download folder into the Showcase Pro themes existing js folder.

Register for full access

Reader Interactions

Comments

  1. Hi Brad,

    Thank you so much for this tutorial – but somehow it didn’t work for me. I followed the steps (replaced the front page php and replace the backstretch images with my own) but for some reason the images failed to appear on the website. Are you able to help?

    Cheers,
    Lydia

      • Hi Brad,

        Thanks so much for the swift reply. Yes I swapped out the path to my images and I’ve cleared all cache, it still doesn’t work… what have I done wrong?

        https://thefamilydoctors.com.au/

        Happy to send you the cpanel access so you can hopefully figure out what I did wrong. Where should I best send the details to?

        Cheers,
        Lydia

        • Hi Brad, I have sent the cpanel details via the contact form – hope you can help figure out what the problem is… I will go to sleep now and check in the morning. Thanks so much again for your help as always!
          Cheers,
          Lydia

          • This is a bug in the Showcase Pro child theme i have advised the theme developer of and added a fix to make it work however that fix involved removing the .global.js file from loading on the front page. Will be able to remove this fix once they update the theme. The issue is not with my code as its always tested and shown working in the video demo.

          • Thanks, Brad, yeah I know your code works I have used it on another theme before and it worked wonders. I hope they fix it soon. Have you let them know about it? I have also contacted them about another issue re: the mobile menu – it seems to have disappeared too. I wonder if it is related to the same bug.

            Again thank you for your help.

            Cheers,
            Lydia

          • Wonderful, thanks, Brad. Will you let me know if they come back to you with a fix so I can implement your codes? I will let you know too if they come back to me re: the mobile menu.

            Cheers, Lydia

  2. Hi
    I have an interesting problem. With a fresh installation of showcase pro I made these edits and the header background image is replaced with a slider and works wonderfully. However as soon as I add the “Header Image” in the customizer, the site title is replaced with a “Showcase” graphic overlaying the slider images and I can’t seem to edit this?

    Thanks!

    • Yes, however it requires an extra 335 lines of CSS which is loaded from Soliloquy. You can do this using CSS & Backstretch.

      Here’s the PHP for loading soliloquy using backstretch from functions.php.

      add_action( 'wp_enqueue_scripts', 'centric_slider' );

function centric_slider() {

    if ( ! is_front_page() )
    return;
    
    if ( ! function_exists( 'soliloquy' ) )
    return;
	
	wp_enqueue_script( 'slider', get_stylesheet_directory_uri() . '/slider/backstretch.js', array( 'jquery' ), '1.0.0', true );
	wp_enqueue_script( 'slider-settings', get_stylesheet_directory_uri() . '/slider/backstretch-set.js' , array( 'jquery', 'slider' ), '1.0.0', true );
	
	wp_localize_script( 'slider-settings', 'BackStretchImg', array( 'src' => str_replace( 'http:', '', soliloquy( '3964' ) ) ) );
	
 	
}

      Swap out the slider id 3964 with your own.

      If you want to float the widget over the slider, you’ll need to add more CSS.

      And here’s the modified jQuery in slider > backstretch-set.js

      jQuery(document).ready(function($) {

	$(".home-featured").backstretch([BackStretchImg.src]);

	
	});

});

      Add some CSS 

      .home-featured .wrap {
    position: absolute;
    left: 50%;
    top: 50%;}

      CSS will need tweaking depending on the height of images and widget content.

Leave a Reply