Image Pagination

Kirby 2 Solved ✅
1

I’ve been working on paginations for images only, and I can seem to get it to display the next four images. I’m still new at PHP I also may have done a bad job of searching to see if this has been solved already. :sweat_smile:

<?php if($page->hasNextVisible()) { $image = $page->nextVisible()->images()->first(); echo thumb($image, array()); } ?> 
  <?php foreach($page->gallery()->yaml() as $image): ?>
    <?php if($img = $page->image($image)): ?>
       <a href=""><img src="<?= $img->url() ?>" alt="<?= $page->title()->html() ?>" /></a>
    <?php endif ?>
  <?php endforeach ?>
2

Maybe this thread helps: Using pagination with image collection

3

I don’t understand that any of that all. I’m sorry.

4

Well, then let’s start fresh. What exactly are you trying to do? I don’t quite get it from your code, because there are two different, unrelated pieces to it. Please try to be as specific as you can.

5

I am trying to display the next for images.

If the next four pages have images
display the images wrapped in an anchor tags

6

So you want to paginate the pages, not the images, but depending on whether they have images or not?

Then I would start with filtering the pages in the first place:

// don't know which page you are querying here, so I just take the children in this example:
$pageCollection = $page->children()->filterBy('hasImages', true)->paginate(4);
$pagination = $pageCollection->pagination();
7

I think we are almost on the right page so I’m sharing an image to make sure. Down at the bottom I want the next four images from the next four projects. Currently, I’m only getting one with the current code I’m using.

us_projects_corey-jones
us_projects_corey-jones2452×3284 1.45 MB

8

Ok, understood:

<?php
// get all page siblings
$siblings = $page->siblings();
// get the index nr. of the current page in the collection 
$index = $siblings->indexOf($page);
// get the next four siblings (using the index as offset)
$next4Pages = $siblings->not($page)->offset($index)->filterBy('hasImages', true)->limit(4);
// loop through those pages and fetch the first image
foreach($next4Pages as $p) {
  $img = $p->images()->first();
  echo thumb($img, array('width' => 200));
}
?>
1 Like
9

OMG, that worked. I have four images. One very last thing. I’m sorry to be a hassle. I don’t see how to enter my HTML in this format to make it workable for my layout. (I’m sorry) :weary::disappointed_relieved:

I’ve seen to have it figured out. Thanks…

  <?php
  // get all page siblings
  $siblings = $page->siblings();
  // get the index nr. of the current page in the collection 
  $index = $siblings->indexOf($page);
  // get the next four siblings (using the index as offset)
  $next4Pages = $siblings->not($page)->offset($index)->filterBy('hasImages', true)->limit(4);
  // loop through those pages and fetch the first image
  foreach($next4Pages as $p) {
  $img = $p->images()->first();
  echo" <div class='col-12 col-sm-3'> <a href = '".$p->url()."'>" . thumb($img) . "</a> </div>";
  }
10

Hm, better to do it this way:

  <?php
  // get all page siblings
  $siblings = $page->siblings();
  // get the index nr. of the current page in the collection 
  $index = $siblings->indexOf($page);
  // get the next four siblings (using the index as offset)
  $next4Pages = $siblings->not($page)->offset($index)->filterBy('hasImages', true)->limit(4);
  // loop through those pages and fetch the first image
  foreach($next4Pages as $p):
  $img = $p->images()->first();
?>
<div class="col-12 col-sm-3"> 
  <a href="<?= $p->url() ?>"><?= thumb($img) ?></a> 
</div>
<?php endforeach ?>

It is not considered good style to echo HTML (unless you can’t really avoid it); it makes your code hard to read and is error prone.