WordPress.org

1. Marty Spellerberg
   Member
   Posted 5 months ago #
   

   Hello. When you first upload an attachment (image, etc) using the Add Media interface, it is assigned a menu_order of "0". If you don't touch the default order, it will maintain that value.

   However, if you do change the order -- by moving one of the thumbnails to another location, say -- then all the attachments are updated to reflect this new order.

   Can anyone point me towards the mechanism that detects if the order has been changed? My objective is to update the order even if the user has not changed it, ensuring those pesky initial 0's are removed.

   Thanks!

2. maccast
   Member
   Posted 4 months ago #
   

   I'm having a problem where even in 3.5.1 rearranging the order isn;t setting the menu order values. For me they are all staying '0'. Anyone else seeing this?

3. choeft
   Member
   Posted 4 months ago #
   

   Yes, having the same problem here - any ideas so far?

4. choeft
   Member
   Posted 4 months ago #
   

   Ok, I did something myself, based on a snippet I found in this forum. What I'm doing is:

   - get the gallery shortcode
   - extract the ids
   - save the ids as menu_order for the current images.

   NOTICE: This probably won't be adequate for you if you want to use the same image in different galleries.

   This one seems to work for me, put it in your functions.php.

   function pmc_gallery_menu_order_fix($id) {
           $regex_pattern = get_shortcode_regex();
           preg_match('/\[gallery[^\]]*\](.*)/', stripslashes($_POST['content']), $regex_matches);
           if (substr($regex_matches[0],1,7) == 'gallery') :
               preg_match('/"([^"]+)"/', $regex_matches[0], $attributes);
               $attributes = $attributes[1];
           endif;
   
           $ids = explode(',', $attributes);
           $images = get_posts( array(
   		'post_parent' => $post->ID,
   		'numberposts' => '-1',
   		'post_status' => 'inherit',
   		'post_type' => 'attachment',
   		'post_mime_type' => 'image',
   		'orderby' => 'menu_order ID',
   		'order' => 'ASC'
   	) );
   	if ( empty($images) ) {
   		// no attachments here
   	} else {
   		foreach ( $images as $attachment_id => $attachment ) {
   			if (in_array($attachment->ID, $ids)) {
   				$update_post = array();
   				$update_post['ID'] = $attachment->ID;
   				$update_post['menu_order'] = array_search($attachment->ID, $ids);
   				wp_update_post( $update_post );
   			};
   		}
   	}
   }
   add_action('pre_post_update', 'pmc_gallery_menu_order_fix');

5. Marty Spellerberg
   Member
   Posted 4 months ago #
   

   @maccast -- I am able to update the menu_order to non-zero by switching to the "Uploaded to this post" view and dragging and dropping. This is using using 3.5.1.

   @choeft -- Yes, I've also had success with that code snippet for setting an order based on a gallery inserted in the content.

   But does any ideas on how to set the order based on the view inside the "Uploaded to this post" view, that doesn't involve action by the user?

