我正在尝试为自己的帖子类型管理区域制作一个小图片上传元框。我想要一种行为,当用户单击帖子页面上的“上传图像”按钮时,会弹出图像框架,并且用户可以对其进行多选。此后,用户可以关闭框架(由于我尚未单击帖子页面上的“更新”,因此该帖子尚未更新),并且如果用户改变主意,则可以重新打开图库框架并进行调整图像选择。但是,我希望已经选择了上次选择的图像。我该怎么办?这是我的JS文件
jQuery(function($)
{
$('body').on('click', '.mycustomfunction_upload_image_button', function(e)
{
e.preventDefault();
var button = $(this),
custom_uploader = wp.media({
title: 'Insert image',
library : {
type : 'image'
},
button: {
text: 'Use the Image(s)' // button label text
},
multiple: 'add'
}).on('select', function()
{
var attachments = custom_uploader.state().get('selection').map(
function( attachment )
{
attachment.toJSON();
return attachment;
}
);
var selected_image_ids = [];
for (var i = 0; i < attachments.length; i++) {
$(button).after('<div class="mycustomfunction_order_image_preview"><img src="' + attachments[i].attributes.url + '" style="max-width:95%;display:block;" /></div>');
selected_image_ids.push(attachments[i].id);
}
$('#mycustomfunction_order_iamge_inputs').val(selected_image_ids.join(','));
});
custom_uploader.on('open',function()
{
var selection = custom_uploader.state().get('selection');
var ids_value = (jQuery('#mycustomfunction_order_iamge_inputs').val()).split();
if(ids_value.length > 0)
{
//var ids = ids_value.split(',');
ids_value.forEach(function(id) {
attachment = wp.media.attachment(id);
attachment.fetch();
selection.add(attachment ? [attachment] : []);
});
}
});
custom_uploader.open();
});
});
这是我的php文件
function mycustomfunction_order_image_upload()
{
if ( ! did_action( 'wp_enqueue_media' ) )
{
wp_enqueue_media();
}
wp_enqueue_script( 'order_image_upload', MYCUSTOM_PLUGIN_URL . '/assets/js/upload_order_images.js', array('jquery'), null, false );
}
add_action( 'admin_enqueue_scripts', 'mycustomfunction_order_image_upload' );
/*
* @param string $name Name of option or name of post custom field.
* @param string $value Optional Attachment ID
* @return string HTML of the Upload Button
*/
function mycustomfunction_admin_order_upload_image_field( $name, $values = array())
{
$image_size = 'full'; // it would be better to use thumbnail size here (150x150 or so)
$display = 'none'; // display state ot the "Remove image" button
$images_html = '<div>';
if (!empty($values) && count($values) > 0)
{
$images_html .= '
<a href="#" class="mycustomfunction_upload_image_button button">Upload Image</a>
<input type="hidden" name="mycustomfunction_selected_image_ids" id="mycustomfunction_order_iamge_inputs" value="' . implode(",", $values) . '" />
<a href="#" class="mycustomfunction_remove_image_button" style="display:inline-block;display:' . $display . '">Remove image</a>';
foreach ($values as $value)
{
$image_attributes = wp_get_attachment_image_src( $value, $image_size );
// $image_attributes[0] - image URL
// $image_attributes[1] - image width
// $image_attributes[2] - image height
$images_html .= '<div class="mycustomfunction_order_image_preview"><img src="' . $image_attributes[0] . '" style="max-width:95%;display:block;" /></div>';
}
}
else
{
$images_html .= '
<a href="#" class="mycustomfunction_upload_image_button button">Upload Image</a>
<input type="hidden" name="mycustomfunction_selected_image_ids" id="mycustomfunction_order_iamge_inputs" value="" />
<a href="#" class="mycustomfunction_remove_image_button" style="display:inline-block;display:' . $display . '">Remove image</a>';
}
$images_html .= '</div>';
return $images_html;
}
/*
* Add a meta box
*/
add_action( 'add_meta_boxes', 'misha_meta_box_add' );
function misha_meta_box_add() {
add_meta_box('order_image_upload', // meta box ID
'Upload Order Image(s)', // meta box title
'print_admin_order_image_meta_box', // callback function that prints the meta box HTML
'shop_order', // post type where to add it
'side', // priority
'core' ); // position
}
/*
* Meta Box HTML
*/
function print_admin_order_image_meta_box( $post ) {
$meta_key = 'second_featured_img';
$meta_value = get_post_meta($post->ID, $meta_key, true);
echo mycustomfunction_admin_order_upload_image_field( $meta_key, empty($meta_value) ? array() : $meta_value);
}
/*
* Save Meta Box data
*/
add_action('save_post', 'save_order_images');
function save_order_images( $post_id ) {
if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE )
return $post_id;
$meta_key = 'second_featured_img';
update_post_meta( $post_id, $meta_key, $_POST[$meta_key] );
// if you would like to attach the uploaded image to this post, uncomment the line:
// wp_update_post( array( 'ID' => $_POST[$meta_key], 'post_parent' => $post_id ) );
return $post_id;
}