Skip to content

Instantly share code, notes, and snippets.

@srikat
Last active April 9, 2019 16:27
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save srikat/ca743e2a2826956b3bc0651bc068b99b to your computer and use it in GitHub Desktop.
Save srikat/ca743e2a2826956b3bc0651bc068b99b to your computer and use it in GitHub Desktop.
How to overlay entry title on featured image in single Posts. https://sridharkatakam.com/overlay-entry-title-featured-image-single-posts/
// Register a custom image size for hero images on single Posts
add_image_size( 'post-image', 1600, 400, true );
add_action( 'genesis_after_header', 'sk_hero_image' );
function sk_hero_image() {
// if we are not on a single Post, abort.
if ( !is_singular( 'post' ) ) {
return;
}
// set $image to URL of featured image. If featured image is not present, set it to post-image.jpg in child theme's images directory.
if ( has_post_thumbnail() ) {
$image = genesis_get_image( 'format=url&size=post-image' );
} else {
$image = get_stylesheet_directory_uri() . '/images/post-image.jpg';
} ?>
<div class="post-hero" 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' );
}
.post-hero {
padding: 200px 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.post-hero .entry-title {
margin-bottom: 0;
color: #fff;
background-color: rgba(0,0,0,.75);
padding: 15px;
text-transform: uppercase;
max-width: 50%;
}
@media only screen and (max-width: 1023px) {
.post-hero .entry-title {
max-width: none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment