0

I have some shortcode that I am using. The shortcode itself is working. The shortcode has pagination because it's cycling through a picture gallery.

The pagination itself works, but when it advances, it also advances the pagination for other picture galleries that are using the same shortcode.

My question is, how can I have the same shortcode, but only advance that specific gallery when I use the pagination, instead of advancing all the galleries using that shortcode? For example, if I click on page 2 for gallery 2017, gallery 2016 stays on page 1.

The shortcode I am using on the page looks like: [halloffame rml_folder="16"] and [halloffame rml_folder="14"]

The actual shortcode in my functions file looks like:

function picture_gallery($atts){
    extract(shortcode_atts(array(
        'rml_folder' => 1
    ), $atts));

    $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
    query_posts("post_status=inherit&post_type=attachment&rml_folder=".$rml_folder."&orderby=title&order=asc&posts_per_page=12&paged=".$paged);

    if ( have_posts() ) :
        $return_string .= '<div id="album">';
            while ( have_posts() ) : the_post();
                $return_string .= '<div class="gallery">';
                    $image = wp_get_attachment_image(get_post_thumbnail_id($post->ID), 'medium');
                    $return_string .= '<a href="'.wp_get_attachment_url($post->ID).'" class="simplelightbox">'.$image.'</a>';
                $return_string .= '</div>';
            endwhile;
        $return_string .= '</div>';
    endif;

    $return_string .= '<div id="pagi">';
        $return_string .= '<div class="wrap">';
            $args = array(
                'prev_text' => __('<span class="left"></span><span class="ion-android-arrow-dropleft"></span>'),
                'next_text' => __('<span class="ion-android-arrow-dropright"></span><span class="right"></span>')
            );
            $return_string .= paginate_links($args);
        $return_string .= '</div>';
    $return_string .= '</div>';

    global $wp_query;
    $current_page = get_query_var( 'paged' );
    $pages = $wp_query->max_num_pages;
    $return_string .= '<p align="center">(Page: '.$current_page.' of '.$pages.')</p>';

    wp_reset_query();

    return $return_string;
}

function register_shortcodes(){
    add_shortcode('halloffame', 'picture_gallery');
}
add_action( 'init', 'register_shortcodes');

I'm definitely not tied to this code, if there is a better way to do this, please don't hesitate!

Any ideas?

** UPDATE ** I have updated my shortcode to use WP_Query instead of query_posts, my code is similar, but now looks like:

function picture_gallery($atts){

    extract(shortcode_atts(array(
        'rml_folder' => 1
    ), $atts));

    $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;

    $picture_gallery = new WP_Query(array(
        'post_status' => 'inherit',
        'post_type' => 'attachment',
        'rml_folder' => $rml_folder,
        'orderby' => 'title',
        'order' => 'asc',
        'posts_per_page' => 12,
        'paged' => $paged
    ));

    if ( $picture_gallery->have_posts() ) :
        $return_string .= '<div id="album">';
            while ( $picture_gallery->have_posts() ) : $picture_gallery->the_post();
                $return_string .= '<div class="gallery">';
                    $image = wp_get_attachment_image(get_post_thumbnail_id($post->ID), 'medium');
                    $return_string .= '<a href="'.wp_get_attachment_url($post->ID).'" class="simplelightbox">'.$image.'</a>';
                $return_string .= '</div>';
            endwhile;
        $return_string .= '</div>';
    endif;

    $return_string .= '<div id="pagi">';
        $return_string .= '<div class="wrap">';
            $return_string .= paginate_links(array(
                'prev_text' => __('<span class="left"></span><span class="ion-android-arrow-dropleft"></span>'),
                'next_text' => __('<span class="ion-android-arrow-dropright"></span><span class="right"></span>'),
                'total' => $picture_gallery->max_num_pages
            ));
        $return_string .= '</div>';
    $return_string .= '</div>';

    $current = get_query_var( 'paged' );
    $total = $picture_gallery->max_num_pages;
    $return_string .= '<p align="center">(Page: '.$current.' of '.$total.')</p>';

    return $return_string;

    wp_reset_query();
}

function register_shortcodes(){
    add_shortcode('halloffame', 'picture_gallery');
}
add_action( 'init', 'register_shortcodes');

Now, I'm back to my original problem, which is the pagination for my shortcode advances all multiple queries on the same page...still looking into that.

Thanks,
Josh

0

I did a gallery pagination by converting all the stuff from galleries into arrays, and then json_encoding that and passing it to javascript. If you were to to that you could have multiple scripts:

jQuery(document).ready(function( $ ) {
var thisgallery = <?php echo the gallery; ?>
function process pagination (){
     code for pagination
}
}

And because they are all in separate jquery document ready functions they wouldn't see each other, so they would iterate independently and without page reloads.

Edit: The modified shortcode function would look like this:

<?php 
function picture_gallery($atts){
    extract(shortcode_atts(array(
        'rml_folder' => 1
    ), $atts));

    query_posts("post_status=inherit&post_type=attachment&rml_folder=".$rml_folder."&orderby=title&order=asc&posts_per_page=-1");
    $return_string = "";
    $pics = array();
    if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                $p = array(
                    'image' => wp_get_attachment_image(get_post_thumbnail_id($post->ID), 'medium'),
                    'url' => wp_get_attachment_url($post->ID)
                );
                $pics[] = $p;
            endwhile;
    endif;
    $pics = json_encode($pics);

    $return_string .= "<div class='js-gallery-$rml_folder'></div>
    <script>
    jQuery(document).ready(function( $ ) {
        var pics = $pics;
        console.log(pics);
        $('.js-gallery-$rml_folder').html(pics[0][image]);
    }
    </script>"

    wp_reset_query();

    return $return_string;
}

Edit: added a div to show the first picture in gallery.

| improve this answer | |
  • So, I would put this in my <head></head> tags or in my functions.php file? – Josh Rodgers Jan 17 '18 at 14:49
  • You would put this as part of the output of the shortcode. Of course the JS code must be inside <script> tags. The idea is that instead of echoing the gallery you make a json object with all your links to your pictures in the gallery and other stuff that is needed, and use JS or jquery to manipulate the html. – D. Dan Jan 17 '18 at 14:54
  • Also for this to work you need all your post in the query posts not just 12. – D. Dan Jan 17 '18 at 14:56
  • I'll give it a go and let you know...thanks for the help! – Josh Rodgers Jan 17 '18 at 14:57
  • I edited my answer with the code for the shortcode function which should log to the console the object what you can later manipulate in js. – D. Dan Jan 17 '18 at 15:11
0

So, when it was all said and done I went with another solution. I could not figure out how to implement the suggested solution. I went with a grid layout that uses infinite scroll as it's pagination. If anyone else is interested, there is a tutorial I followed here: https://allurewebsolutions.com/implement-masonry-isotope-infinite-scroll-imagesloaded-wordpress

Thanks,
Josh

| improve this answer | |

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.