I recently had a client request the ability to add a fullwidth image to specific pages and posts on his site, similar to the Ambiance Pro Theme (affilink) by StudioPress.
He specifically asked that I add this functionality to the Epik Child Theme (affilink) created by Wes Straham.
This is how it looks in the Ambiance Theme
How this works:
When you add an image to the “featured image” widget of a post or page, this code is initiated.
Let’s Get Started
Step One
If your theme folder does not have a folder titled ‘js’ (without quotes), you’ll need to create one.
Step Two
Create 2 new files in the js folder. Be sure to copy the file names listed below exactly. Then open each of the links below, and copy the code into the new files you’ve created in your js folder.
Let me do a little explaining.
backstretch.js is a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element, and this file is the actual plugin. We will NOT be modifying this file.
backstretch-set.js is the file that controls the animation (load time and fading effect) and it is how we assign a class (for styling) to the image. In this case we use the class, “.entry-background”, to control the height, width, and display of the image.
Step Three
You will need to copy and past the code below into your child theme’s functions.php file.
https://gist.github.com/chrisegg/9814500.js
Step Four
Copy and past this code into your child theme’s style.css file.
https://gist.github.com/chrisegg/9821182.js
Done!
That’s all! If you encounter any issues be sure to use the comments here and I’ll do what I can to help!
Source Credit: Brian Gardner (StudioPress) & the Ambiance Pro Theme