Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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 );
        }

    }

});
share|improve this question
add comment

4 Answers

<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("]", ""));
});
share|improve this answer
    
You are on fire Brady! –  Mark Feb 9 '12 at 17:44
    
Hmm it seems that the return is different: <a href="domein.nl/wp/wp-content/uploads/2012/02/… src="domein.nl/wp/wp-content/uploads/2012/02/Image.jpg"; alt="" title="Image" width="500" height="543" class="alignnone size-full wp-image-16" /></a> –  Mark Feb 9 '12 at 17:49
    
Need to explain some more as I didn't understand that... –  Brady Feb 9 '12 at 17:52
add comment
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 );
        }

    }

});
share|improve this answer
add comment

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.

share|improve this answer
add comment

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;
        }
    );
share|improve this answer
    
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. –  Stephen Harris Sep 27 '12 at 10:17
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.