6. maccast
   Member
   Posted 4 months ago #
   

   The gallery shortcode in WP 3.5 passes the ids as an attribute now I guess, so rather than rely on the menu_order I just changed my code, like @choeft, to use the passed in order. In my case I actually overriding the gallery shortcode in my theme, so that I can use a custom AJAX gallery for display.

   You can see an example here.

   My overridden function looks like this:

   /*********************
   CUSTOM GALLERY
   *********************/
   //remove default shortcode
   remove_shortcode('gallery');
   //Add custom gallery shortcode
   add_shortcode('gallery', 'php_gallery_shortcode');
   
   function php_gallery_shortcode($atts) {
   
       global $post;
   
       if ( ! empty( $atts['ids'] ) ) {
         // 'ids' is explicitly ordered, unless you specify otherwise.
         if ( empty( $atts['orderby'] ) )
           $atts['orderby'] = 'post__in';
   
         $atts['include'] = $atts['ids'];
       }
   
       extract(shortcode_atts(array(
         'order'      => 'ASC',
         'orderby'    => 'menu_order ID',
         'id'         => $post->ID,
         'itemtag'    => 'dl',
         'icontag'    => 'dt',
         'captiontag' => 'dd',
         'columns'    => 3,
         'size'       => 'medium',
         'include'    => '',
         'exclude'    => '',
         'link'       => 'file'
       ), $atts));
   
       $id = intval($id);
       if ( 'RAND' == $order )
         $orderby = 'none';
   
       if ( !empty($include) ) {
         $_attachments = get_posts( array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
   
         $attachments = array();
         foreach ( $_attachments as $key => $val ) {
           $attachments[$val->ID] = $_attachments[$key];
         }
       } elseif ( !empty($exclude) ) {
         $attachments = get_children( array('post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
       } else {
         $attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
       }
   
       if ( empty($attachments) )
         return '';
   
       if ( is_feed() ) {
         $output = "\n";
         foreach ( $attachments as $att_id => $attachment )
           $output .= wp_get_attachment_link($att_id, $size, true) . "\n";
         return $output;
       }
   
       //load styles
       wp_enqueue_style( 'gallery', get_template_directory_uri() . '/library/css/gallery.css');
   
       //load javascript
       wp_enqueue_script('pmp_gallery_tmpl',get_template_directory_uri() . '/library/js/jquery.tmpl.min.js',array('jquery'),false,true);
       wp_enqueue_script('easing',get_template_directory_uri() . '/library/js/jquery.easing.1.3.js',array('jquery'),false,true);
       wp_enqueue_script('elastislide',get_template_directory_uri() . '/library/js/jquery.elastislide.js',array('jquery'),false,true);
       wp_enqueue_script('pmp_gallery',get_template_directory_uri() . '/library/js/gallery.js',array('jquery'),false,true);
   
       //Print out thumbnail carousel wrapper opener
       printf('
       <div id="rg-gallery" class="rg-gallery">
       <div class="rg-thumbs">
           <!-- Elastislide Carousel Thumbnail Viewer -->
           <div class="es-carousel-wrapper">
               <div class="es-nav">
                   <span class="es-nav-prev">Previous</span>
                   <span class="es-nav-next">Next</span>
               </div>
               <div class="es-carousel">
                   <ul>
       ');
   
       //write out thumbnails
       foreach ( $attachments as $image ) {
         $caption = $image->post_excerpt;
   
         $description = $image->post_content;
         if($description == '') $description = $title;
           $image_alt = get_post_meta($image->ID,'_wp_attachment_image_alt', true);
   
         $img = wp_get_attachment_image_src($image->ID, 'square-100');
         $img_full = wp_get_attachment_image_src($image->ID, 'pmp-gallery-image');
   
         // render your gallery here
         printf(
           '<li><a href="#"><img src="%s" data-large="%s" alt="%s" data-description="%s" /></a></li>',$img[0], $img_full[0],$image_alt,$image_alt);
       }
   
       //write out closing carousel tags
       printf('
                     </ul>
                   </div>
               </div>
               <!-- End Elastislide Carousel Thumbnail Viewer -->
           </div><!-- rg-thumbs -->
       </div><!-- rg-gallery -->
       ');
   
       //write out main javascript to render images
       printf('
       <script id="img-wrapper-tmpl" type="text/x-jquery-tmpl">
         <div class="rg-image-wrapper">
           {{if itemsCount > 1}}
             <div class="rg-image-nav">
               <a href="#" class="rg-image-nav-prev">Previous Image</a>
               <a href="#" class="rg-image-nav-next">Next Image</a>
             </div>
           {{/if}}
           <div class="rg-image"></div>
           <div class="rg-loading"></div>
           <div class="rg-caption-wrapper">
             <div class="rg-caption" style="display:none;">
               <p></p>
             </div>
           </div>
         </div>
       </script>
       ');
   }

7. Marty Spellerberg
   Member
   Posted 4 months ago #
   

   I would still love to find a way to do this that doesn't involve the use of [gallery].

   Something -- a JavaScript event -- is triggered when the user drags and drops the thumbnail. This causes new media_orders to be calculated and written to the DB.

   Can anyone help me understand what that JavaScript event is? I'd like to try to replicate it on, say, a button.

Reply

You must log in to post.