1

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

3 Answers 3

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;
    });
});
2
  • +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, 2012 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.
    – Anh Tran
    Nov 12, 2012 at 1:05
0

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

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.