Skip to content

Instantly share code, notes, and snippets.

@srikat
Last active January 15, 2016 22:44
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save srikat/0f5bb831bfc1d451663f to your computer and use it in GitHub Desktop.
Save srikat/0f5bb831bfc1d451663f to your computer and use it in GitHub Desktop.
How to display Featured images above Posts with Title as overlay. http://sridharkatakam.com/display-featured-images-posts-title-overlay/
//* Register a custom image size for Featured images above entries on list pages
add_image_size( 'archive-featured-image', 800, 300, true );
add_action( 'genesis_before_entry', 'sk_featured_image_above_posts' );
/**
* Display Featured Image above Post Titles regardless of Content Archives settings
*
* Context: Posts page, all archives and search results pages.
*
* @author Sridhar Katakam
* @link http://sridharkatakam.com/display-featured-images-posts-title-overlay/
*/
function sk_featured_image_above_posts() {
if ( ! ( is_home() || is_archive() || is_search() ) ) {
return;
}
if ( ! has_post_thumbnail() ) {
return;
}
remove_action( 'genesis_entry_content', 'genesis_do_post_image', 8 );
$title = apply_filters( 'genesis_post_title_text', get_the_title() );
?>
<div class="archive-featured-image">
<a href="<?php echo get_permalink(); ?>"><?php echo genesis_get_image( array( 'size' => 'archive-featured-image' ) ); ?></a>
<a href="<?php echo get_permalink(); ?>"><div class="image-overlay"></div></a>
<h1 itemprop="headline" class="entry-title"><a rel="bookmark" href="<?php echo get_permalink(); ?>"><?php echo $title; ?></a></h1>
</div>
<?php
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
}
/* ## Featured images above Posts with Title as overlay
----------------------------------------------------- */
.archive-featured-image {
overflow: hidden;
position: relative;
}
.archive-featured-image img {
display: block;
}
.archive-featured-image .entry-title {
position: absolute;
top: 50%;
left: 50%;
text-shadow: 1px 1px #333;
text-align: center;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.archive-featured-image .entry-title a {
display: block;
color: #fff;
}
.image-overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
opacity: 0.3;
background-color: #000;
}
@media only screen and (max-width: 800px) {
.archive-featured-image {
margin-bottom: 40px;
}
}
@media only screen and (max-width: 480px) {
.archive-featured-image {
margin-bottom: 0;
}
.archive-featured-image .entry-title {
position: static;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
.image-overlay {
display: none;
}
.archive-featured-image .entry-title {
margin-top: 20px;
text-shadow: none;
}
.archive-featured-image .entry-title a {
color: #333;
}
.archive-featured-image .entry-title a:hover {
color: #e5554e;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment