Setting multiple image urls using Wordpress' Media Uploader

Question

I have set up a meta box to hold additional information that my client can put in, and it will appear in a different section of the page.

The page shows up at http://96.125.170.106/~prestonp/?project=360

The data shows on the right hand side of the page, but also in this data, I would like to include photos that would show on the top and right top of the page, as in the image below

So far I have added the select image system in, and it works... kind of... If I only have one set up that one works perfectly, if I have two set up, the second works like expected, but the first, when I hit "Upload Image" and select my image, it puts the image url in the Thumb 1 instead of Main Image.

I am pretty sure my problem is in the jQuery, but I am not very knowledgeable in jQuery. Can someone help me figure out where my problem is? My code is below.

<?php

function wp_gear_manager_admin_scripts() {
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_enqueue_script('jquery');
}

function wp_gear_manager_admin_styles() {
wp_enqueue_style('thickbox');
}

add_action('admin_print_scripts', 'wp_gear_manager_admin_scripts');
add_action('admin_print_styles', 'wp_gear_manager_admin_styles');

?>

<script language="JavaScript">
jQuery(document).ready(function() {
jQuery('#upload_image_button_main').click(function() {
formfield = jQuery('#_my_meta_upload_image_main').attr('name');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});

window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
jQuery('#_my_meta_upload_image_main').val(imgurl);
tb_remove();
}

});
</script>
<script language="JavaScript">
jQuery(document).ready(function() {
jQuery('#upload_image_button_1').click(function() {
formfield = jQuery('#_my_meta_upload_image_1').attr('name');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});

window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
jQuery('#_my_meta_upload_image_1').val(imgurl);
tb_remove();
}

});
</script>


