CMB2 Тип файла типа paginate results (использует get_post_meta)

Question

Это приближается к тому, что мне нужно. Он разбивает 5 результатов из $ files (get_post_meta) и создает страницы, но изображения представляют собой одинаковые изображения на всех страницах. Я вне пределов своего мозга.

function gallery_loop() { 

if(get_query_var('page')) { 
    $page = get_query_var('page'); 
} else { 
    $page = 1; 
} 


$img_size = 'portfolio-catalog'; 


$files = get_post_meta(get_the_ID(), '_cmb_gallery_images', true); 
$limit = 5; 
$total = count($files); 
$pages = ceil($total/$limit); 

$curr_page = isset($_GET['page']); 
$offset = ($curr_page - 1) * $limit; 


$items_array = array_chunk((array) $files, $limit, true); 

$files_array = array_slice($items_array, $offset, true); // this is showing the same 5 items on all the pages 

foreach ($files_array as $files) { 

    echo '<div style="border:1px solid red;">'; //BEGIN "page" so I can see if they are splitting correctly 

    foreach ($files as $attachment_id => $attachment_url) { 

    $page=1; 

     echo '<div class="file-list-image">'; 
     echo wp_get_attachment_image($attachment_id, $img_size); 
     echo '</div>'; 

    $page++; 


    } // end $files as $attachment_id => $attachment_url 

    echo '</div>'; //END "page" so I can see if they are splitting correctly 


} // end foreach $files_array as $files 



//the correct amount of pages are showing up but the items are all the same 
echo paginate_links(array(
    'base' => get_permalink() . '%#%' . '/', 
    'format' => '?page=%#%', 
    'current' => $page, 
    'total' => $pages 
)); 


} 
// end function 

Answer 1

Что-то вроде этого должно сделать трюк.

PHP

<?php 

$files_array=array_chunk((array) $files, 10, true); //10 is an amount per page here 
foreach ($files_array as $files) 
{ 
    $page=1; 
    echo '<div data-imgpage="' . $page . '" class="images_page' . (($page > 1) ? 'hidden_class' : '') . '">'; 
    foreach ($files as $attachment_id => $attachment_url) 
    { 
     echo '<div class="file-list-image">'; 
     echo wp_get_attachment_image($attachment_id, $img_size); 
     echo '</div>'; 
    } 
    echo '</div>'; 
    $page++; 
} 

// now create some pagination if needed 
echo ((count($files_array) > 1) ? '<div class="pagination_container">' . create_pagination(1, count($files_array)) . '</div>' : ''); 

function create_pagination($current_page, $limit) 
{ 
    $first=((($current_page - 2) > 0) ? $current_page - 2 : 1); 
    $last=((($current_page + 2) < $limit) ? $current_page + 2 : $limit); 
    $html='<ul data-imglisting-pagination-max="' . $limit . '">'; 
    if ($first > 1) 
    { 
     $html .= '<li data-imglisting-pagination-page="1" data-imglisting-pagination-action="active"><span class="page_class">1</span></li>'; 
     $html .= '<li data-imglisting-pagination-action="disabled" class="disabled_page_class"><span>...</span></li>'; 
    } 
    for ($i=$first; $i <= $last; $i ++) 
    { 
     $html .= '<li data-imglisting-pagination-page="' . $i . '" data-imglisting-pagination-action="active" ' . (($current_page == $i) ? 'class="active_page_class"' : "") . '><span class="page_class">' . $i . '</span></li>'; 
    } 
    if ($last < $limit) 
    { 
     $html .= '<li data-imglisting-pagination-action="disabled" class="disabled_page_class"><span>...</span></li>'; 
     $html .= '<li data-imglisting-pagination-page="' . $limit . '" data-imglisting-pagination-action="active"><span class="page_class">' . $limit . '</span></li>'; 
    } 
    $html .= '</ul>'; 

    return $html; 
} 

JS

jQuery(document).ready(function ($) 
{ 
    var current_page = 1; 
    bind_stuff(); 
    function bind_stuff() 
    { 
     $('[data-imglisting-pagination-action="active"]').unbind('click'); 
     $('[data-imglisting-pagination-action="active"]').click(function() 
     { 
      if (current_page != $(this).attr('data-imglisting-pagination-page')) 
      { 
       current_page = $(this).attr('data-imglisting-pagination-page'); 
       $('[data-imglisting-pagination-action="active"]').removeClass('active_page_class'); 
       $('[data-imgpage]').hide(); 
       $('[data-imgpage="' + current_page + '"]').show(); 
       $(this).addClass('active_page_class'); 
       $('.pagination_container').html(build_pagination(current_page, parseInt($('data-imglisting-pagination-max').attr('data-imglisting-pagination-max')))); 
       bindStuff(); 
      } 
     }); 
    } 
}); 
function build_pagination(current, limit) 
{ 
    var first = (((current - 2) > 0) ? current - 2 : 1); 
    var last = (((current + 2) < limit) ? current + 2 : limit); 
    output = '<ul data-imglisting-pagination-max="' + limit + '">'; 
    if (first > 1) 
    { 
     output = output + '<li data-imglisting-pagination-page="1" data-imglisting-pagination-action="active"><span class="page_class">1</span></li>'; 
     output = output + '<li data-imglisting-pagination-action="disabled" class="disabled_page_class"><span>...</span></li>'; 
    } 
    for (i = first; i <= last; i++) 
    { 
     output = output + '<li data-imglisting-pagination-page="' + i + '" data-imglisting-pagination-action="active" ' + ((current == i) ? 'class="active_page_class"' : "") + '><span class="page_class">' + i + '</span></li>'; 
    } 
    if (last < limit) 
    { 
     output = output + '<li data-imglisting-pagination-action="disabled" class="disabled_page_class"><span>...</span></li>'; 
     output = output + '<li data-imglisting-pagination-page="' + limit + '" data-imglisting-pagination-action="active"><span class="page_class">' + limit + '</span></li>'; 
    } 
    output = output + '</ul>'; 
    return output; 
}