danny-d
2/29/2016 - 3:42 PM

Add A Genesis Featured Image Above Post With Title

Add A Genesis Featured Image Above Post With Title

.gd-featured-title {
	background-size:cover;
	background-repeat:no-repeat;
	text-align:center;
	width:100%;
}

.gd-featured-title .entry-header {
	position: relative;
	top: 50%;
	transform:translateY(-50%);
}

.gd-featured-title h1.entry-title {
	color:#fff;
}
// Hook after header area
add_action( 'genesis_after_header', 'gd_featured_image_title' );

function gd_featured_image_title() {
// If it is a page and has a featured thumbnail, but is not the front page do the following...
  if (has_post_thumbnail() && is_single() ) {
		remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 );
		remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 15 );
		remove_action( 'genesis_entry_header', 'genesis_do_post_title' );

		add_action( 'gd_featured_title', 'genesis_entry_header_markup_open', 5 );
		add_action( 'gd_featured_title', 'genesis_entry_header_markup_close', 15 );
		add_action('gd_featured_title', 'genesis_do_post_title');

// Get hero image and save in variable called $background

  $image_desktop = wp_get_attachment_image_src( get_post_thumbnail_id(  $post_id ), 'large' )[0];
  $image_mobile = wp_get_attachment_image_src( get_post_thumbnail_id(  $post_id ), 'medium' )[0];

  $image_desktop_size = wp_get_attachment_image_src( get_post_thumbnail_id(  $post_id ), 'large' )[2];
  $image_mobile_size = wp_get_attachment_image_src( get_post_thumbnail_id(  $post_id ), 'medium' )[2];

  $featured_class = 'gd-featured-title';

 ?> 
<div class='<?php echo $featured_class; ?>'><?php do_action('gd_featured_title'); ?></div>
<style>
	<?php echo ".$featured_class "; ?> {
		background-image:url( <?php echo $image_mobile; ?>); 
		max-height:<?php echo $image_mobile_size . "px"; ?>;
		height:<?php echo $image_mobile_size . "px"; ?>;

	}
		
	@media only screen and (min-width : 992px) {       
        <?php echo ".$featured_class "; ?> {
        	background-image:url(<?php echo $image_desktop;?>); 
        	max-height:<?php echo $image_desktop_size . "px"; ?>;
        	height:400px;
        }
}
</style>
<?php

    }
}