[Resolved] Featured images on post navigation not correct

Home Forums Support [Resolved] Featured images on post navigation not correct

Home Forums Support Featured images on post navigation not correct

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1426030
    Brian

    Hi Guys

    Following this post https://generatepress.com/forums/topic/featured-image-in-pre-next-post-navigation/
    I’ve managed to add featured images to my post nav, but I have a small problem that I hope you can help with.

    On many posts the images are not matching the target post.

    Here are the 3 snippets I’m using to control the post nav

    add_action( 'after_setup_theme', 'tu_category_specific_post_navigation' );
    function tu_category_specific_post_navigation() {
        add_filter( 'generate_category_post_navigation', '__return_true' );
    }
    
    add_filter( 'generate_category_list_output', function( $output ) {
        if ( !is_single()) {
            return $output;
        }
        return '<span class="category-label">Read More:</span>' . $output;
    } );
    
    add_filter( 'generate_post_navigation_args', function( $args ) {
        if ( is_single() ) {
            $prevPost = get_previous_post();
            $prevThumbnail = isset( $prevPost ) ? get_the_post_thumbnail( $prevPost->ID ) : '';
            $nextPost = get_next_post();
            $nextThumbnail = isset( $nextPost ) ? get_the_post_thumbnail( $nextPost->ID ) : '';
    
            $args['previous_format'] = '<div class="nav-previous">' . $prevThumbnail . generate_get_svg_icon( 'arrow' ) . '<span class="prev" title="' . esc_attr__( 'Previous', 'generatepress' ) . '">%link</span></div>';
            $args['next_format'] = '<div class="nav-next">' . $nextThumbnail . generate_get_svg_icon( 'arrow' ) . '<span class="next" title="' . esc_attr__( 'Next', 'generatepress' ) . '">%link</span></div>';
        }
    
        return $args;
    } );

    And here is my css

    /* Post Navigation */
    .site-main .post-navigation {
    	margin-top: 1em;
    	padding: .5em;
    	width: 100%;
      border: 1px solid #f2f2f2;
      border-radius: 10px;
    	
    }
    
    .post-navigation img {
    	  width: 200px;
        display: inline-block;
        vertical-align: middle;
        margin: 0 5px;
    }
    
    /* switch next > to after title */
    .nav-next .next:after {
        font-family: GeneratePress;
        text-decoration: inherit;
        position: relative;
        margin-left: .6em;
        width: 13px;
        text-align: center;
        display: inline-block
    }
    
    .post-navigation .nav-previous,
        .post-navigation .nav-next {
            display: flex;
            flex-direction: column;
            margin-bottom: 5px;
    }
    
    /* flex row for desktop and tablet */
    @media (min-width: 420px) {
    
        .post-navigation {
            display: flex;
        }
        .post-navigation .nav-next {
            margin-left: auto;
            align-items: flex-end;
            text-align: right;
        }
    }
    
    @media (max-width: 769px) {
    .post-navigation img {
        width: 300px;
    }
    }
    
    .nav-previous, .nav-next {
        position: relative;
    }
    .nav-previous a:before, .nav-next a:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    On the css, I also need help to get the arrow to show on the same line as the title 😉

    Thanks
    Brian

    #1426224
    David
    Staff
    Customer Support

    Hi there,

    try changing your last snippet to:

    add_filter( 'generate_post_navigation_args', function( $args ) {
        if ( is_single() ) {
            $prevPost = get_previous_post(true);
            $prevThumbnail = isset( $prevPost ) ? get_the_post_thumbnail( $prevPost->ID ) : '';
            $nextPost = get_next_post(true);
            $nextThumbnail = isset( $nextPost ) ? get_the_post_thumbnail( $nextPost->ID ) : '';
    
            $args['previous_format'] = '<div class="nav-previous">' . $prevThumbnail . generate_get_svg_icon( 'arrow' ) . '<span class="prev" title="' . esc_attr__( 'Previous', 'generatepress' ) . '">%link</span></div>';
            $args['next_format'] = '<div class="nav-next">' . $nextThumbnail . generate_get_svg_icon( 'arrow' ) . '<span class="next" title="' . esc_attr__( 'Next', 'generatepress' ) . '">%link</span></div>';
        }
    
        return $args;
    } );
    #1426399
    Brian

    Thanks, David that works perfectly now!

    Any chance you could also help with the css? It doesn’t look great to me, I would prefer the arrow to be on the same line and the text to sit right and left with a center divider, like below.

    Image < Previous Title | Next Title > Image

    #1426671
    Leo
    Staff
    Customer Support

    Can you disable your caching plugin first?

    #1426713
    Brian

    Hi Leo
    I’ve temporarily disabled WP Rocket.

    #1426901
    Brian

    Leo, why did I need to disable my caching? I need to turn it back on.

    #1426911
    Leo
    Staff
    Customer Support

    why did I need to disable my caching?

    It’s much easier to see the CSS you’ve added and tweak it that way.

    Edit this:

    .post-navigation .nav-previous, .post-navigation .nav-next {
        display: flex;
        flex-direction: column;
        margin-bottom: 5px;
    }

    to this:

    .post-navigation .nav-previous, .post-navigation .nav-next {
        display: flex;
        margin-bottom: 5px;
        align-items: center;
        width: 50%;
    }
    #1426925
    Brian

    Ah I see Leo
    That’s very close, just the text on the Next is not lined up with the arrow?
    https://www.savvyhomemade.com/how-to-make-gel-candles-embeds/

    #1426928
    Leo
    Staff
    Customer Support

    Try removing this CSS you’ve added:
    https://www.screencast.com/t/6kPk7f7Uq

    #1426931
    Brian

    That moves them back onto separate lines

    #1426938
    Leo
    Staff
    Customer Support

    Hmm try only removing the second block in the screenshot.

    #1426942
    Brian

    That’s looking good Leo… The last thing is to make each side equal 50% of the width? Right now the right side is wider.

    #1426959
    Leo
    Staff
    Customer Support

    Looks pretty close to me already but edited the CSS here to include width property:
    https://generatepress.com/forums/topic/featured-images-on-post-navigation-not-correct/#post-1426911

    #1426968
    Brian

    Perfect Leo,

    Thanks of the excellent support!!

    #1426972
    Leo
    Staff
    Customer Support

    No problem 🙂

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