Using pagination with image collection

Kirby 2 Solved ✅
1

Hi guys,

In my project, I have a folder structure like this:

Project A
— Folder 1
------ 15 Image files
— Folder 2
------ 2 Image files
Project B
— Folder 1
------ 10 Image files

On the homepage, I list all the image files in one image grid. The problem is, when I try to add pagination to this collection, I am only able to set pagination per Folders e.g.: “paginate(1)” will add 3 pages with (15 images | 2 images | 10 images) respectively.

Now, I understand that my problem is that I use paginate() on the Folder, but when I try to go deeper and paginate the images() inside, I get this error

Fatal error: Call to a member function paginate() on a non-object

Is there a way how can I paginate the grid of images without changing the folder structure?

2

Could you post your code pls.? Are all your images added into a single collection?

3

Sure:

return function($site, $pages, $page) {

  // fetch the basic set of pages
  $screenshots = page('screenshots')->grandchildren()->children();

  // fetch all tags
  $tags = $screenshots->pluck('tags', ',', true);

  // add the tag filter
  if($tag = urldecode(param('tag'))) {
    $screenshots = $screenshots->filterBy('tags', $tag, ',');
  }

  // apply pagination
  $screenshots = $screenshots->paginate(1);
  $pagination = $screenshots->pagination();

  return compact('screenshots', 'tags', 'tag', 'pagination');

};

And this is how I display the images

<ul class="screenshots-gallery cf">
  <?php foreach($screenshots as $project): ?>
  <?php foreach($project->images()->sortBy('sort', 'asc') as $image): ?>
  <li>
          <a href="<?php echo $image->url(); ?>">
                <?php echo thumb($image, array('width' => 320, 'quality' => 70)); ?>
          </a>
          <a href="<?php echo $project->parent()->url() ?>"><h1><?php echo $project->title()->html() ?></h1></a><br>
          <a href="<?php echo $page->url() . '/tag:' . $project->tags() ?>">
            <h2><?php echo $project->tags() ?></h2>
          </a>
  </li>
  <?php endforeach ?>  
  <?php endforeach ?>
</ul>
4

Hm, maybe I’m too tired and should get some sleep, but I don’t really see the purpose of the pagination here. You want to display all the images as a grid on the home page, don’t you? Where does the pagination come it?

5

Well, the database of images will grow into hundreds so I want to add pagination to improve UX a bit.

7

Seems I was mistaken, a little sleep can be really helpful. You can in fact do the following:

<?php
  //create collection of all images first
    $images = new Collection();
    foreach ($screenshots as $project) {
        foreach ($project->images() as $i) {
            $images->data[] = $i;
        }
    }
  $images = $images->paginate(4);
  $pagination = $images->pagination();
 
 foreach($images) as $image) ; ?>
    <a href="<?php echo $image->url(); ?>">
      <?php echo thumb($image, array('width' => 320, 'quality' => 70)); ?>
   </a>
<?php endforeach ?>
8

Thanks a lot!

This seems to work. But now my pagination snippet is complaining.

I guess i have to do something like $images->pagination() somewhere?

<nav class="pagination">
  <?php if($pagination->hasPrevPage()): ?>
  <a href="<?php echo $pagination->prevPageUrl() ?>">previous posts</a>
  <?php endif ?>

  <?php if($pagination->hasNextPage()): ?>
  <a href="<?php echo $pagination->nextPageUrl() ?>">next posts</a>
  <?php endif ?>
</nav>
9

Yes, you have to set the $pagination object:

$images = $images->paginate(4); //and use $images instead of $images->paginate(4) in the loop;
$pagination = $images->pagination();

I edited the snippet above …

10

Awesome, thanks!

Hm, the new code broke my titles and tags, they only work when I filter by a tag (http://vgui.mraz.me)

Wonder what’s the problem :\

Edit: Nope, doesn’t work with filtering. The image loop might be the problem.

11

You can get the title/tags of the image page like this (within the image loop):

$project = $image->page();
$project->title()->html();
$project->tags();
12

THANK YOU

You are my hero! Everything works now! :blush: