10h30
4/16/2015 - 1:20 AM

How to display Featured images above Posts with Title as overlay. http://sridharkatakam.com/display-featured-images-posts-title-overlay/

How to display Featured images above Posts with Title as overlay. http://sridharkatakam.com/display-featured-images-posts-title-overlay/

/* ## 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;
	}
}
//* 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' );

}