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' );
}
Thank you for this!