fbpx

Ambiance like fullwidth image in pages and posts in genesis

THIS POST MAY CONTAIN AFFILIATE LINKS. PLEASE READ MY DISCLAIMER FOR MORE INFO.

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.

However, you should be able to add this to any Genesis Child Theme that supports HTML5. If you have any issues, feel free to use the comments for help.

This is how it looks in the Ambiance Theme

Genesis Featured Image as Background

How this works:

When you add an image to the “featured image” widget of a post or page, this code is initiated.

featured image widget

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

Advertisements

63 thoughts on “Ambiance like fullwidth image in pages and posts in genesis”

  1. 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

    Reply
  2. 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

    Reply
    • 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;
      }

      Reply
  3. 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

    Reply
    • 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

      Reply
      • 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

        Reply
        • 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

          Reply
  4. 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?

    Reply
  5. 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?

    Reply
  6. 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?

    Reply
  7. 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.

    Reply
  8. 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.

    Reply
    • 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.chrisegg.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://chrisegg.com/go/ambiance

      – Chris

      Reply
  9. 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.

    Reply
  10. 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…..

    Reply
  11. 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!

    Reply
    • 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

      Reply
  12. 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!

    Reply
    • 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

      Reply
      • Thanks for the response! It is still loading slowly because of our galleries. I might need to try a css solution instead.

        Reply
  13. 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!

    Reply
  14. 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!

    Reply
    • 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]

      Reply
      • 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;
        }

        Reply
  15. 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

    Reply
  16. 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

    Reply
  17. 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.

    Reply
  18. 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?

    Reply
    • 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

      Reply
  19. 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!

    Reply
  20. 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

    Reply
  21. 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!

    Reply
      • 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?

        Reply
  22. 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;
    }

    }

    Reply
    • 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

      Reply
  23. 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.

    Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.