Loading...

And here comes the trouble: WordPress

To be able to transport your infinite scroll gallery into WordPress, to be fed from a custom post-type query on a custom template, you’ll have to: a) set up the loop b) set up pagination. I have a custom post-type named ‘galleries’ and I’m extracting only those posts with taxonomy ‘galleries_cat’ with value ‘snapshot’. So this would be my loop to substitute everything inside #container:

<?php
$snapshotargs=array(
     'posts_per_page' => 10,
     'post_type' => 'galleries',
     'galleries_cat' => 'snapshot',
     );
query_posts($snapshotargs);

// The Loop
while(have_posts()):the_post();
     // GET IMAGE LINK
     $thumbsnap = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'snapshots' );
     $urlsnap = $thumbsnap['0'];
     $thumbfull = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );
     $urlfull = $thumbfull['0'];
     ?>
     <div class="item small">
          <a href="<?php echo $urlfull; ?>" data-lightbox="snapshots"><img src="<?php echo $urlsnap; ?>" class="snap"/></a>
     </div>
<?php endwhile; ?><!-- end while -->

To set up navigation with a custom query, you must specify the current page. Simply add the following inline:

<div id="container">
     <?php
     $curpage = (get_query_var('paged')) ? get_query_var('paged') : 1;
     $snapshotargs=array(
         'posts_per_page' => 10,
         'post_type' => 'galleries',
        'galleries_cat' => 'snapshot',
         'paged' => $curpage
     );
     query_posts($snapshotargs);
     $pagecount = $wp_query->max_num_pages;

    // The Loop
    while(have_posts()):the_post();
        // GET IMAGE LINK
        $thumbsnap = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'snapshots' );
        $urlsnap = $thumbsnap['0'];
        $thumbfull = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );
        $urlfull = $thumbfull['0'];
   ?>
        <div class="item small">
             <a href="<?php echo $urlfull; ?>" data-lightbox="snapshots"><img src="<?php echo $urlsnap; ?>" class="snap"/></a>
        </div>
   <?php endwhile; ?><!-- end while -->
</div>
<nav id="page_nav">
     <div class="pageinfo">Showing page <?=$curpage;?> of <?=$pagecount;?></div>
     <div class='previous'><?php previous_posts_link();?></div>
     <div class='next'><?php next_posts_link(); ?></div>
</nav>

For the code altogether go to next page →

Author: Bea Cabrera

Freelance Filmmaker with a passion for big cities, snowboard, cinema and a weakness for the smell of freshly ground coffee. Engineer & Graphic Designer in a previous life, loving and living both: art and technology.  

Leave a Reply

Your email address will not be published.

You may use these <abbr title="HyperText Markup Language">html</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.