Gallery Inside One Post

Question

For image galleries, I need a code that uses next/previous links to bring you to the next/previous image in that post and keeps the images in the correct order you chose while inserting them into the post. (Every major news site seems to have this feature.)

Currently, if you add <?php next_image_link( false, 'Next Image' ); ?> and <?php previous_image_link( false, 'Previous Image' ); ?> to your image.php or your attachment template in WordPress the links may bring you to a gallery in a different post if the image is used elsewhere.

To further illustrate this proble, take a look at this gallery. There are three images. If you click the penguin and start using prev/next links to scroll through them you'll see additional images which should not be displayed!

This problem still has been solved. I had to use the media editor to attach the posts... too bad WP isn't always doing this natively when the image is uploaded.

Answer 1

These functions will help:

//function to get next or previous keys in an array
function array_navigate($array, $key){
    $keys = array_keys($array);
    $index = array_flip($keys);
    $return = array();
    $return['prev'] = (isset($keys[$index[$key]-1])) ? $keys[$index[$key]-1] : end($keys);
    $return['next'] = (isset($keys[$index[$key]+1])) ? $keys[$index[$key]+1] : current($keys);
    return $return;
}

function previous_attachment_ID($att_post){
    //get the attachments which share the same post parent
    $images =& get_children('post_type=attachment&post_mime_type=image&output=ARRAY_N&orderby=menu_order&order=ASC&post_parent='.$att_post->post_parent);
    if($images){
        //get the id of the previous attachment
        $ppid_arr = array_navigate($images, $att_post->ID);
        $ppid = $ppid_arr['prev'];
        return $ppid;
    }
    return false;
}

//previous attachment link function
function prev_att_link($att_post=null){
    if($att_post == null){
        global $post;
        $att_post = get_post($post);
    }
    $ppid = previous_attachment_ID($att_post);
    if($ppid != false){
        return '<a href="' . get_attachment_link($ppid) . '" class="previous-attachment-link">Previous</a>';
    } else {
        //there is no previous link
        return false;
    }
}

function next_attachment_ID($att_post){
    //get the attachments which share the same post parent
    $images =& get_children('post_type=attachment&post_mime_type=image&output=ARRAY_N&orderby=menu_order&order=ASC&post_parent='.$att_post->post_parent);
    if($images){
        //get the id of the next attachment
        $ppid_arr = array_navigate($images, $att_post->ID);
        $ppid = $ppid_arr['next'];
        return $ppid;
    }
    return false;
}

//next attachment link function
function next_att_link($att_post=null){
    if($att_post == null){
        global $post;
        $att_post = get_post($post);
    }
    $ppid = next_attachment_ID($att_post);
    if($ppid != false){
        return '<a href="' . get_attachment_link($ppid) . '" class="next-attachment-link">Next</a>';
    } else{
        return false;
    }
}

//back to gallery link function
function back_to_gal_link($text="Back to gallery"){
    global $post;
    $post = get_post($post);
    $post_par = get_post($post->post_parent);
    $slug = get_permalink($post_par->ID);
    return '<a href="'.$slug.'">'.$text.'</a>';
}


//show all thumbnails function
function show_all_thumbs() {
    global $post;
    $post = get_post($post);
    $images =& get_children( 'post_type=attachment&post_mime_type=image&output=ARRAY_N&orderby=menu_order&order=ASC&post_parent='.$post->post_parent);
    if($images){
        foreach( $images as $imageID => $imagePost ){
            if($imageID==$post->ID){
            } else {
                unset($the_b_img);
                $the_b_img = wp_get_attachment_image($imageID, 'thumbnail', false);
                $thumblist .= '<a href="'.get_attachment_link($imageID).'">'.$the_b_img.'</a>';
            }
        }
    }
    return $thumblist;
}

With this you can implement a previous next setup as you wanted, and, you can show all the thumbnails in the gallery.

e.g.:

<div class="back_to_gal_link">
    <?php
    echo back_to_gal_link().'<br />';
    ?>
</div>
<div class="prev_next_links">
    <?php
    if(prev_att_link()){
        echo prev_att_link();
    }
    if(prev_att_link() && next_att_link()){
    //insert a seperator between the two links
        echo ' | ';
    }
    if(next_att_link()){
        echo next_att_link();
    }
    ?>
</div>
<div class="thumbnails">
    <?php
    echo show_all_thumbs();
    ?>
</div>