How can I receive the image id using the media box?

4 comments

1. You can also add in a filter that can add the ID as a html5 data attribute to the returned HTML fragment from send_to_editor.

   public function image_to_editor($html, $id, $caption, $title, $align, $url, $size, $alt){
           $dom = new DOMDocument();
           @$dom->loadHTML($html);
   
           $x = new DOMXPath($dom);        
           foreach($x->query("//img") as $node){   
               $node->setAttribute("data-id", $id);
           }
   
           if($dom->getElementsByTagName("a")->length == 0){
               $newHtml = $dom->saveXML($dom->getElementsByTagName('img')->item(0));
           }else{
               $newHtml = $dom->saveXML($dom->getElementsByTagName('a')->item(0));
           }
   
           return $newHtml;
   }
   
   add_filter('image_send_to_editor', array(&$this,'image_to_editor'), 1, 8);
   

   Then in your javascript handler for window.send_to_editor;

   $('img',html).data('id'));
   

   You can do the same thing for media uploads as well.

   Log in to Reply

2. <input type="submit" name="send[79]" id="send[79]" class="button" value="Insert into Post">
   

   Above is an example mark-up of that button. Notice how name and id fields both contain the image ID.

   So with jQuery you can read that.

   $("...").click(function(){
       var buttonID = $(this).attr("name");
       buttonID = parseInt(buttonID.replace("send[", "").replace("]", ""));
   });
   

   Log in to Reply

3. jQuery(document).ready(function() {
   
       var form_field;
       var upload_field_ID = '';
   
       jQuery( '.upload_image_button' ).click( function() {
   
           jQuery( 'html').addClass( 'Image' );
   
           upload_field_ID = jQuery(this).prev('input');
           form_field      = upload_field_ID.attr( 'name' );
   
           tb_show( '', 'media-upload.php?type=image&TB_iframe=true' );
   
           return false;
   
       });
   
       window.original_send_to_editor = window.send_to_editor;
       window.send_to_editor = function( html ) {
   
           if (form_field) {
               var class_string    = jQuery( 'img', html ).attr( 'class' );
               var image_url       = jQuery( 'img', html ).attr( 'src' );
               var classes         = class_string.split( /s+/ );
               var image_id        = 0;
   
               for ( var i = 0; i < classes.length; i++ ) {
                   var source = classes[i].match(/wp-image-([0-9]+)/);
                   if ( source && source.length > 1 ) {
                       image_id = parseInt( source[1] );
                   }
               }
   
               alert(image_id); // <---- THE IMAGE ID
   
               upload_field_ID.val( image_url );
               tb_remove();
               jQuery( 'html').removeClass( 'Image' );
           } else {
               window.original_send_to_editor( html );
           }
   
       }
   
   });
   

   Log in to Reply

4. check it out works find for me.
   the thing is that the function tb_show need to know to who pitch the return. So you just go get the post_id and put it in the url pass to tb_show, if its a new one then you pass it like its a new one.

   so i show you my solution just so you can understand better but hey.. easy when you know how

   jQuery('#uploadPDF').click(
           function() 
           {
   
                window.send_to_editor = function(html){
                    fileurl = html.toString();
                    jQuery('#path_PDF').val(fileurl);                  
                    tb_remove(); 
               }
                var postId = location.href;
                var startPosition = postId.indexOf("post=");
                var url;
   
                if (startPosition != -1)
                {
                   var postId = postId.substr(startPosition);
                   var endPosition = postId.indexOf("&");
                   var postId = postId.substring(5, endPosition);//5 POUR POST=
   
                   url = 'media-upload.php?post_id=';
   
                   url = url.concat(postId,'&type=image&TB_iframe=true');
                }
                else
                {
                   url = 'media-upload.php?post-new.php?&type=image&TB_iframe=true';
                }
   
   
                tb_show( '', url);
                return false;
           }
       );
   

   Log in to Reply