How to show featured image full width after header on a specific post/s?

[sigul]

Hi there,

Anyone got a function to get the featured image and use it as a full width background in the after header hook in a specific post, or category? I'd like to use it only for "stories" category, or enabling it on the post I want, but can't figure out how.

It should be something like:

function to position feature image after header and add to it a specific class
Rule to do this only if post_is_singular and category equals to the one desired.

Can anyone point me anywhere to learn how to do it?

Thanks in advance

[Brad Dalton]

Link to your site please.

---

Get Help – Book Consultation.

[sigul]

I am developing it here themedemo.silviogulizia.com and I've used Blox plugin do to it here http://themedemo.silviogulizia.com/a-post-with-a-cover-image/ but it is very complicated and not satisfying , not automated.

[sigul]

I ended up with this function by following this great tutorial from Sridhar Katakam but couldn't manage to resize images correctly. Anyone has an idea?

// Register a custom image size for cover images on single Posts
add_image_size( 'post-cover', 1600, 400, true );

add_action( 'genesis_after_header', 'cover_image' );
function cover_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() && has_category(stories) ) {
	
		$image = genesis_get_image( 'format=url&size=post-cover' );
	 ?>

	<div class="post-cover" 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' );
	}
}

And css

/* Post cover image */
.post-cover {
	padding: 200px 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.post-cover .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-cover .entry-title {
		max-width: none;
	}

}

[swofford]

I was looking to something similar to this article...

https://sridharkatakam.com/overlay-entry-title-featured-image-single-posts/

I was able to implement this, but wanted to do it to the /category/articles/ list...

Currently it outputs

Title
Image

Looking to overlay the title much like this tutorial does for the actual post page.

Thanks,

Steve

[sigul]

I found a better solution and posted it here as a comment to the original article

https://chriseggleston.com/ambiance-like-fullwidth-image-in-pages-and-posts-in-genesis/#comment-22845

Still wondering how to remove the table-cell margin from the entry-title background

See here how it works

A Post With a Cover Image and a Quite Long Title to Test It

[sigul]

By mixing the code I did even better, but still wondering now how to center the title (at least, on mobile as for now I am working on my iPhone)

[Brad Dalton]

Hi Silvio

This is the best solution

---

Get Help – Book Consultation.

[Author]

Posts