Sridhar Katakam

Genesis and WordPress Tutorials

Rotating background images in Front Page 1 section of Atmosphere Pro

by 8 Comments

In one of my earlier tutorials titled Front Page 1 background slider in Infinity Pro using Featured Galleries and Backstretch I showed how we can send multiple images uploaded to a gallery attached to the Homepage to Backstretch initialized on Front Page 1 widget area.

In this article, I share the steps to implement the same in Atmosphere Pro so that the images rotate in the background vs as a single background image.

Tested in Atmosphere Pro 1.1.3.

Step 1

Install and activate Featured Galleries.

Step 2

Create a static Page named say Home and set it as Homepage at Settings > Reading.

Step 3

Edit the Home Page and upload your desired background images for Front Page 1 in the Featured Gallery meta box.

Step 4

a) Upload jquery.backstretch.min.js to child theme's js directory.

Since we are not going to use the older (v2.0.4 as of today) backstretch.js file which comes shipped with the theme, you may want to delete it.

b) Edit backstretch-set.js and replace its entire code with

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

Already a member? Log in below or here.

  • Would it not be simpler to use a slider plugin like Soliloquy so that it gives you more control over the images and other functions?

    Reply

    • When doing so, it will not be possible to have it fit exactly inside the FP1 (whose height is dynamic and changes to match user’s viewport height).

      I have presented Soliloquy as an option to the person that requested this and told him about the above limitation and he opted for the solution presented in this tutorial.

      Reply

  • I’ve followed the steps up to Step 7. From what I can tell the front-page.php code is not the same as what’s listed here. Will the replacement code still work?

    Reply
    • >