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

[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

[Leo]

Hi there,

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

[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.

[Leo]

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

[Kuldeep]

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

[Tom]

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?

[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.

[David]

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

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

[Tom]

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

Glad it’s all working now 🙂

[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’?

[David]

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

[Bas]

Awesome, thanks!

[David]

You’re welcome

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

[Author]

Posts