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
NIce Chris …thank you. What would I need to add if a featured image was not selected…..so I have a default fallback image?
Appreciate it…thanks
Vernon, glad the tutorial was helpful!
This should do it for you…
First you need to add this to functions.php, along with the code above.
//* Add body class if no featured image
add_filter( ‘body_class’, ‘egg_featured_img_body_class’ );
function egg_featured_img_body_class( $classes ) {
if ( is_singular( array( ‘post’, ‘page’ ) ) && ! has_post_thumbnail() ) {
$classes[] = ‘no-featured-image’;
}
return $classes;
}
Second, add this to your style.css file.
.no-featured-image .entry-background {
background: url(images/your-image-title.jpg) no-repeat;
height: 180px; /*adjust this to support your image */
}
Be sure to upload your image to the images folder inside your child theme folder.
Let me know if you need anything else…
— Chris
Hey Chris, the code to have a default image when no featured image is selected isn’t working for me. I’ve got this in my CSS file:
.no-featured-image .entry-background {
background: url(‘images/Davie-Community-Foundation.jpg’) no-repeat;
height: 375px;
}
and this in my functions.php:
//* Add body class if no featured image
add_filter( ‘body_class’, ‘egg_featured_img_body_class’ );
function egg_featured_img_body_class( $classes ) {
if ( is_singular( array( ‘post’, ‘page’ ) ) && ! has_post_thumbnail() ) {
$classes[] = ‘no-featured-image’;
}
return $classes;
}
Thanks Chris….works like a charm. Is there anyway to get this fallback image to also “backstretch” as it does not currently? Appreciate it. I will be contacting you directly with further “issues” you might be able to be of service with…..thanks
Yeah so you’ll have to do this with CSS:
Replace:
.no-featured-image .entry-background {
background: url(images/your-image-title.jpg) no-repeat;
height: 180px; /*adjust this to support your image */
}
With:
.no-featured-image .entry-background {
background-image: url(images/your-image-title.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: scroll; /* change scroll to fixed if you want the page to scroll over the image */
height: 180px; /* adjust this to define the hight of the area */
}
For good resolution make sure the image you’re using is at least 1600px wide and the hight should be a little bigger then what you’ve set in the CSS above.
The “background-size: cover;” will pull the image to fit the screen of the device. So it’s important to have a good sized image.
Let me know if you need any more help with this!
I look forward to hearing from you on those other issues…
— Chris
This has been excellent and very useful I have used it on a current site. I would like the image to be fixed and have set this in the stylesheet, but it does not work – If I look in firebug there seems to be some inline styling that has ‘scroll’, I cant understand where this comes from.
many thanks
Hi Chris
This issue about not getting the images to be fixed is odd – above is URL. Would love to get the text to scroll ‘over’ the image. Many thanks
Awesome! thank you Chris.
Hi Chris,
I added this code to a template and I am getting a white screen. I am looking for problems in the code. Do you see any problems?
I know the code works…I’d need to see your site to see if I could find a problem…Can you share your link or email it to me ch***@************ng.com?
Hi Chris,
Very nice. I want to make the background image sit behind my text on my pages. The background image works fine but pushes the content down so its not truly a background image.
Can that be done?
Hi Chris
I’m having difficulty as after I followed all these steps the image doesn’t display – I just get the space where it should be. I’m using Dynamik Website Builder on local host. I added the to JS files to the JS folder and pasted in the php and CSS to the relevant boxes under “Dynamik – Custom Options”. Is there anything glaringly obvious that I’m missing?
I’ve never tried this with Dynamik. It sounds like your’ve done everything right, I’ll test it and see.
Hey there, I’m getting a blank space where my featured image should be. Any ideas? The page is located here: https://chambersite.daviechamber.com/chamber/
Also, using Genesis sample theme.
THANKS!
I’m doing some testing now, I’ll let you know what I can figure out….
– Chris
Ok all is working correctly. Please be sure you’re following steps 1 and 2 correctly.
I can confirm Cold Wet Bloke’s comments, I did the same but all I get is a placeholder for the image, without the image itself when done with Dynamik.
Ok thanks. I’ll test this today and let you know what I discover.
– Chris
hi Chris, did you have a chance to test it already?
Yes I tested it…and it works fine…
https://demo.wpmantis.com/themehacks/hello-world/
I followed the tutorial exactly.
Sorry the code has been lost, from the page for now. I’m working on fixing it.
– Chris
Hi Chris,
This doesn’t quite work correctly for me. I can get an image to appear on my homepage, but it doesn’t stretch to fit the page, it sits in a box above the text, not behind the text area, and doesn’t fill the page responsively.
Regards,
Jonathon.
Hey Jonathon,
So this particular solution is suppose to “sit in a box above the text”. It’s not suppose to be behind the text area.
As for the image not stretch to fit the page, this I’m not sure. I just tested it and everything seems to be working the way it is suppose to; https://demo.wpmantis.com/themehacks/hello-world/.
If you want to share a link to the page where you tried the code, I’ll take a look.
This is the original theme that was built using this trick: https://wpmantis.com/go/ambiance
– Chris
Hi Chris,
In fact it does work, apologies.
2 things to ask:
1. How to add this to my blog archives background. It’s set as a category (‘blog’ category), but visiting the categor/blog doesn;t have the option to add this background image.
2. Is it possible to set the background image to contain multiple images instead of just the featured image? The responsive design of your solution makes this a great way to display images responsively, it would be a great alternative to the slider I currently use. Can I add multiple images and enable displaying at full ratio regardless of the page being empty of text?
Regards,
Jonathon.
Hi Chris, you can see my site at https://www.jonathon.co
How does it look to you? I’ve added a featured image to many pages and posts, and it now sits behind the text, not in a box above it. It looks fine when I’m logged out of wordpress, but I can’t see a featured image on thepage when I’m logged in…..
Hi Chris,
Any idea why the featured image looks like a background, full width, responsive image when I’m logged out, but when logged in the image disappears and there’s a white gap above my text?
Thanks!
Resolved. I bouhgt the following plugin and it works brilliantly: https://pippinsplugins.com/products/full-screen-background-images-pro/
I’m also having the same issues where it is only showing a blank space instead of the featured image…
Ok this is an issue generally caused by not following step 2 correctly. Please make sure that the file names and the content within the files is exactly the same as shown above.
Also make sure that you did not change any code in step 3 and that you did not change the class “.entry-background” in step 4.
– Chris
This is a super awesome tutorial. Thank you!
The only issue I’m having is that we have a really large gallery loading on some of the pages and the featured image loads after the gallery. So sometimes it takes around 30 seconds for the featured image to display. We are trying to optimize the gallery to load faster, but is there a way to make the featured image load before any plugins? We tried loading the js in the head, but we get the error “BackStretchImg not defined”. I don’t really have the javascript knowledge to troubleshoot. Any help would be greatly appreciated!
You can try changing these two lines in step 3:
wp_enqueue_script( 'cegg-backstretch', get_bloginfo( 'stylesheet_directory' ) . '/js/backstretch.js', array( 'jquery' ), '1.0.0', true, 5 );
wp_enqueue_script( 'cegg-backstretch-set', get_bloginfo( 'stylesheet_directory' ) . '/js/backstretch-set.js' , array( 'jquery', 'cegg-backstretch' ), '1.0.0', true, 5 );
I’ve added a 5 to the end of the code which gives it a higher priority.
0 is highest, 10 is default, 5 is usually what we use.
Let me know if it helps!
– Chris
Thanks for the response! It is still loading slowly because of our galleries. I might need to try a css solution instead.
Hi Chris,
Thank you so much for this script! It is working great. I am wondering if you know of a way to get the post/page title inside . I have tried several things but can’t seem to get it to work.
Thank you!
Hi Chris,
Thank you so much for this script! It is working great. I am wondering if you know of a way to get the post/page title inside the entry-background div. I have tried several things but can’t seem to get it to work.
Thank you!
I figured it out. I updated your script a little. Let’s see if it let’s me post the code:
[code language=”css”]
//* Hook entry background area and add title
add_action( ‘genesis_after_header’, ‘cegg_entry_background’ );
function cegg_entry_background() {
$title = apply_filters( ‘genesis_post_title_text’, get_the_title() );
?>
<?php
}
[/code]
I used the code from ilias but it wasn’t working for me so I adapted it to make it work. Now it does, perfectly (at least for me), hope it helps:
//* Hook entry background area and add title
add_action( 'genesis_after_header', 'cegg_entry_background' );
function cegg_entry_background() {
$title = apply_filters( ‘genesis_post_title_text’, get_the_title() );
if ( is_singular( 'post' ) || ( is_singular( 'page' ) && has_post_thumbnail() ) ) {
echo '' . '' . $title . '' . '';
}
}
I added some custom CSS to make the title appear on the middle. It includes a semi-transparent background that is nice and ensures legibility:
.entry-background {
display: table;
}
.entry-background h1 {
text-align: center;
vertical-align: middle;
display: table-cell;
background-color: rgba(255,0,0,0.4);
color: #fff;
}
Hey Melania, thanks for the code…I got it all posted for you!
Hi, Chris,
I’ve got a client who’s selected The 411 Pro theme from StudioPress. As I’m sure you’re aware, it’s already got the backstretch code in place. However, the way they’ve implemented it is so that it restrict you to using a single image, and won’t ‘see’ a featured image and use that instead. I need to figure out how to hack the 411-Pro code so that it only uses the default backstretch image if there’s no featured image detected, and default to using the featured image as the backstretch image. Any idea how I can make this happen? From what I’ve read, the 411-Pro theme is kind of an odd duck in the way it works…seems several Genesis plugins won’t work with it.
Thanks!
Brad
Hello Sir,
I have gone through your article, below codes are not available.
Step Three : Function.php
Step Four : CSS
Will you share that or link to both file from where i can download it.
Thanks in advance
Should be good…
I added this code in a website and it is perfectly fit what I was looking for. Thank you for the script.
I was also trying @Melania code for lay heading over the feature image but it is not working for epik theme.
I’m glad it worked! And thanks for the update on the epik theme and @Melania’s code.
Oke, really f up. I have to reinstall everything.
I’m guessing this didn’t work for you? Do you need some help getting it implemented?
– Chris
Hello Chris,’
It is a very nice post and works just fine.
But I don’t want my posts to include this code, that is I only want the pages to have this function so when I add a featured image to a page it appears like this but the posts have no effect when I add a featured image to them.
Is it possible?
Hey Agraj,
Yes, you can do that.
You just need to remove a bit of code from step three, last code section “Hook entry background area”.
Replace this (line 30):
if ( is_singular( 'post' ) || ( is_singular( 'page' ) && has_post_thumbnail() ) ) {
With this:
if ( is_singular( 'page' ) && has_post_thumbnail() ) {
Let me know if you have any complications.
— Chris
Hey Chris, thank you for this code. I’m really interested in learning about Genesis but I don’t know what to do.
I understand a little bit about your code, but I would like to make some great genesis hacks. What do I need to learn? I hope you cant give me a hand, please.
What I what to do is show that featured image like a background without js.
Thank you for your advice!
Hey Chris
Amazing – brilliant and amazing. Thank you so much that you created this. It is working brilliantly for those posts and pages with featured images but I can’t get the code to work for pages and posts without a featured image. Also is it possible to show a background when it is archives or category listings please?
Thanks
Rich
Yeah look through the comments, there should be one where I submitted some code that will change the display on post and page without featured images.
I tried Melania’s trick about getting the title above the image but it doesn’t work on Digital Pro. Any other ideas? I am really trying to get this in place and have tried a number of different options but nothing is working. Thanks!
By “Title” are you referring to the page/post title or the Site Title?
– Chris
The page / post title. I used Melania’s suggestion but the background didn’t show up…just the title so I backed it out…but I really need the title on top of the image. Also, for the blog page, the featured image it picks up is not the one I specified.
Thanks!
Can you post a link here, so that I can see the site you’re working on? If not you can email it to me, he**@************on.com.
Hi Chris,
Great post…I’m trying to do this in Digital-Pro and for the life of me I can’t get the image to show up. A version is staged here: https://nform.mywpstaging.site/erp/
Kind regards,
Mike
Scratch that…I just figured out the difference between my backstretch-set file and yours.
Fantastic post!
Mike
Mike,
Sorry I didn’t get to this sooner! But I am glad you were able to sort it out!
– Chris
Hey Chris,
Not at all. I’m impressed at how fast you came back. Fantastic article.
Mike
hi Chris,
I tried to use your code on the theme I am developing for my blog, but it didn’t work. It shows a blank space http://themedemo.silviogulizia.com/typography-post/
Hey Silvio. Did you change things? Not seeing the white space?
– Chris
Hi Chris,
I commented the z-index and the image was back. Thank you very much for the useful code, I tried lots of different tutorial and no one worked. I then added the Melissa code for the title, but I am still wondering out how to remove the margin from the color background of the table-cell. Do you know the trick?
Hi again, here’s the code I used to do this. Stills need help to remove margin from display:table-cell. And I was wondering if we could bring even the site-header on top of the featured image (with transparency for background)
http://themedemo.silviogulizia.com/a-post-with-a-cover-image/
FUNCTION
//* Enqueue scripts and styles
add_action( ‘wp_enqueue_scripts’, ‘cegg_load_scripts_styles’ );
function cegg_load_scripts_styles() {
if ( is_singular( array( ‘post’, ‘page’ ) ) && has_post_thumbnail() ) {
wp_enqueue_script( ‘cegg-backstretch’, get_bloginfo( ‘stylesheet_directory’ ) . ‘/js/backstretch.js’, array( ‘jquery’ ), ‘1.0.0’, true );
wp_enqueue_script( ‘cegg-backstretch-set’, get_bloginfo( ‘stylesheet_directory’ ) . ‘/js/backstretch-set.js’ , array( ‘jquery’, ‘cegg-backstretch’ ), ‘1.0.0’, true );
}
}
//* Localize backstretch script
add_action( ‘genesis_after_entry’, ‘cegg_set_background_image’ );
function cegg_set_background_image() {
$image = array( ‘src’ => has_post_thumbnail() ? genesis_get_image( array( ‘format’ => ‘url’ ) ) : ” );
wp_localize_script( ‘cegg-backstretch-set’, ‘BackStretchImg’, $image );
}
//* Hook entry background area and title
add_action( ‘genesis_after_header’, ‘cegg_entry_background’ );
function cegg_entry_background() {
$title = apply_filters( ‘genesis_post_title_text’, get_the_title() );
if ( is_singular( ‘post’ ) && has_category(stories) ) {
echo ”;
echo ” . ” . $title . ” . ”;
echo”;
// Remove entry title
remove_action( ‘genesis_entry_header’, ‘genesis_do_post_title’ );
}
}
CSS
/* Add style for the new page or post background image
———————————————————- */
.entry-background {
/*display: block;*/
display: table;
height: 670px;
width: 100%;
/*z-index: -99 !important;*/
}
.entry-background .entry-title {
font-size: 4em;
text-align: center;
vertical-align: middle;
display: table-cell;
background-color: rgba(0,0,0,0.2);
color: #fff;
font-weight: bold;
}
@media only screen and (max-width: 480px) {
.entry-background {
height: 350px;
}
.entry-background .entry-title {
font-size: 2.8em;
padding: 0 3px;
}
}
Hey Silvio
You’re using Mobile First theme form BG right? Right now you’re hooking the image in genesis_after_header, so if you want it to be background to the header as well, you will need to change the hook. You can use this reference to help you => https://genesistutorials.com/visual-hook-guide/. And you will need to remove the background color in the header.
When I get a minute I can play with the code and see what I can see. I am not familiar with the theme you’re using so I’ll need to look under the hood.
Back soon
Chris
Hi Chris,
I am using this technique for the sixteen-nine theme, which is fantastic. However, I would like remove the backstretch effect, so that the featured image does not auto expand to fill the screen. My end goal is to have sidebar — content –featured image (that changes as the reader moves from post to post).
How would I modify your code so that it does *not* use the backstretch effect? I’ve Googled for answers, but the main results that pop up are from Bill Erickson, and I don’t have the money to spare to subscribe to his site for premium access to his tutorials.
Any suggestions–even links to point me in the right direction! — would be greatly appreciated.