[Support request] Featured image in pre-next post navigation

Home Forums Support Featured image in pre-next post navigation

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #1309478
    Kuldeep

    Hi Team,

    Thanks for the amazing theme and support.
    I want to add featured images in the pre-next section of post navigation. I did check the previous support questions related to the same (https://generatepress.com/forums/topic/next-previous-in-one-row/page/2/#post-292283) and added the code given here – https://gist.github.com/generatepress/dc79fa83d8706f19365aa07ddd141cd3 in my functions.php file along with the required CSS.
    But could not get it working. Can you guys please guide if I am doing anything wrong.

    Thanks in advance.

    Regards,
    Kuldeep Rana

    #1310054
    Leo
    Staff
    Customer Support

    Hi there,

    So nothing shows at all when you add the PHP snippet and CSS?

    #1310170
    Kuldeep

    Yes, the post navigation widget remains the same. My function.php file and the additional CSS file still contains the updated line of code.

    #1310202
    Leo
    Staff
    Customer Support

    Can you disable site ground optimizer and make sure all caching is cleared?

    #1310208
    Kuldeep

    Disabled SG optimizer and also cleared caching from Cloudflare as well. Still, only links are displayed in pre-next navigation.

    #1310419
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Weird that it’s not doing anything at all, but there is an easier way to hook stuff in there without overwriting the entire function now.

    Try this:

    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;
    } );

    Does that do anything?

    #1310616
    Kuldeep

    Thanks a lot, Tom!
    With the new code, I am able to see the featured images now. It is getting displayed like this – https://prnt.sc/ss441k.

    Would it be asking for too much 🙂 if I need some help in CSS to get it displayed like this – https://prnt.sc/ss4579.

    Thanks.

    #1311067
    David
    Staff
    Customer Support

    Hi there,

    try adding this CSS:

    /* switch next > to after title */
    .post-navigation .nav-next .next:before {
        content: '';
    }
    
    .nav-next .next:after {
        content: "\f105"
    }
    
    .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;
        }
    }
    #1311080
    Kuldeep

    Worked like a charm. Thanks a lot, David and Tom :-).

    For others-
    The code shared by Tom needs a minor correction, it should be ‘get_next_post’ in the 5th line instead of ‘get_previous_post’ and some minor CSS tweaking will be required for the featured images.

    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;
    } );
    #1311501
    Tom
    Lead Developer
    Lead Developer

    Ah – sorry I missed that! Updated my post as well.

    Glad it’s all working now 🙂

    #1333711
    Bas

    Great job!

    Since the thumb in the newest post was too large, I’ve added this to the CSS as well:

    .nav-previous img{max-width:400px}

    By the way: Any chance of making the thumbs ‘clickable’?

    #1333854
    David
    Staff
    Customer Support

    Try adding this CSS to make the current link encompass the whole element:

    .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%;
    }
    #1333879
    Bas

    Awesome, thanks!

    #1333884
    David
    Staff
    Customer Support
    #1424772
    Brian

    Hi Guys

    Following along on this post I’ve managed to add the images to the post nav, but I have a small problem that I hope you can help with.

    The images are not matching the target post, and I think it might be because Im using another code to restrict the prev-next nav to posts from the specific category.

    Heres the code I’m using.

    add_action( 'after_setup_theme', 'tu_category_specific_post_navigation' );
    function tu_category_specific_post_navigation() {
        add_filter( 'generate_category_post_navigation', '__return_true' );
    }
Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.