web-dev-qa-db-ja.com

カスタムメタボックス内でアップロードされた画像のプレビューを取得できません

最初にこのチュートリアルの の手順に従いました 。 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のプレビューをどのようにして機能させることができるのでしょうか。

感謝しています、ありがとう。

custom-fieldmetaboxjavascriptadvanced-custom-fieldspreviews
4
keilowe

私はあなたの問題を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つの画像に対してのみ機能することに注意してください。画像選択ウィンドウを再度開いて新しい画像を選択すると、前の画像が新しい選択画像に置き換えられます。

1
cybmeta