Make navigation loop instead of stop

1

Hello all,

I’m currently using the following code to paginate through each of my portfolio pages:

$directionPrev = @$flip ? 'right' : 'left';
$directionNext = @$flip ? 'left'  : 'right';

if($page->hasNextListed() || $page->hasPrevListed()): ?>
  <nav class="pagination <?= !@$flip ?: ' flip' ?> wrap">

    <?php if($page->hasPrevListed()): ?>
      <a class="pagination-item <?= $directionPrev ?>" href="<?= $page->prevListed()->url() ?>" rel="prev" title="<?= $page->prevListed()->navigation()->html() ?>">
        <span class="pagination-label"><?= svg("assets/images/arrow-{$directionPrev}.svg") ?><span class="pagination-label-text"><?= $page->prevListed()->navigation() ?></span></span>
      </a>
    <?php else: ?>
      <span class="pagination-item <?= $directionPrev ?> is-inactive">
        <?= svg("assets/images/arrow-{$directionPrev}.svg") ?>
      </span>
    <?php endif ?>

    <?php if($page->hasNextListed()): ?>
      <a class="pagination-item <?= $directionNext ?>" href="<?= $page->nextListed()->url() ?>" rel="next" title="<?= $page->nextListed()->navigation()->html() ?>">
        <span class="pagination-label"><?= svg("assets/images/arrow-{$directionNext}.svg") ?><span class="pagination-label-text"><?= $page->nextListed()->navigation() ?></span></span>
      </a>
    <?php else: ?>
      <span class="pagination-item <?= $directionNext ?> is-inactive">
        <?= svg("assets/images/arrow-{$directionNext}.svg") ?>
      </span>
    <?php endif ?>

  </nav>
<?php endif ?>

While this works well, navigation only works in a single direction (forwards or backwards). When the first or last item is reached it’s only possible to navigate in the opposite direction. What I would like is an infinite loop - when the last item is reached, navigation loops back to the first item (and vice versa when the first item is reached).

I found the following post Previous / Next Navigation Loop and code…

<?php if ($prev = $page->prevListed() ?? $page->siblings()->listed()->last()): ?>
  <a href="<?= $prev->url() ?>">previous page</a>
<?php endif ?>

<?php if ($next = $page->nextListed() ?? $page->siblings()->listed()->first()): ?>
  <a href="<?= $next->url() ?>">next page</a>
<?php endif ?>

…which I found helpful. However, while I think those else statements need to be removed, I can’t wrap my head around the syntax to make this work with my current code.

Could someone point me in the right direction please?

Thank you.

2

Follow up…

Perhaps I previously posted in haste.

I slept on this problem and had another look first thing this morning. Following some trial and error (best way to learn, right?) the following code works exactly the way I want:

  <nav class="pagination wrap">

    <?php if ($prev = $page->prevListed() ?? $page->siblings()->listed()->last()): ?>
  <a href="<?= $prev->url() ?>"><?= $prev->title() ?></a>
			<?php endif ?>

		<?php if ($next = $page->nextListed() ?? $page->siblings()->listed()->first()): ?>
  <a href="<?= $next->url() ?>"><?= $next->title() ?></a>
			<?php endif ?>

  </nav>

Knowing how flexible Kirby is there are likely various ways of acheiving the same. However, I’m just happy that I’ve solved it. :slight_smile:

3

Final and completed code.

Just to finalise my OP (and possibly assist someone in future) I’ve now incorporated the previous code into my original code which now looks like so:

  <nav class="pagination wrap">

    <?php if ($prev = $page->prevListed() ?? $page->siblings()->listed()->last()): ?>
      <a class="pagination-item left" href="<?= $prev->url() ?>" rel="prev" title="<?= $prev->title() ?>">
        <span class="pagination-label"><?= svg("assets/images/arrow-left.svg") ?><span class="pagination-label-text"><?= $prev->title() ?></span></span>
      </a>
    <?php endif ?>

    <?php if ($next = $page->nextListed() ?? $page->siblings()->listed()->first()): ?>
      <a class="pagination-item right" href="<?= $next->url() ?>" rel="next" title="<?= $next->title() ?>">
        <span class="pagination-label"><?= svg("assets/images/arrow-right.svg") ?><span class="pagination-label-text"><?= $next->title() ?></span></span>
      </a>
    <?php endif ?>

  </nav>

Bonus is that the code is now much simpler as is the CSS required to style my navigation. It’s all good! :smiley:

1 Like