Gallery Pagination by Row

Question

I created a picture gallery at: http://ellenandjosh.com/?page_id=5.

Currently, I have a loop that displays pagination after a certain number of images : http://pastebin.com/N6nRRUei.

Normally this works fine...but normally I don't have images that are different widths. WordPress crops the image by height, the width is variable.

What I'd like to do is after three rows of images, then add pagination buttons...instead of displaying the pagination buttons after a certain number of images...is this possible?

Page 1 is ok, although some more images could go in the bottom row - page 2 only has two rows, and page 3 has a single image in row three - even though there are more images...it just functions so weird.

Any suggestions are appreciated.

Thanks, Josh

Answer 1

It is definitely possible!!

Ok, here is what I did...

My new loop looks like:

    <?php $ids = array();?>
    <?php foreach(query_posts("category_name=photos&showposts=-1") as $post_blog): ?>
        <?php $url = wp_get_attachment_image_src( get_post_thumbnail_id($post_blog->ID), 'gallery-full' ); ?>                    
        <?php $thumbs = wp_get_attachment_image_src( get_post_thumbnail_id($post_blog->ID), 'gallery-thumbnail' ); ?>
        <?php list($width) = getimagesize($thumbs[0]); ?>
        <?php $ids[] = array("id_post" => $post_blog->ID, "width" => $width, 'url' => $url[0], 'title' => $post_blog->post_title);?>
    <?php endforeach; ?>
    <?php $page = isset($_GET['paged'])?$_GET['paged']:0;?>
    <?php $post_filters = get_posts_by_paged(2440, $ids, $page);?>
    <?php $count = $post_filters['count']; ?>

    <div class="gallery">
        <?php if($post_filters):?>
            <?php foreach($post_filters['per_page'] as $post_filter) : ?>
                <a href="<?php echo $post_filter['url']; ?>" class="thickbox" title="<?php echo $post_filter['title']; ?>" alt="<?php echo $post_filter['title']; ?>"><?php echo get_the_post_thumbnail($post_filter['id_post'], "gallery-thumbnail", array("title" => $post_filter['title'], "alt" => $post_filter['title'])); ?></a>
            <?php endforeach; ?>
        <div class="clear">
            <!-- -->
        </div>
        <?php endif; ?>
    </div>
    <hr />
    <?php if ( $prev = get_previous_posts_link("Previous Page") ) { ?>
        <div class="left">
            <div class="button"><?php echo $prev ?></div>
        </div>
    <?php } ?>
    <?php global $paged; ?>
        <?php if($paged == 0) {
            $paged = count($ids) > 20?1:0;
        }?>
    <?php if ( $next = get_next_posts_link("Next Page",$count)) { ?>
        <div class="right">
            <div class="button"><?php echo $next ?></div>
        </div>
    <?php } ?>

My function for the pagination looks like:

<?php 
function get_posts_by_paged($width_custom, $posts = array(), $page)
{
    $post_per_page = array();

    $widths = 0;
    $group = array();
    foreach($posts as $key => $post)
    {
        $widths = $widths+$post['width'];
        if($widths > $width_custom){
            array_push($post_per_page, $group);

            //reset
            $group = array();
            $group[] = $post;
            $widths = $post['width'];
        }else{
            $group[] = $post;
        }

        //recover last
        if(count($posts) == $key+1)
        {
            array_push($post_per_page, $group);                
        }
    }

    $page = $page>0?$page-1:$page;

return array("count" => count($post_per_page), "per_page" => $post_per_page[$page]);
}
?>

That's it!! For me 2440 was the magic number, but you can change it to whatever you like. 2440 is the total width of all of your images...If you want more rows...increase the number, if you want less just decrease the number.

Answer 2

what you are saying is kind of not possible because your images have different width (as you said) and we cannot determine easily the number of images that can go in 3 rows. it would be better to have a defined number of images in each row, maybe define the block size. and then accordingly count the number of images required for 3 rows. so , if the container width is 600px, then we can have each block of about 200px each and then align image at the center. that would make things look good it. The best way would be to define the size of each image. so that even after the crop the size remains same.

Basically in your code (added a class galleryImage)

<a href="<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'gallery-full' ); $url = $thumb['0']; echo $url; ?>" class="thickbox galleryImage" title="<?php the_title(); ?>" alt="<?php the_title(); ?>"><?php the_post_thumbnail("gallery-thumbnail", array("title" => get_the_title(), "alt" => get_the_title()) ); ?></a>
<?php endwhile; endif; ?>

and then add some css like

.galleryImage{ width:200px; display:inline-block; }

I have not tested this but should work in general.

enter code here