[Resolved] Featured Image and Page Header with Post Content

[David]

I would like to have the both the Featured Image and the Page Header to appear like this. Is this possible?

http://designismylife.com/mobileland/pageHeaderwContent.jpg

Thanks again.

[Tom]

Is that on a single post?

If that’s the blog, you would use the “Appearance > Blog Page Header” area to set the top page header, then use regular featured images for the posts.

[David]

SOLUTION
If you need to have a unique Page Header Image and a unique Feature Image for Single Posts. Here is a solution for you. Always work within the Child Theme.

PHP
Place a copy of ‘content-single.php’ in the Child Theme Folder.

I added these lines. See below where to place it.

<div class="featured-image">
	<?php the_post_thumbnail( 'full' ); ?>
</div><!-- .featured-image -->	

Add here.

<?php
/**
 * @package GeneratePress
 */
?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> itemprop="blogPost" itemtype="http://schema.org/BlogPosting" itemscope="itemscope">
	<div class="inside-article">
		<?php do_action( 'generate_before_content'); ?>
		<header class="entry-header">
			<?php the_title( '<h1 class="entry-title" itemprop="headline">', '</h1>' ); ?>
			<div class="entry-meta">
				<?php generate_posted_on(); ?>
				<?php generate_entry_meta(); ?>
			</div><!-- .entry-meta -->
			
		</header><!-- .entry-header -->
		
		<div class="featured-image">
			<?php the_post_thumbnail( 'full' ); ?>
		</div><!-- .featured-image -->	
		
		
		<?php do_action( 'generate_after_entry_header'); ?>
		<div class="entry-content" itemprop="text">
			<?php the_content(); ?>
			<?php
				wp_link_pages( array(
					'before' => '<div class="page-links">' . __( 'Pages:', 'generate' ),
					'after'  => '</div>',
				) );
			?>
		</div><!-- .entry-content -->
		
		<?php do_action( 'generate_after_entry_content'); ?>

		<footer class="entry-meta">
			
			<?php generate_content_nav( 'nav-below' ); ?>
			<?php edit_post_link( __( 'Edit', 'generate' ), '<span class="edit-link">', '</span>' ); ?>
		</footer><!-- .entry-meta -->
		<?php do_action( 'generate_after_content'); ?>
	</div><!-- .inside-article -->
</article><!-- #post-## -->

CSS
Add this your Child Theme CSS:
.featured-image img{width:100%;margin:20px 0 !important}

Enjoy!

[Tom]

Awesome, thanks for sharing your solution, David!

Instead of having to create the content-single.php file in your child theme, you can use this function:

add_action( 'generate_after_entry_header','generate_add_single_featured_image' );
function generate_add_single_featured_image()
{ 
	if ( is_single() ) : ?>
		<div class="featured-image">
			<?php the_post_thumbnail( 'full' ); ?>
		</div><!-- .featured-image -->
	<?php 
	endif;
}

That will achieve the same thing 🙂

[David]

I am learning little by little. Sweet. Works like a charm. We can mark this complete.

Cheers!

[Tom]

Awesome 🙂

[Raul Pina Design]

Is it possible to have different images on page header posts? It’s possible on pages but not in posts.
Thanks

[Tom]

I’m not too sure what you mean – can you explain a bit more?

[Raul Pina Design]

I created a portfolio made with articles and I want a full width image on top and below the menu.

I can do it on pages but I articles it shows a blank space.

Is it clear now? 🙂

Thanks

[Leo]

Can you link us to a page in question? Thanks!

[Raul Pina Design]

Hi!
The page in question is http://raulpinadesign.raulpinadesign.pt/portefolio/nutural/
The blank space between the menu and the image is suposed to appear the header image…

Thanks

[Leo]

Looks like you are SVG logo so you need to set the size: https://docs.generatepress.com/article/adding-svg-logo/

Also the logo is white so it wouldn’t show up if the background color is also white.

[Raul Pina Design]

I think you didn’t understand. The image you see (http://raulpinadesign.raulpinadesign.pt/wp-content/uploads/2017/07/cabecalho.jpg) is supposed to be inserted the GP page header.Buit it doesn’t work because this link (http://raulpinadesign.raulpinadesign.pt/portefolio/nutural/) is an article and not a page.
I want to set a different header image on each page of my portfolio.

[Raul Pina Design]

I inserted this image http://raulpinadesign.raulpinadesign.pt/wp-content/uploads/2017/07/mum-who-loves-to-sew.jpg on the header..

[Leo]

Sorry I’m still a bit confused. Page header should work on both posts and pages?

[Author]

Posts