change wordpress gallery shortcode to slider

3 comments

1. this code removes the wordpress native gallery in which shows thumbnails and calls the permalink to attachment.php where it shows the image by itself.

   the following code makes it a slider using a easy slider with limited animation and transition effects.

   1. Calls the arguments for the transition effect and call the js

               $output .= '
               <script type="text/javascript">
          jQuery(window).load(function() {
                jQuery(".gallery-slider").bjqs({
   
       width : 639,
       height : 300,
       animtype : "slide", 
       animduration : 450, 
       animspeed : 4000, 
       automatic : false,
       showcontrols : true, 
       centercontrols : false, 
       nexttext : "Next", 
       prevtext : "Prev",
       showmarkers : false, 
       centermarkers : false, 
       keyboardnav : true, 
       hoverpause : true, 
       usecaptions : true, 
       randomstart : true, 
       responsive : true 
       });
            });
       </script>';
   

   2. Output the slider effect.

   $output .= "<div class='gallery-slider' style='margin-bottom:10px;'><ul class='bjqs'>";
   
     $attachments = get_posts( $args );
   
       if ( $attachments )
       {
           foreach ( $attachments as $attachment )
           {                   
                $output .= "<li>";
                $output .= "<img src='".wp_get_attachment_url( $attachment->ID )."' />";
                $output .= "</li>";    
           }
                $output .= " </ul>";
     }
     return $output;
   
     }
   

   below you put it all together. with the js and the arguments to set the transition effects.

   remove_shortcode( 'gallery' );
       function gallery_filter( $atts, $content = null ) {
   
     extract(shortcode_atts(array('gallery_name' => ''), $args));
       $args = array(
           'post_type'   => 'attachment',
           'numberposts' => 3,
           'post_parent' => $post->ID,
           'order' => 'ASC',
           'orderby' => 'menu_order',
           'post_mime_type' => 'image'
   
           );
           $output .= '<script type="text/javascript" src="'. get_bloginfo( 'template_directory' ) .'/js/bjqs-1.3.min.js"></script>';
           $output .= '
           <script type="text/javascript">
      jQuery(window).load(function() {
            jQuery(".gallery-slider").bjqs({
   
   width : 639,
   height : 300,
   animtype : "slide", 
   animduration : 450, 
   animspeed : 4000, 
   automatic : false,
   showcontrols : true, 
   centercontrols : false, 
   nexttext : "Next", 
   prevtext : "Prev",
   showmarkers : false, 
   centermarkers : false, 
   keyboardnav : true, 
   hoverpause : true, 
   usecaptions : true, 
   randomstart : true, 
   responsive : true 
   });
        });
   </script>';
   
   $output .= "<div class='gallery-slider' style='margin-bottom:10px;'><ul class='bjqs'>";
   
     $attachments = get_posts( $args );
   
       if ( $attachments )
       {
           foreach ( $attachments as $attachment )
           {                   
                $output .= "<li>";
                $output .= "<img src='".wp_get_attachment_url( $attachment->ID )."' />";
                $output .= "</li>";    
           }
                $output .= " </ul>";
     }
     return $output;
   
     }
   add_shortcode( 'gallery' , 'gallery_filter' );
   

   now i am having an issue with it outputting 5 images instead of all 3 attachment images. Images are repeating twice. Any help would be appreciated and would update the final answer.

   Log in to Reply

