Sridhar Katakam

Genesis and WordPress Tutorials

Multiple Backstretched Background Images for Front Page 1 widget area of Digital Pro via Soliloquy

by 21 Comments

Looking to show more than one image for Front Page 1 section in Digital Pro as a slideshow background? In this article I show how images uploaded to a Soliloquy slider can be set as the source for Backstretch script initialized on .front-page-1 based on my previous Slideshow background via Soliloquy slider using Backstretch in Genesis tutorial.

We will set this up such that if Soliloquy plugin is not active or if a slider with the slug front-page-1 is not present, the standard background image in the child theme's images directory will be used as the background for Front Page 1 section. If Soliloquy is indeed active and our front-page-1 slider present, images in this slider will cycle every 3 seconds with a fade effect.

Live Demo

Step 1

Install and activate Soliloquy (the free lite or the premium one) plugin.

Create a slider named Front Page 1 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.

Step 2

Add the following in Digital Pro's functions.php:

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

Already a member? Log in below or here.

  • Hi,
    I would love to use this method to display more background images in the Cafe Pro theme. I know you have a couple of tutorials on how to do that with a normal Soliliquy slider etc, but all those other methods mean that I have to give up on having the images fill the entire browser window. So, I figured this might be a good candidate.

    I have tried for a while to get this to work on the Cafe Pro, but I must obviously be missing something. Any chance we can get a new tutorial like this one, except prepared for Cafe Pro?

    /anders

    Reply

  • Hi Sridhar,

    I’m using this tutorial on a client site, but I’m having an issue with background image alignment on mobile views. The issue occurs in the instance when a particular backstretch image does not have a center focus. Typically, my workaround is to set a declaration of “.front-page-1 .backstretch img” at the proper media query and make the position adjustments. But this only works when I’m dealing with a single image. In the case of this tutorial, I’m using multiple images. Soliloquy supports custom classes per slider, but I don’t think it supports custom classes on images within a single slider instance.

    I need to be able to adjust the positioning–on mobile–of a backstretch image on an as needed basis.

    My guess on how this might be done would be to somehow add a custom class function somewhere in your code that targets the backstretch image itself. I could then manually add my declarations to the css file on an as-needed basis. At a minimum, some version of this idea would suffice. However, a more elegant approach might be to augment the UI in the admin with an image positioning control. On an older site, I’m currently using “Carrington Build” one of the early page builders. In its UI there’s a Hero Image Module with a background positioning tool. See attached.

    What are your thoughts on how to implement this?

    https://www.dropbox.com/s/dw64j52s55pj4ah/Screenshot%202016-08-02%2019.34.44.png?dl=0

    Reply

  • Sridhar,

    Thank you for the tutorial. It helped make my client’s website much better. However, is it possible for the background images to size down proportionally to the viewport? 100% width for a desktop is different than 100% width for a iPhone. I’d like the photos to continue to stretch full width, but to see the entire image as it is viewed on a smaller screen width. You can see what I mean by examining the photos in my client’s site at: http://cokerdental.com. The problem is the 4th image with the woman in the dental chair. Her head cuts off on an iPhone.

    Thanks so much!!

    Theresa 😎

    Reply

  • Hi Sridhar,
    Thank you for this tutorial. My client asked for a slider for the Digital Pro homepage and I like your solution.

    Unfortunately, I’m not able to get the slideshow to work. The image defaults to the Front Page Image, not the slideshow. I’ve double-checked all the file changes, and everything seems to be okay. The Soliloquy slider is named Front Page 1 as instructed.

    Any help you could provide would be appreciated.
    The site is still in development and not visible to the public. I’d be happy to send login info in a private email.

    Thanks very much!
    Linda

    Reply

  • Hello! I am looking all over for some help to change the default backstretch image size in Digital Pro. Customizer requests 1600 by 1050, my image is 1400 by 350, I have looked through so many files, can you help. I really don’t want to add en entire slideshow, just put a long thin image instead of a squarish one. Thanks!!

    Reply

  • Hi Sridhar, I see someone requested if this backstretch slideshow can be made to shrink on phones etc to maintain the image, but just smaller, is it possible? ,My client wants his slides to be seen on phones too.

    Reply
    • >