Image Pagination

Bootstrap ve Processwire ile Image Pagination (Fotoğrafları farklı sayfalara bölme)

1. Install related modul from this link

2. Add following code to the place which you want to show them:

$items_per_page = 4;
$start = ($input->pageNum - 1) * $items_per_page;
$total = count($page->images);
$images = $page->images->slice($start, $items_per_page);

// make this to give MarkupPagerNav what it needs
$a = new PageArray();

// add in some generic placeholder pages
foreach($images as $unused) $a->add(new Page());

// tell the PageArray some details it needs for pagination
// (something that PW usually does internally, for pages it loads)
// output your images
foreach ($images as $image) {


<div class='col-sm-3 col-xs-6' style='margin-bottom:20px'>
<img src='<?=$thumb->url?>' class='img-responsive img-rounded' alt='<?=$page->title?>'>
<?} ?>

3. Pagination bar will appear with following code. Please add it where you want:

<? // pagination
echo $a->renderPager(array(
    'nextItemLabel' => "<i class='glyphicon glyphicon-chevron-right'></i>",
    'previousItemLabel' => "<i class='glyphicon glyphicon-chevron-left'></i>",
    'listMarkup' => "<ul class='pagination pagination-lg'>{out}</ul>",
     'currentItemClass' => "active", 
    'itemMarkup' => "<li class='{class}'>{out}</li>",
    'linkMarkup' => "<a href='{url}'><span>{out}</span></a>"