2. Based on what you have above… I would change “numberposts” to “posts_per_page”.
   And then I would change the “get_posts” to “new WP_Query”

       remove_shortcode( 'gallery' );
       function gallery_filter( $atts, $content = null ) {
   
     extract(shortcode_atts(array('gallery_name' => ''), $args));
       $args = array(
           'post_type'   => 'attachment',
           'posts_per_page' => 3,
           'post_parent' => $post->ID,
           'order' => 'ASC',
           'orderby' => 'menu_order',
           'post_mime_type' => 'image'
           );
   
           $output .= '<script type="text/javascript" src="'. get_bloginfo( 'template_directory' ) .'/js/bjqs-1.3.min.js"></script>';
           $output .= '
           <script type="text/javascript">
      jQuery(window).load(function() {
            jQuery(".gallery-slider").bjqs({
   
   width : 639,
   height : 300,
   animtype : "slide", 
   animduration : 450, 
   animspeed : 4000, 
   automatic : false,
   showcontrols : true, 
   centercontrols : false, 
   nexttext : "Next", 
   prevtext : "Prev",
   showmarkers : false, 
   centermarkers : false, 
   keyboardnav : true, 
   hoverpause : true, 
   usecaptions : true, 
   randomstart : true, 
   responsive : true 
   });
        });
   </script>';
   
   $output .= "<div class='gallery-slider' style='margin-bottom:10px;'><ul class='bjqs'>";
   
                $attachments = new WP_Query( $args );
   while ($attachments->have_posts()) : $attachments->the_post(); $do_not_duplicate = $post->ID;               
                $output .= "<li>";
                $output .= "<img src='".wp_get_attachment_url( $attachment->ID )."' />";
                $output .= "</li>";    
                endwhile;
                $output .= " </ul>";
                endif;
     return $output;
   
     }
   add_shortcode( 'gallery' , 'gallery_filter' );
   

   Log in to Reply

3. You are removing and adding correctly but still pulling in the entire media library which is not that helpful. If you want to just pull in the ids that you’ve included in the corresponding gallery shortcode use the following example:

   1) Get ids from gallery shortcode

   function grab_ids_from_gallery() {
   
   global $post;
   $attachment_ids = array();
   $pattern = get_shortcode_regex();
   $ids = array();
   
   if (preg_match_all( '/'. $pattern .'/s', $post->post_content, $matches ) ) { 
   $count=count($matches[3]);
   for ($i = 0; $i < $count; $i++){
       $atts = shortcode_parse_atts( $matches[3][$i] );
       if ( isset( $atts['ids'] ) ){
       $attachment_ids = explode( ',', $atts['ids'] );
       $ids = array_merge($ids, $attachment_ids);
       }
   }
   }
     return $ids;
   
    }
   add_action( 'wp', 'grab_ids_from_gallery' );
   

   2) Replace gallery with slider

   remove_shortcode( 'gallery' );
       function gallery_filter( $atts, $content = null ) {
   
     extract(shortcode_atts(array('gallery_name' => ''), $args));
       $args = array(
           'post_type'   => 'attachment',
           'posts_per_page' => -1,
           'post_parent' => $post->ID,
           'order' => 'ASC',
           'orderby' => 'menu_order',
           'post_mime_type' => 'image'
   
           );
           $output .= '<script type="text/javascript" src="'. get_bloginfo( 'template_directory' ) .'/js/bjqs-1.3.min.js"></script>';
           $output .= '
           <script type="text/javascript">
           jQuery(window).load(function() {
               jQuery(".gallery-slider").bjqs({
                   height : 550,
                   animtype : "fade", 
                   animduration : 450, 
                   animspeed : 4000, 
                   automatic : false,
                   showcontrols : true, 
                   centercontrols : true, 
                   nexttext : "▶", 
                   prevtext : "◀",
                   showmarkers : true, 
                   centermarkers : true, 
                   keyboardnav : true, 
                   hoverpause : true, 
                   usecaptions : true, 
                   randomstart : true, 
                   responsive : true 
               });
          });
          </script>';
   
   $output .= "<div class='gallery-slider' style='margin-bottom:10px;'><ul class='bjqs'>";
   
     $attachments = get_posts( $args );
     $grabids = grab_ids_from_gallery();
   
       if ( $attachments )
       {
           foreach ( $attachments as $attachment )
           {     
               if ( in_array( $attachment->ID, $grabids ) ) {             
                    $output .= "<li>";
                    $output .= "<img src='".wp_get_attachment_url( $attachment->ID )."' />";
                    $output .= "</li>";  
               }  
           }
                $output .= " </ul>";
     }
     return $output;
   
     }
   
     add_shortcode( 'gallery' , 'gallery_filter' );
   

   By adding the function grab_ids_from_gallery we can then pulls those ids from the array. I found this to be the best solution for me after looking around for a bit.

   Log in to Reply