4

I have this code that shows all images attached to my post-type. Is there a way to paginate those? I have like 25 pics and I wan't to avoid scroll as much as I can.

Code:

<div class="galleries ten columns">
<?php
    $attachments = get_posts( array( 
   'post_type' => 'attachment',
   'post_mime_type'=>'image',
   'posts_per_page' => -1,
   'post_status' => 'any',
   'post_parent' => $post->ID)
);
if ( $attachments ) {
foreach ( $attachments as $attachment ) {
    $src = wp_get_attachment_image_src( $attachment->ID, full);     
    $html = '<a class="fancybox" href="'.$src[0].'">';
    $html .= wp_get_attachment_image( $attachment->ID, 'gallery-thumb') .'</a>';
    echo $html;
}
}
?>
</div>

Thanks!

7

I'm assuming you want something like this:

|---------------------|   
|       content       |  
|       (static)      |  
|---------------------|  
|       gallery       |  
|       (paged)       |  
|---------------------|  
|   << pagelinks >>   |  
|---------------------|  

In this setup your the post content stays the same, appears to be static, while the gallery is paged. This means you have the main query, showing you the title, content and so on, and a secondary query, which is responsible for showing you the gallery images. The page links on this page are connected to the secondary loop and do the paging there. To achieve this I suggest using WP_Query instead of get_posts(), not only because I don't have a solution for the latter in mind, but also because I think it's generally the better approach. In a first step you have to setup a new query variable, which will be used for the pagination. The function add_gallery_query_var() goes into your functions.php.

Code:

    add_filter('init', 'wpse124169_attachment_gallery_add_query_var');
    function wpse124169_attachment_gallery_add_query_var() {
        global $wp;
        $wp->add_query_var('gallery_page');
    }


Additionally, if you want pretty permalinks to work with the new query variable, you have to implement a new rewrite rule. For this add the following to your functions.php, which makes use of add_rewrite_tag and add_rewrite_rule.

Code:

    add_filter('init', 'wpse124169_attachment_gallery_add_rewrite_tag_rule');
    function wpse124169_attachment_gallery_add_rewrite_tag_rule() {
        add_rewrite_tag('%gallery_page%','([^&]+)');
        add_rewrite_rule('([^/]+)/gallery/image//?([0-9]{1,})/?$', 'index.php?name=$matches[1]&gallery_page=$matches[2]', 'top');
    }


The next step is to create the secondary loop for the gallery. WP_Query is used to do so, additionally paginate_links gives us the possibility to create the links for paging through the gallery. I've decided to create a function for this, so below code goes into the functions.php.

Code:

function wpse124169_get_attachment_gallery() {
    global $post;
    $gallery_page = (get_query_var('gallery_page')) ? get_query_var('gallery_page') : 1;
    $args = array(
        'posts_per_page' => 1, 
        'orderby' => 'menu_order', 
        'order' => 'ASC', 
        'post_type' => 'attachment',
        'post_status' => 'inherit', 
        'post_mime_type' => 'image', 
        'post_parent' => $post->ID, 
        'paged' => $gallery_page
    ); 
    $gallery = new WP_Query($args);
        if ( $gallery->have_posts() ) :
            echo '<div class="my_cpt_gallery_paged">';
                    while ( $gallery->have_posts() ) : $gallery->the_post();
                        echo wp_get_attachment_image( $post->ID, 'medium' );
                    endwhile;
            echo '</div>';
            echo '<div class="my_cpt_gallery_paginate_links">';
                    if ( get_option('permalink_structure') ) {
                        $format = 'gallery/image/%#%';
                    } else {
                        $format = '&gallery_page=%#%';
                    }
                    $args = array(
                        'base' => get_permalink( $post->post_parent ) . '%_%',
                        'format' => $format,
                        'current' => $gallery_page,
                        'total' => $gallery->max_num_pages
                    );
                    echo paginate_links( $args );
                    wp_reset_postdata();
            echo '</div>';
        endif;
}


As you can see the secondary query uses an extra post object - $gallery - and the query variable defined before - gallery_page - to enable proper pagination. The latter is used to setup the format parameter of paginate_links(). We shouldn't forget to reset - wp_reset_postdata() - to prevent problems. Of course this is just the secondary loop, not the complete template.

I call the secondary attachment gallery query in my single.php, after the main query/loop, via the function wpse124169_get_attachment_gallery(). Following above steps you have your paginated attachment gallery set up. I've tested this and it's working for me.




Below I list the most important information and sources, if you're interested in more details this should get you more then just started.

Information:

  1. WP_Query
  2. paginate_links
  3. Class WP/source/add_query_var
  4. Rewrite API
  5. add_rewrite_tag
  6. add_rewrite_rule
  7. Multiple WP_Query loops with Pagination
  8. How to create separate pagination for mutiple loops?




Optional:

What it does is, it changes the default link for the first image. Normally it is http://site.ext/?p=123 or http://site.ext/post-name/, the attachment parents permalink. That's ok, it shows you the first image by default. But if you want the link for the first image represent the gallery query var in the URL, you have to hook into paginate_links. This leads to the link being condtsructed like this http://site.ext/?p=123&gallery_page=1 or http://site.ext/post-name/gallery/image/1. This only applies to the navigation via the link by paginate_links(), calling the parent post does only show the according parent permalink. The code would also go into the functions.php.

Code:

add_filter( 'paginate_links', 'wpse124169_attachment_gallery_first_image_link' );
function wpse124169_attachment_gallery_first_image_link( $link ) {
    global $post;
    if ( get_option('permalink_structure') ) {
        $gpg_num = substr( strrchr( $link, '/' ), 1 );
    } else {
        $gpg_plk = wp_parse_args($link);
        $gpg_num = $gpg_plk['gallery_page'];
    }
    if ( empty( $gpg_num ) ) {
        if ( get_option('permalink_structure') ) {
            $link = get_permalink( $post->post_parent ) . 'gallery/image/1';
        } else {
            $link = get_permalink( $post->post_parent ) . '&gallery_page=1';
        }
    }

    return $link;
}




Update:

This can be used for altering the [gallery] shortcode, like shown here: How to paginate wordpress [gallery] shortcode?.

  • I am really lost with this. My page doesn't show any gallery anymore – Cynthia Lara Nov 26 '13 at 16:03
  • Thanks, I will wait because I really don't understand well PHP and how to construct this kind of functions. The gallery displays now the items and pagination but when I click on next or a number, it gets me to the homepage but with ?gallery_page=2 at the end like this www.homepage.com/?gallery_page=2 no 404's but ...weird. – Cynthia Lara Nov 26 '13 at 17:42
  • Not sure about the problem you're describing, but I gave the updated code a quick test and it's working for me. @CynthiaLara – Nicolai Nov 27 '13 at 0:16
  • With code update I get always link to page 1 of the gallery heh don't really know why – Cynthia Lara Nov 28 '13 at 17:25
  • I really don't know what the problem could be, because I have tested it on two development environments - WP 3.4.2 + 3.7.1 - and had no problems, using the exact same code i posted here. @CynthiaLara – Nicolai Nov 28 '13 at 17:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.