Sridhar Katakam

Genesis and WordPress Tutorials

Full-width featured image with excerpt overlay on static Pages in Atmosphere Pro

by 9 Comments

In the comments section of Full-width featured image with a widget area overlay on static Pages in Digital Pro, a user asked:

Hmm…it worked really well for Atmosphere Pro. Now I just have to figure out how to get different words to show up on the top of each separate page. Any ideas?

We can enable excerpts for static Pages and have them appear overlayed in the middle on featured images.

While the tutorial has been written for Atmosphere Pro 1.1.3, it should work with a few adjustments in any Genesis theme.

Step 1

Add the following in child theme's functions.php:

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

Already a member? Log in below or here.

  • Hey – If I wanted to align this to the left…what would the best way be to do it? I am finding that my distance from the left is different depending upon the length of my excerpt.
    Thanks!
    Sharon

    Reply

          • Saw the image you posted in Facebook here.

            It can be done with a bit of jQuery, Flexbox and Absolute positioning magic.

            Replace the CSS from Step 3 with

            .has-featured-image .site-inner {
    margin-top: 0;
}

.page-featured-section {
    position: relative;
    padding: 10% 20%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.page-featured-section img {
    vertical-align: top;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.pages-overlay {
    position: relative;
    color: #fff;
}

@media only screen and (min-width: 1025px) {

    .page-featured-section {
        margin-top: 77px;
    }

}

@media only screen and (max-width: 1024px) {

    .page-featured-section {
        padding: 10%;
    }

}

@media only screen and (max-width: 800px) {

    .page-featured-section {
        display: block;
        padding: 0;
    }

    .page-featured-section img {
        position: static;
    }

    .pages-overlay {
        color: #333;
        padding: 20px 10%;
    }

}

            Create a file named inner-pages.js inside “js” directory having:

            jQuery(function( $ ){
    if ( $(window).width() > 800 ) {
        // http://stackoverflow.com/a/1974797/778809
        // Bind to the resize event of the window object
        $(window).on("resize", function () {
            $('.page-featured-section').css('height',$('.page-featured-section img').height());
            // Invoke the resize event immediately
        }).resize();
    }
});

            Then inside page.php, before the closing genesis() function, add

            add_action( 'wp_enqueue_scripts', 'custom_inner_pages_js' );
function custom_inner_pages_js() {
    wp_enqueue_script( 'inner-pages', get_stylesheet_directory_uri() . '/js/inner-pages.js', array( 'jquery' ), CHILD_THEME_VERSION, true );
}

  • Hi Sridhar

    How would I get this to display a featured image/excerpt on my “Posts” page? I’m guessing I would need to add a new template along the lines of the “page.php” you describe here?

    Thanks
    Dom

    Reply
    • >