最初にこのチュートリアルの の手順に従いました 。 Image Uploaderを追加して試しましたが、WP Uploaderの古いバージョンであることがわかりました...
それで、私はそれからこのポストを見つけ、そして今私のアップローダは更新されます。
問題は、プレビュー画像が機能しないことです。
まずはこれがメタボックスの詳細のImageセクションです。
case 'image':
$image = get_template_directory_uri().'/images/image.png';
echo '<span class="custom_default_image" style="display:none">'.$image.'</span>';
if ($meta) { $image = wp_get_attachment_image_src($meta, 'medium'); $image = $image[0]; }
echo '<label for="upload_image">
<input id="upload_image" name="'.$field['id'].'" type="hidden" class="custom_upload_image" value="'.$meta.'" />
<img src="'.$image.'" class="custom_preview_image" alt="" />
<input id="upload_image_button" class="custom_upload_image_button button" type="button" value="Upload Image" /]
<a href="#" class="custom_clear_image_button">Remove Image</a>
</label>';
break;
これはアップローダに使われるコードです//
jQuery(document).ready(function($){
var custom_uploader;
$('#upload_image_button').click(function(e) {
e.preventDefault();
//If the uploader object has already been created, reopen the dialog
if (custom_uploader) {
custom_uploader.open();
return;
}
//Extend the wp.media object
custom_uploader = wp.media.frames.file_frame = wp.media({
title: 'Choose Image',
button: {
text: 'Choose Image'
},
multiple: false
});
//When a file is selected, grab the URL and set it as the text field's value
custom_uploader.on('select', function() {
attachment = custom_uploader.state().get('selection').first().toJSON();
$('#upload_image').val(attachment.url);
});
//Open the uploader dialog
custom_uploader.open();
});
jQuery('.custom_clear_image_button').click(function() {
var defaultImage = jQuery(this).parent().siblings('.custom_default_image').text();
jQuery(this).parent().siblings('.custom_upload_image').val('');
jQuery(this).parent().siblings('.custom_preview_image').attr('src', defaultImage);
return false;
});
});
私がプレビューを追加しようとしたのは、JSにこれらの行を使っていた//
preview = jQuery(this).siblings('.custom_preview_image');
window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
classes = jQuery('img', html).attr('class');
id = classes.replace(/(.*?)wp-image-/, '');
formfield.val(id);
preview.attr('src', imgurl);
tb_remove();
}
return false;
私の質問は、カスタムメタボックス内でImage Uploaderのプレビューをどのようにして機能させることができるのでしょうか。
感謝しています、ありがとう。
私はあなたの問題をJavaScriptで見ます。私はwp.mediaオブジェクトの "on close"イベントを使って同様のことをしました。実際に行っているように "select event"を使うことができますが、私は "on select"イベントを主にモーダルウィンドウ内のイベントに使います(しかしそれは単に好みです、望むなら "on select"を使うことができます) 。
ここで私はあなたのためのJavaScriptコードを提案しました。
jQuery(document).ready(function($){
var custom_uploader;
$('#insert-video-button').click(function(e) {
e.preventDefault();
//If the uploader object has already been created, reopen the dialog
if (custom_uploader) {
custom_uploader.open();
return;
}
//Extend the wp.media object
custom_uploader = wp.media({
title: 'Choose Image',
button: {
text: 'Choose Image',
},
multiple: false,
// If you pretent a function only for images you can limit the media elements only to images
library : { type : 'image'}
});
//When close, grab the url of the image where needed
custom_uploader.on('close', function() {
attachment = custom_uploader.state().get('selection').first().toJSON();
$('#upload_image').val(attachment.url);
$('.custom_preview_image').attr("src", attachment.url);
});
//Open the uploader dialog
custom_uploader.open();
});
});
このコードは、質問に投稿したHTMLコードと連携するはずです。実際には1つの画像に対してのみ機能することに注意してください。画像選択ウィンドウを再度開いて新しい画像を選択すると、前の画像が新しい選択画像に置き換えられます。