[Resolved] Image link getting cut off (and a general sanity check)

[Todd]

I’ve learned just enough to become dangerous with php / wordpress / gp. 🙂

I’ve cobbled together bits of your previous advice to create paging navigation that functions the same on the front page of my website as it does on the post pages (<<Last / < Prev / Random / Next> / Last >>). I have a couple questions regarding this:

1) Everything appears to be working well right now (different browsers, different OS, different screensizes), but do you see any major red flags that would cause surprises with GP down the road? (Note, you can ignore the redundant if / else statements, I didn’t want the next / previous buttons to disappear when there wasn’t a next or previous post, but I haven’t decided on how I want to change them, so the code is the same for now).

2) When I use pure css with no image links in the paging nav, everything aligns great. But, if I try to add an image, it gets cut off on the top and bottom. I’ve played around with every padding / margin / etc settings, but I can’t get it fixed. If you visit the site, you’ll see the ‘Random’ button in the middle of the paging nav should be an image of a question mark, but it’s cut off. Any ideas on what’s causing it to be cut off and how to fix?

login: tom/generate

functions.php

<?php

add_action( 'generate_before_main_content', function() {
    if ( function_exists( 'previous_post_link' ) && function_exists( 'next_post_link' ) ) {
		echo '<div class="post-navigation">';
		echo  previous_post_link(); //Older Link using max_num_pages
		echo  next_post_link(); //Newer Link using max_num_pages
		echo '</div>'; 
    }
} );

add_action( 'generate_paging_navigation', function() {
    if ( function_exists( 'previous_post_link' ) && function_exists( 'next_post_link' ) ) {
		echo '<div class="post-navigation">';
		echo  previous_post_link(); //Older Link using max_num_pages
		echo  next_post_link(); //Newer Link using max_num_pages
		echo '</div>'; 
    }
} );

add_filter( 'next_post_link', function( $output, $format, $link, $post ) {
	
	$currentID = get_the_ID();
  	$args = array(
	  	'numberposts' => 1,
	  	'order'    => 'ASC',
	  	'orderby' => 'rand',
	  	'post__not_in' => array( $currentID ),
	);
  
    $random_post = get_posts( $args );
	
    if ( ! $post ) {
       	  $next = sprintf(
        '<a class="next-post button" href="%1$s" title="%2$s">Next ></a>',
        get_permalink( $post ),
        $post->post_title
	);

	  $random_post = sprintf(
        '<a class="button random-post" href="%1$s" title="%2$s"></a>',
        get_permalink( $random_post[0]->ID ),
        get_the_title( $random_post[0]->ID )
    );
	
	$last_post = get_posts( 'numberposts=1&order=ASC' );

    $last_post = sprintf(
        '<a class="button last-post" href="%1$s" title="%2$s">>></a>',
        get_permalink( $last_post[0]->ID ),
        get_the_title( $last_post[0]->ID )
    );
	      return $random_post . $next . $last_post;
    }
	
	else {
		  $next = sprintf(
        '<a class="next-post button" href="%1$s" title="%2$s">Next ></a>',
        get_permalink( $post ),
        $post->post_title
    );
  
    $random_post = sprintf(
        '<a class="button random-post" href="%1$s" title="%2$s"></a>',
        get_permalink( $random_post[0]->ID ),
        get_the_title( $random_post[0]->ID )
    );
    
	$last_post = get_posts( 'numberposts=1&order=ASC' );

    $last_post = sprintf(
        '<a class="button last-post" href="%1$s" title="%2$s">>></a>',
        get_permalink( $last_post[0]->ID ),
        get_the_title( $last_post[0]->ID )
    );
	   return $random_post . $next . $last_post;
	}
	
}, 10, 4 );

add_filter( 'previous_post_link', function( $output, $format, $link, $post ) {
    if ( ! $post ) {
        $prev = sprintf(
        '<a class="button previous-post" href="%1$s" title="%2$s">< Prev</a>',
        get_permalink( $post ),
        $post->post_title
    );

 $latest_post = get_posts( 'numberposts=1' );

    $latest_post = sprintf(
        '<a class="button latest-post" href="%1$s" title="%2$s"><<</a>',
        get_permalink( $latest_post[0]->ID ),
        get_the_title( $latest_post[0]->ID )
    );
	
	    return $latest_post . $prev;
    }
  else{
    $prev = sprintf(
        '<a class="button previous-post" href="%1$s" title="%2$s">< Prev</a>',
        get_permalink( $post ),
        $post->post_title
    );

 $latest_post = get_posts( 'numberposts=1' );

    $latest_post = sprintf(
        '<a class="button latest-post" href="%1$s" title="%2$s"><<</a>',
        get_permalink( $latest_post[0]->ID ),
        get_the_title( $latest_post[0]->ID )
    );
	
    return $latest_post . $prev;
  }
}, 10, 4 );

style.css

/*
Theme Name: generatepress child
Theme URL: http://lkfjasdlfjl.com
Description: generatepress child theme
Author: me
Author URL: http://alfkjasldfkjld.com
Template: generatepress
Version: 1.0.0
Text Domain: generatepress-child
*/ Custom CSS goes after this line

.nav-links {
    text-align: center;
    padding: 0px;
}

.post-navigation {
text-align:center;
font-size: 1.1em;
white-space : nowrap; /* this does the trick */
overflow : hidden;
}

a.random-post {
width: 10%;
background: url("../generatepress-child/random.png");
background-repeat: no-repeat;
background-position: center;
box-sizing: border-box;
padding: 5px 5px;
display: inline-block;
}

a.next-post, a.previous-post {
width: 35%;
box-sizing: border-box;
padding: 5px 5px;
display: inline-block;
}

a.last-post, a.latest-post {
width:  10%;
box-sizing: border-box;
padding: 5px 5px;
display: inline-block;
}

.entry-meta {
font-size: 100%;
margin-top: 0;
}

footer.entry-meta {
margin-top: 0;
}

.page-numbers {
      display: none;
}

[Tom]

Hey Todd,

1. The code looks good to me. There shouldn’t be any surprises caused by any of it.

2. The element doesn’t have any height. Try adding this to your CSS:

a.random-post {
    background-size: contain;
    height: 38px;
    vertical-align: middle;
    background-color: #fff;
    top: -2px;
    position: relative;
}

[Todd]

That worked great! Is there a reason you chose 38px for the height and a top offset of -2px? The -2px ended up leaving a gap at the bottom of the nav bar. I changed the numbers to 40px / 0px, but I’m worried you had a reason to do things the way you did and I’m missing something.

[Tom]

I chose 38px as that was the height of the other elements when I checked. The -2px fixed a weird gap on top. If you got it working using 40px and 0, then that’s much better 🙂

[Author]

Posts