Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
    
Would you like to display the gallery on your single.php? Should the next Image be loaded via AJAX? –  fischi Jan 31 '13 at 9:41
    
No, I'd like it to take you to an attachment template. Right now, it will bring you to your images out of order and links to images that aren't even associated with the post. –  AndrettiMilas Jan 31 '13 at 19:32
    
Those functions above will not enable what your asking for, you need to grab the attachement id's, throw them into an array to build proper links that know which spot they are in. I don't have an answer for you but you want to use get_children and some php iteration. –  Wyck Feb 2 '13 at 4:11
    
I looked into this further the currently functionality is broken if you use [gallery], this trac ticket was closed core.trac.wordpress.org/ticket/22829 but the function adjacent_image_link does not work, I suggest you create a new trac ticket. –  Wyck Feb 2 '13 at 22:47
    
can you link to the full code for your attachment template? –  Tom J Nowell Feb 4 '13 at 16:34
add comment

1 Answer

up vote 3 down vote accepted
+25

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>
share|improve this answer
    
tested and works? btw: inside array_navigate() you could grab the index via array_values(), which should be slightly faster than flipping it. –  kaiser Feb 3 '13 at 4:00
    
1. show_all_thumbs always shows the same thumbnails, no matter which thumbnails are in the post. 2. How do you prevent it from being an endless loop? That is, how would I make sure the last image does not have a "next" link on it? –  AndrettiMilas Feb 3 '13 at 18:57
    
The show thumbs bit shows all the images in the gallery, so it will always be the same. It's a form of quick navigation ( and also an optional one that is a side bonus, but not necessary to answer this question ) –  Tom J Nowell Feb 4 '13 at 9:07
    
And yes, this is from a theme I had that I never released. To prevent the looping, you would need to modify array_navigate to return false rather than call end/current. You'd then ened to check for that false in previous_attachment_ID and next_attachment_ID. However doing that is beyond the scope of your question –  Tom J Nowell Feb 4 '13 at 9:11
    
In that case, your answer did not address my original question - as it does not allow the normal gallery display to only show images in the current gallery. The traditional gallery insert still loops through images which are not in the post. –  AndrettiMilas Feb 4 '13 at 15:10
show 18 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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