Archived topic
Featured Image and Page Header with Post Content
44 replies · Started by David on September 26, 2015
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.
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.
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!
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 :)
I am learning little by little. Sweet. Works like a charm. We can mark this complete.
Cheers!
Awesome :)
Is it possible to have different images on page header posts? It's possible on pages but not in posts.
Thanks
I'm not too sure what you mean - can you explain a bit more?
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
Can you link us to a page in question? Thanks!
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
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.
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.
I inserted this image http://raulpinadesign.raulpinadesign.pt/wp-content/uploads/2017/07/mum-who-loves-to-sew.jpg on the header..
Sorry I'm still a bit confused. Page header should work on both posts and pages?