- This topic has 18 replies, 4 voices, and was last updated 4 months, 4 weeks ago by
Brian.
-
AuthorPosts
-
June 1, 2020 at 1:22 am #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 RanaJune 1, 2020 at 9:23 am #1310054Leo
StaffCustomer SupportHi there,
So nothing shows at all when you add the PHP snippet and CSS?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 1, 2020 at 10:50 am #1310170Kuldeep
Yes, the post navigation widget remains the same. My function.php file and the additional CSS file still contains the updated line of code.
June 1, 2020 at 11:11 am #1310202Leo
StaffCustomer SupportCan you disable site ground optimizer and make sure all caching is cleared?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 1, 2020 at 11:18 am #1310208Kuldeep
Disabled SG optimizer and also cleared caching from Cloudflare as well. Still, only links are displayed in pre-next navigation.
June 1, 2020 at 3:59 pm #1310419Tom
Lead DeveloperLead DeveloperHi 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?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJune 1, 2020 at 10:32 pm #1310616Kuldeep
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.
June 2, 2020 at 6:19 am #1311067David
StaffCustomer SupportHi 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; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 2, 2020 at 6:32 am #1311080Kuldeep
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; } );
June 2, 2020 at 9:26 am #1311501Tom
Lead DeveloperLead DeveloperAh – sorry I missed that! Updated my post as well.
Glad it’s all working now π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJune 19, 2020 at 1:53 am #1333711Bas
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’?
June 19, 2020 at 4:03 am #1333854David
StaffCustomer SupportTry 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%; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 19, 2020 at 4:24 am #1333879Bas
Awesome, thanks!
June 19, 2020 at 4:27 am #1333884David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 31, 2020 at 3:01 am #1424772Brian
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' ); }
-
AuthorPosts
- You must be logged in to reply to this topic.