WP SITES

Log in

Replace Showcase Pro Front Page Header Image With Slider

—

by

Brad Dalton

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

Comments

14 responses to “Replace Showcase Pro Front Page Header Image With Slider”

  1. Lydia Kurnia Avatar
    Lydia Kurnia

    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

    1. Brad Dalton Avatar
      Brad Dalton

      Did you swap out the path to your images in backstretch-set.js?

      if so, clear all caching and send me FTP or cPanel access if it still doesn’t work.

      1. Lydia Kurnia Avatar
        Lydia Kurnia

        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

        1. Lydia Kurnia Avatar
          Lydia Kurnia

          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

          1. Brad Dalton Avatar
            Brad Dalton

            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.

          2. Lydia Kurnia Avatar
            Lydia Kurnia

            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

          3. Brad Dalton Avatar
            Brad Dalton

            Yes i have contacted them and yes i think it could also affect the menu but the menu works when i test it after adding the fix.

          4. Lydia Kurnia Avatar
            Lydia Kurnia

            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. Diana Brackmann Avatar
    Diana Brackmann

    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!

    1. Brad Dalton Avatar
      Brad Dalton

      You will find the official instructions for adding the logo here https://docs.designbybloom.co/article/143-showcase-pro-adding-a-logo

      You need to add 2 header images. 1 using customize > Header Image and the other using CSS.

      The image you add to the customizer shows in the header when you scroll down. The image link added in the CSS displays over the slides before scrolling down.

  3. Christopher Richmond Avatar
    Christopher Richmond

    Great Tutorial! Is it possible to provide a tutorial using a soliloquy slider?

    Best,

    -Chris

    1. Brad Dalton Avatar
      Brad Dalton

      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.

      [code]
      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’ ) ) ) );

      }
      [/code]

      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

      [code]
      jQuery(document).ready(function($) {

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

      });

      });
      [/code]

      Add some CSS

      [code]
      .home-featured .wrap {
      position: absolute;
      left: 50%;
      top: 50%;}
      [/code]

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

      1. Christopher Richmond Avatar
        Christopher Richmond

        Thank you very much!

        1. Brad Dalton Avatar
          Brad Dalton

          I might write an entire tutorial if i can work out the mobile toggle ( drop down ) menu since i have most of the code worked out.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.