<div class="my_meta_control">
    <p>Fill out this box to complete the project data section of the project page.</p>
    <label>Project Name</label>
    <p><input type="text" name="_my_meta[name]" value="<?php if(!empty($meta['name'])) echo $meta['name']; ?>"/></p>
    <label>Project Location</label>
    <p><input type="text" name="_my_meta[location]" value="<?php if(!empty($meta['location'])) echo $meta['location']; ?>"/></p>
    <label>Project Client</label>
    <p><input type="text" name="_my_meta[client]" value="<?php if(!empty($meta['client'])) echo $meta['client']; ?>"/></p>
    <label>Project Data</label>
    <p><input type="text" name="_my_meta[stories]" value="<?php if(!empty($meta['stories'])) echo $meta['stories']; ?>"/> <span>Stories</span><br />
    <input type="text" name="_my_meta[units]" value="<?php if(!empty($meta['units'])) echo $meta['units']; ?>"/> <span>Units</span><br />
    <input type="text" name="_my_meta[acres]" value="<?php if(!empty($meta['acres'])) echo $meta['acres']; ?>"/> <span>Acres</span><br />
    <input type="text" name="_my_meta[unitsPerAcres]" value="<?php if(!empty($meta['unitsPerAcres'])) echo $meta['unitsPerAcres']; ?>"/> <span>Units/Acres</span><br />
    <input type="text" name="_my_meta[website]" value="<?php if(!empty($meta['website'])) echo $meta['website']; ?>"/> <span>Website</span><br /><br /><br /><br />
    <input id="_my_meta_upload_image_main" type="text" size="36" name="_my_meta[upload_image_main]" value="<?php if(!empty($meta['upload_image_main'])) echo $meta['upload_image_main']; ?>" /><input id="upload_image_button_main" type="button" value="Upload Image" /> <span>Main Image</span><br />

    <input id="_my_meta_upload_image_1" type="text" size="36" name="_my_meta[upload_image_1]" value="<?php if(!empty($meta['upload_image_1'])) echo $meta['upload_image_1']; ?>" /><input id="upload_image_button_1" type="button" value="Upload Image" /> <span>Thumb 1</span><br />
    <input id="_my_meta_upload_image_2" type="text" size="36" name="_my_meta[upload_image_2]" value="<?php if(!empty($meta['upload_image_2'])) echo $meta['upload_image_2']; ?>" /><input id="upload_image_button_2" type="button" value="Upload Image" /> <span>Thumb 2</span><br />
    <input id="_my_meta_upload_image_3" type="text" size="36" name="_my_meta[upload_image_3]" value="<?php if(!empty($meta['upload_image_3'])) echo $meta['upload_image_3']; ?>" /><input id="upload_image_button_3" type="button" value="Upload Image" /> <span>Thumb 3</span><br />
    <input id="_my_meta_upload_image_4" type="text" size="36" name="_my_meta[upload_image_4]" value="<?php if(!empty($meta['upload_image_4'])) echo $meta['upload_image_4']; ?>" /><input id="upload_image_button_4" type="button" value="Upload Image" /> <span>Thumb 4</span><br />
    <input id="_my_meta_upload_image_5" type="text" size="36" name="_my_meta[upload_image_5]" value="<?php if(!empty($meta['upload_image_5'])) echo $meta['upload_image_5']; ?>" /><input id="upload_image_button_5" type="button" value="Upload Image" /> <span>Thumb 5</span><br />
    <input id="_my_meta_upload_image_6" type="text" size="36" name="_my_meta[upload_image_6]" value="<?php if(!empty($meta['upload_image_6'])) echo $meta['upload_image_6']; ?>" /><input id="upload_image_button_6" type="button" value="Upload Image" /> <span>Thumb 6</span><br />
    <input id="_my_meta_upload_image_7" type="text" size="36" name="_my_meta[upload_image_7]" value="<?php if(!empty($meta['upload_image_7'])) echo $meta['upload_image_7']; ?>" /><input id="upload_image_button_7" type="button" value="Upload Image" /> <span>Thumb 7</span><br />
    <input id="_my_meta_upload_image_8" type="text" size="36" name="_my_meta[upload_image_8]" value="<?php if(!empty($meta['upload_image_8'])) echo $meta['upload_image_8']; ?>" /><input id="upload_image_button_8" type="button" value="Upload Image" /> <span>Thumb 8</span><br />
    <input id="_my_meta_upload_image_9" type="text" size="36" name="_my_meta[upload_image_9]" value="<?php if(!empty($meta['upload_image_9'])) echo $meta['upload_image_9']; ?>" /><input id="upload_image_button_9" type="button" value="Upload Image" /> <span>Thumb 9</span></p>
</div>

Answer 1

There're 2 things you should consider:

1. change send_to_editor inside click callback. This will change this function only when needed, e.g. when uploader is shown. This also prevent unwanted things with global variables.

2. You should always backup the send_to_editor.

Here's my sample code (not tested):

jQuery(document).ready(function($) {
    $('#upload_image_button_main').click(function() {
        var backup = window.send_to_editor;

        window.send_to_editor = function(html) {
            imgurl = $('img', html).attr('src');
            jQuery('#_my_meta_upload_image_main').val(imgurl);
            tb_remove();
        };

        tb_show('', 'media-upload.php?type=image&TB_iframe=true');

        window.send_to_editor = backup;
        return false;
    });
});

Answer 2

The following is an adaptation of the code found here.

Notes:

• The mod mixes @Rilwis suggestion with the original code (testing and research required).
• The upload buttons are referenced by class and not by id.
• The target of jQuery('#'+formfield).val(fileurl); has to be adjusted to your code.
• Not tested.

jQuery(document).ready(function() {
    var formfield;
    window.original_send_to_editor = window.send_to_editor;
    jQuery('.upload_image_button').click(function() {
        jQuery('html').addClass('Image');
        formfield = jQuery(this).prev().attr('name');

        window.send_to_editor = function(html){
            if (formfield) {
                fileurl = jQuery('img',html).attr('src');
                jQuery('#'+formfield).val(fileurl);
                tb_remove();
            } else {
                window.original_send_to_editor(html);
            }
        };

        tb_show('', 'media-upload.php?type=image&TB_iframe=true');

        return false;
    });
});