1

The code below allows me to retrieve the image string, when Insert to Post has been pressed, but what would be the correct way to retrieve the ID of the image? So I can retrieve all information through wp_get_attachment_image_src?

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 image_url = jQuery( 'img', html ).attr( 'src' );
            upload_field_ID.val( image_url );
            tb_remove();
            jQuery( 'html').removeClass( 'Image' );
        } else {
            window.original_send_to_editor( html );
        }

    }

});
2

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.

1
<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("]", ""));
});
3
1
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&amp;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 );
        }

    }

});
0

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,'&amp;type=image&amp;TB_iframe=true');
             }
             else
             {
                url = 'media-upload.php?post-new.php?&amp;type=image&amp;TB_iframe=true';
             }


             tb_show( '', url);
             return false;
        }
    );
1
  • The solution is to get the attachment ID - not the post ID (which you can get in better ways by using wp_localise_script() and passing the post ID - from within the add_meta_box for example). That way you do not need to extract it from the url. Sep 27 '12 at 10:17

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.