Thread

Has anyone come up with a solution in their Previous and Next entry links to create a separator between the two when the both exist, but remove the separator when there’s only one?

That is, when both are available, show the pipe separator:
<< Previous | Next >>

When only one, don’t display the pipe:
Next >>

Yes, it’s a minor detail - but one I’d love to overcome. There has to be a prettier solution than this:

{exp:channel:next_entry}
<a href="http://{path=channel}">« Previous</a> 
{/exp:channel:next_entry}

{exp:channel:prev_entry}
 |  <a href="http://{path=channel}">Next »</a>
{/exp:channel:prev_entry}

Doing this above results in this on the first entry:
| Next >>

I came up with a bit of a lame solution once. Because I new the name of the first ever entry, I just created a rule not to show the pipe on that page:

{exp:channel:next_entry channel="blog-post"} 
{if segment_3 !="our-first-post"}<span class="divider">|</span>{/if} 
Next entry: <a href="http://{path=blog/post}">{title}</a>{/exp:channel:next_entry}

I no longer use the pipe symbol, though, as it sounds a bit odd when read out on a screen reader. Instead, I use CSS. So instead of having the span not appear on the first page, you could set a class on the anchor not to appear on the first page.

There’s probably a better solution anyway, but it’s something, at east.

Actually, thinking about this further, here’s a better, CSS-only solution:

HTML:

{exp:channel:next_entry}
<a href="http://{path=channel}">« Previous</a>
{/exp:channel:next_entry}

{exp:channel:prev_entry}
<a href="http://{path=channel}">Next »</a>
{/exp:channel:prev_entry}

CSS:

.prevnext a {padding-right: 20px;}
.prevnext a + a {padding-left: 20px; border-left: 1px solid #999;}

Hmm - I was no longer subscribed to responses to this post. Sorry for the delayed reply, Ralph. Thanks for that!

I ended up doing something very similar with CSS

<ul class="prevnext">

{exp:channel:next_entry}
<li><a href="http://{path=channel}">« Previous</a></li>
{/exp:channel:next_entry}

{exp:channel:prev_entry}
<li><a href="http://{path=channel}">Next »</a></li>
{/exp:channel:prev_entry}

</ul>

CSS

.prevnext li {
 list-style:none;
 display:inline;
 background:url(/images/prevnext_div.gif) no-repeat 0 50%;
 margin:0;
 padding: 0 6px;
}
.prevnext li:first-child { background:none;}

I went with a graphic because I didn’t like the border being as tall as it was turning out - but it’s essentially the same idea!