-
-
Save 10h30/fdda5527917d13e638cf 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/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//* 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' ); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ## 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