Site logo

[Resolved] Featured Image and Page Header with Post Content

Home Forums Support [Resolved] Featured Image and Page Header with Post Content

Home Forums Support Featured Image and Page Header with Post Content

Viewing 15 posts - 1 through 15 (of 45 total)
  • Author
    Posts
  • #139943
    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.

    #139979
    Tom
    Lead Developer
    Lead Developer

    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.

    #140361
    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!

    #140394
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #140398
    David

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

    Cheers!

    #140400
    Tom
    Lead Developer
    Lead Developer

    Awesome 🙂

    #357481
    Raul Pina Design

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

    #357620
    Tom
    Lead Developer
    Lead Developer

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

    #357717
    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

    #357719
    Leo
    Staff
    Customer Support

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

    #358036
    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

    #358102
    Leo
    Staff
    Customer Support

    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.

    #358106
    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.

    #358108
    Raul Pina Design
    #358115
    Leo
    Staff
    Customer Support

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

Viewing 15 posts - 1 through 15 (of 45 total)
  • You must be logged in to reply to this topic.