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.
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");
}
});
});
