Skip to content

Instantly share code, notes, and snippets.

@navalon
Forked from srikat/functions.php
Created October 29, 2016 00:57
Show Gist options
  • Save navalon/8d08892ba875cafc5bd8aa18394f2e5d to your computer and use it in GitHub Desktop.
Save navalon/8d08892ba875cafc5bd8aa18394f2e5d 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