WordPress Custom Insert Into Post Button

3
votes

For images uploaded using WordPress' media uploader, there is an "Insert Into Post" button that sends a shortcode to the editor for that image.

I have a text input that, when focused, I'd like the media uploader to appear so that the user can select an image and send the file URL to the text input.

The main issue I'm having is creating the additional "Insert Into Post" button that sends the file URL to the appropriate text field.

Which hook do I use for that and how can I get the file URL data returned to the input field?

Your guidance is appreciated!

2
wordpressmediauploader

2 Answers

3
votes

What you've described is the older Wordpress way of doing it... If you want to use the new uploader in Wordpress 3.5+, you can create a wp.media object to upload it, similar to the code in wp-admin/js/custom-background.js:

           // Create the media frame.
            frame = wp.media.frames.customBackground = wp.media({
                // Set the title of the modal.
                title: $el.data('choose'),

                // Tell the modal to show only images.
                library: {
                    type: 'image'
                },

                // Customize the submit button.
                button: {
                    // Set the text of the button.
                    text: $el.data('update'),
                    // Tell the button not to close the modal, since we're
                    // going to refresh the page when the image is selected.
                    close: false
                }
            });

            // When an image is selected, run a callback.
            frame.on( 'select', function() {
                // Grab the selected attachment.
                var attachment = frame.state().get('selection').first();

                // Run an AJAX request to set the background image.
                $.post( ajaxurl, {
                    action: 'set-background-image',
                    attachment_id: attachment.id,
                    size: 'full'
                }).done( function() {
                    // When the request completes, reload the window.
                    window.location.reload();
                });
            });

            // Finally, open the modal.
            frame.open();

the frame.on('select' function(){ code is run when a file is chosen.

1
votes

A litter further searching and I was able to find some good sources explaining how to do this. I went for a JavaScript, PHP mix:

JavaScript

$j('input').live('focusin',function(){

    var target = '#'+$j(this).attr('id');

    tb_show('','media-upload.php?post_id=[post_id]&tab=gallery&context=choose&TB_iframe=1');

    window.send_to_editor = function(html) {            

        fileurl = $j(html).attr('href');
        $j(target).val(fileurl);
        tb_remove();

    };

});

source: http://jaspreetchahal.org/wordpress-using-media-uploader-in-your-plugin/

PHP

/* Customize button */

function media_uploader_btn($form_fields, $post) {

    $send = "<input type='submit' class='button' name='send[$post->ID]' value='" . esc_attr__( 'Choose This File' ) . "' />";

    $form_fields['buttons'] = array('tr' => "\t\t<tr class='submit'><td></td><td class='savesend'>$send</td></tr>\n");
    $form_fields['context'] = array( 'input' => 'hidden', 'value' => 'choose' );

    return $form_fields;

}

/* Check for button context */

function check_upload_image_context($context){

    if(isset($_REQUEST['context']) && $_REQUEST['context'] == $context){

        return true;

    } elseif(isset($_POST['attachments']) && is_array($_POST['attachments'])){

        /* check for context in attachment objects */

        $image_data = current($_POST['attachments']);

        if (isset($image_data['context']) && $image_data['context'] == $context ){

            return true;

        }

    }

    return false;
}


if(check_upload_image_context('choose')){

    add_filter('attachment_fields_to_edit', 'media_uploader_btn', 20, 2);

}

source: http://shibashake.com/wordpress-theme/how-to-hook-into-the-media-upload-popup-interface