Featured image in pre-next post navigation

Hi there,

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

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

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

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

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?

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.

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

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

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

Glad it's all working now :)

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'?

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

Awesome, thanks!

You're welcome

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