WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

enter image description here

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.

enter image description here

enter image description here

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>
share|improve this question
    
Sorry for the off-topic, but what browser and OS are that of the first screenshot? – brasofilo May 27 '12 at 10:19
    
that is where my boss designs the site, he does it in illustrator with that old browser screenshot as a layer. – BrettAdamsGA May 27 '12 at 16:59

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;
    });
});
share|improve this answer
    
+1 for number 1. But I don't get this: - where should the vars formfield and backup be used? - and how this deals with the Question matter, i.e. more than one upload field? – brasofilo Nov 10 '12 at 17:03
    
Just fixed the backup var and removed the formfield. (I copied from the original code and didn't check well). This shows how to insert only one image. – Rilwis Nov 12 '12 at 1:05

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&amp;TB_iframe=true');

        return false;
    });
});
share|improve this answer
    
Welcome to WordPress Stack Exchange! An answer should be more than just a link to an external site. Please add a solution. Thanks. – toscho May 27 '12 at 7:31

This is a little old but I needed to post my solution somewhere. Everywhere I have looked indicated the use of the Thickbox modal and the media-upload.php iframe. This is WRONG if you want to have the insert images come up just like the featured image select modal. What you actually need to use is the builtin js class wp.media . Here is a working solution that I have implemented. Obviously you need to tweek to your own needs.

This allows for multiple images to be selected and then the each function processes the resultes. See this link for reference: https://codex.wordpress.org/Javascript_Reference/wp.media

The javascript:

jQuery(function($){

  var frame;
  // ADD IMAGE LINK
  $('#gmls_add_images').on( 'click', function( event ){
    event.preventDefault();
    // If the media frame already exists, reopen it.
    if ( frame ) {
      frame.open();
      return;
    }
    // Create a new media frame
    frame = wp.media({
      title: 'Select or Upload Property Images',
      button: {
        text: 'Add Images to property'
      },
      multiple: true  // Set to true to allow multiple files to be selected
    });
    // When an image is selected in the media frame...
    frame.on( 'select', function() {
        // Get media attachment details from the frame state
        var attachments = frame.state().get('selection').toJSON();
        $(attachments).each(function(key,attachment){
            jQuery('#image_list').append('<div class="image_box">'+
                '<input type="hidden" name="images[]" value="'+attachment.url+'" />'+
                '<img src="'+attachment.url+'" height="100px;" /><br>'+
                '<a title="Remove Image" onclick="jQuery(this).parent().remove();">Remove Image</a>'+
                '</div>');
        });
        $('#TB_overlay').trigger('click');
    });

    // Finally, open the modal on click
    frame.open();
  });
});

The html:

<input type="button" id="gmls_add_images" value="Add Images">
<div class="sortable" id="image_list"></div>
share|improve this answer

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.