This tutorial Provides the steps to add a featured image as background and add post title above the featured image in Genesis.
The idea:
1. Find location. Here we have genesis_after_header.
2. Condition. (Return early)
a) is_singular( ‘post’ ) for default post type. We can define an additional array to have custom post type is_singular( array (‘post’,’service’) )
b) fallback image if no featured image is added.
3. Reposition. Add the post title in a custom class and remove from the default location.
Additionally, we can define a custom image site for this section. Let’s follow the steps.
STEP 1
Add the following in your child-theme’s functions.php
// Register a custom image size for hero images on single posts. add_image_size( 'hero-image', 1280, 350, true ); add_action( 'genesis_after_header', 'genesiskit_singular_hero_title_section' ); function genesiskit_singular_hero_title_section() { // if we are not on a single Post, abort. if ( ! is_singular( 'post' ) ) {// Supports custom post types. return; } // set $image to URL of featured image. If featured image is not present, set a fallback image, hero-image.jpg in child theme's images folder. if ( has_post_thumbnail() ) { $image = genesis_get_image( 'format=url&size=hero-image' ); } else { $image = get_stylesheet_directory_uri() . '/images/hero-image.jpg'; } ?> <div class="hero-title" id="hero-title" role="banner" style="background-image: url('<?php echo $image; ?>')"> <div class="wrap"> <?php genesis_do_post_title(); ?> </div> </div> <?php //* Remove entry title. remove_action( 'genesis_entry_header', 'genesis_do_post_title' ); }
Upload a fallback image named hero-image.jpg in your child-theme’s /images/ folder.
Regenerate thumbnail using Regenerate thumbnail plugin or AJAX Thumbnail Rebuild.
STEP 2
Add the following in your child-theme’s style.css
/* HERO featured image with Title ------------------------- */ .hero-title { background-size: cover; background-repeat: no-repeat; background-position: center; position: relative; background-color: #000; color: #fff; } .hero-title .archive-title { font-size: 50px; font-size: 5rem; } .hero-title .archive-description { margin-bottom: 10px; } .hero-title:after { content: ""; display: block !important; position: absolute; background: rgba(42, 49, 57, 0.5); height: 100%; width: 100%; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none; transition: all 0.3s ease; } .hero-title .wrap { position: relative; z-index: 2; } .hero-title { padding: 100px 5px; margin: 0; text-align: center; color: #fff; } .hero-title .entry-title { font-size: 35px; font-size: 3.5rem; font-weight: 700; } .hero-title .wrap { max-width: 896px; } .hero-title .wrap { margin: 0 auto; padding-left: 1vw; padding-right: 1vw; } @media only screen and (min-width: 768px) { .hero-title { padding: 120px 10px; margin-top: 0; text-align: center; color: #fff; } .hero-title .entry-title { font-size: 50px; font-size: 5rem; font-weight: 700; color: #fff; } } .hero-title .wrap { max-width: 896px; } .hero-title .wrap { margin: 0 auto; padding-left: 1vw; padding-right: 1vw; } @media only screen and (min-width: 960px) { .hero-title { margin-top: 80px; } }
Done!
You can also reposition the breadcrumbs and post info. Find the snippet and tweak it as per your needs.
Bonus:
Overlay title above featured image on post page archive and singular post. Supports custom post typesis_singular( array( ‘post’, ‘portfolio’ ) )
add_action( 'genesis_after_header', 'genesiskit_singular_hero_title_section' ); function genesiskit_singular_hero_title_section() { // if we are not on a single Post or home, abort. if ( ! is_singular( 'post' ) && ! is_home() ) { return; } if ( is_singular( 'post' ) && has_post_thumbnail() ) { $image = genesis_get_image( 'format=url&size=full' ); ?> <div class="hero-title" id="hero-title" role="banner" style="background-image: url('<?php echo $image; ?>')"> <div class="wrap"> <?php genesis_do_post_title(); ?> <?php the_excerpt(); ?> </div> </div> <?php //* Remove entry title. remove_action( 'genesis_entry_header', 'genesis_do_post_title' ); } elseif ( is_home() && has_post_thumbnail() ) { $img = wp_get_attachment_image_src(get_post_thumbnail_id(get_option('page_for_posts')),'full'); $featured_image = $img[0]; ?> <div class="hero-title" id="hero-title" role="banner" style="background-image: url('<?php echo $img[0]; ?>')"> <div class="wrap"> <?php genesis_do_posts_page_heading(); ?> </div> </div> <?php //* Remove post page heading. remove_action( 'genesis_before_loop', 'genesis_do_posts_page_heading' ); } }
For Reference:
// Register a custom image size for hero images on single Posts add_image_size( 'hero-image', 1280, 350, true ); add_action( 'genesis_after_header', 'genesiskit_singular_hero_title_section' ); function genesiskit_singular_hero_title_section() { // if we are not on a single Post, abort. if ( ! is_singular( array ('post','service') ) ) {// Supports custom post types. return; } // set $image to URL of featured image. If featured image is not present, set a fallback image, hero-image.jpg in child theme's images folder. if ( has_post_thumbnail() ) { $image = genesis_get_image( 'format=url&size=hero-image' ); } else { $image = get_stylesheet_directory_uri() . '/images/hero-image.jpg'; } ?> <div class="hero-title" id="hero-title" role="banner" style="background-image: url('<?php echo $image; ?>')"> <div class="wrap"> <?php genesis_do_post_title(); ?> <?php the_excerpt(); ?> <?php echo '<p class="post-info">' . genesis_post_info() . '</p>'; ?> <?php echo '<h1 itemprop="headline" class="page-title">' . get_the_title() . '</h1>'; ?> <?php echo '<p class="page-excerpt">' . get_the_excerpt() . '</p>'; ?> </div> </div> <?php //* Remove entry title. remove_action( 'genesis_entry_header', 'genesis_do_post_title' ); //* Reposition the breadcrumbs remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' ); }
Laura Hartwig says
Thank you for this!