Wordpress Custom Image Upload Field

Question

I am currently developing a WordPress site which needs a custom content add/edit module. I am looking for an image upload option in wordpress, for eg. in my form there is an input field titled 'Choose Image', when the user clicks on the input field, i want the wordpress media gallery to popup and be able to choose an image from the gallery. and once the user selects an image, the full url to the image will be filled in the input field. I am sure this can be done because i have once found a code for this, but i forgot where i found it. Please help everybody

Thanks in Advance..

See wordpress.stackexchange.com/questions/4307/…

rhand
– rhand

2012-02-18 04:25:39 +00:00
Commented Feb 18, 2012 at 4:25 — rhand
– rhand, Commented Feb 18, 2012 at 4:25

JB McKee Bowers · Accepted Answer · 2012-04-23 18:01:04Z

Here is code that will do this:

jQuery(document).ready(function() {

    var orig_send_to_editor = window.send_to_editor;

    jQuery('#upload_image_button').click(function() {
        formfield = jQuery(this).prev('input');
        tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');

        window.send_to_editor = function(html) {
        var regex = /src="(.+?)"/;
        var rslt =html.match(regex);
        var imgurl = rslt[1];
        formfield.val(imgurl);
        tb_remove();
        jQuery('#show_'+formfield.attr('name')).html('<img src="'+imgurl+'" width="" />')

        window.send_to_editor = orig_send_to_editor;
    }

    return false;
});
});

Here is the HTML to go with it:

<input type="hidden" name="upload_image" />
<?php $post_img = get_post_meta($post->ID,'item_image',true); ?>
<input id="upload_image_button" type="button" value="<?php echo (empty($post_img)?'Upload Image':'Change Image') ?>" />
<div id="show_upload_image"><?php echo (!empty($post_img)?"<img src='$post_img' width='100' />":'')?></div>

Collectives™ on Stack Overflow

Wordpress Custom Image Upload Field

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related