1

I have added two custom meta boxes to a custom post type. One is to upload an image to be stored in a custom field value for a "headshot" and the other is to upload an image to be stored in a custom field value for a "column headshot". It's a news site.

UI for Headshots

Both send the URL of the image chosen in the "Add Media" pane to a hidden field, which is then posted through the normal process to the custom fields. However, I also want a preview of the image chosen before the post is saved or published, so I have jQuery update the src attribute of an image, which is in a div that is shown once an image is selected in the "Add Media" pane. The problem is that, in the first "Normal Headshot" box, when an image is selected, it updates the src attribute of the image in the "Column Headshot" box, rather than the correct one – the "Normal Headshot" box.

I'm pretty sure that this is due to conflicts with the multiple window.send_to_editor instances. I initially had an issue where updating the "Normal Headshot" would also send the URL of that to the wrong hidden field (the one in the "Column Headshot" box), but I solved that by defining the field to be updated as such: uploadID = jQuery(this).prev('input');

This solved the issue. I tried to define the image which source attribute I want to change like this, too, but it did not solve the problem (and, in fact, meant no source attribute was updated): changeID = jQuery(this).prev('img');

There are existing questions which ask how to deal with multiple instances of window.send_to_editor, but they have not helped me. Either their solution doesn't work here, or I am implementing it incorrectly.

How do I adjust this code so that the send_to_editor piece updates the right image source attribute, or so that I can show a preview of both images after they're chosen?

Below is the jQuery used in the first, "Normal Headshot", box:

jQuery(document).ready( function( $ ) {

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

    return false;
});


window.send_to_editor = function(html){


    headshotimgurl = $('img',html).attr('src');
    uploadID.val(headshotimgurl);

    jQuery("#imageurladder").attr("src", headshotimgurl);

    tb_remove();

    $( "#imageafterdisplay" ).hide();

    $( "#imagebeforesave" ).show();

    $("#upload_image_button_clear").removeAttr("disabled");

}


  $("#upload_image_button_clear").click(function() {



 if (!$("#upload_image_button_clear").is(":disabled")) {

  $( "#imageafterdisplay" ).hide();

    $( "#imagebeforesave" ).hide();

    $('#upload_image').val('');  

    $("#upload_image_button_clear").attr("disabled","disabled");

  }


 });


 });

Below is the jQuery used in the second, "Column Headshot", box:

jQuery(document).ready( function( $ ) {

$('#upload_column_button').click(function() {


    uploadID = jQuery(this).prev('input');
    formfield = $('#upload_column').attr('name');
    tb_show( '', 'media-upload.php?type=image&TB_iframe=true' );

    return false;


});


window.send_to_editor = function(html){



    columnimgurl = $('img',html).attr('src');
    uploadID.val(columnimgurl);


    jQuery("#columnurladder").attr("src", columnimgurl);

    tb_remove();

    $( "#imageafterdisplay_column" ).hide();

    $( "#imagebeforesave_column" ).show();

    $("#upload_column_button_clear").removeAttr("disabled");


}


 $("#upload_column_button_clear").click(function() {



if (!$("#upload_column_button_clear").is(":disabled")) {

  $( "#imageafterdisplay_column" ).hide();

    $( "#imagebeforesave_column" ).hide();

    $('#upload_column').val('');


    $("#upload_column_button_clear").attr("disabled","disabled");



   }


   });



   });
2

I did similar thing recently but used the wp.media instead of ThickBox https://codex.wordpress.org/Javascript_Reference/wp.media with the same code from Codex. The only thing to make it work with multiple inputs is to move the frame variable from global scope to click function, so the 'frame' will be fresh for each click.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.