Sridhar Katakam

Genesis and WordPress Tutorials

Slideshow background via Soliloquy slider using Backstretch in Genesis

by 19 Comments

In the past I showed how a single random image can be pulled from images uploaded to a Soliloquy slider and set as body background using Backstretch here.

In this article I share the code for getting URLs of all images uploaded to a Soliloquy slider and passing these to Backstretch for full screen slideshow in Genesis.

Summary of steps:

  • Create a "Background Images" Soliloquy slider and upload/select the desired background images.
  • In a function hooked to soliloquy_output filter, loop through all the images in the above slider one by one, store their URLs in an array and return the array.
  • Enqueue Backstretch and initialize it using theĀ above array variable (having the slide images' URLs)Ā sent from PHP to the .js file using wp_localize_script.

Step 1

Install and activate Soliloquy Lite.

Step 2

Create a slider named say, "Background Images" and upload/select the desired background images. Since we are going to just use it as an easy way to manage the background images, settings in Config and Misc tabs do not matter and need not be configured.

soliloquy-slider-background-images

Step 3

Add the following in child theme's functions.php:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Hi Sridhar. I’d like to use this background slider, but for a specific div and not the whole body of the site. How can I make that happen? Thanks.

    Reply

      • Hi Sridhar,

        I found one issue. I noticed that it breaks other soliloquy sliders added on the front page or any other page. Only the slider code is displayed. When I remove the added code in the functions.php, the other sliders work. Can you replicate this issue?

        Thanks

        Reply

        • Hi Helms,

          Thanks for bringing this to my attention.

          I have corrected the code to fix this problem.

          Changed

          [php] // if this is not the Background Images Soliloquy slider, abort
          $background_images_slider = get_page_by_path( ‘background-images’, OBJECT, ‘soliloquy’ );
          if ( ! $background_images_slider ) {
          return;
          }[/php]

          to

          [php] // if this is not Background Images slider, abort.
          if ( 529 !== $data[‘id’] ) { // replace 529 with the id of Background Images slider
          return $slider;
          }[/php]

          Reply

  • Is there any way to style the background image?
    For example. I’d like to use CSS to blur it, but I can’t work out how to direct the CSS to that section

    Reply
    • >