Não é possível obter a visualização da imagem carregada em uma caixa Meta personalizada

4

Primeiramente, eu segui as etapas em este tutorial . Adicionado o Image Uploader, tentei, mas percebi que é uma versão mais antiga do WP Uploader ...

Então eu encontrei esta postagem , e agora meu uploader está atualizado.

O problema é que não consigo fazer a imagem de visualização funcionar ...

Primeiro, esta é a seção Imagem dos detalhes da Meta Box //

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;

Este é o código usado para o uploader //

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

});

Minha tentativa de adicionar a visualização estava usando estas linhas para 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; 

Então, minha pergunta seria: como posso obter uma visualização trabalhando para o meu Image Uploader dentro de uma Meta Box personalizada?

Toda ajuda é apreciada, obrigado.

    
por keilowe 13.07.2013 / 02:19

1 resposta

1

Eu vejo seu problema no javascript. Eu fiz algo semelhante usando o evento "on close" do objeto wp.media. Você pode usar o "select event", como você está realmente fazendo, mas eu usaria o evento "on select" principalmente para eventos dentro da janela modal (mas é apenas preferência, você pode usar o "on select" se você quiser) .

Aqui está o meu código javascript sugerido para você.

  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();
   });
});

Este código deve funcionar com o código HTML que você publicou na pergunta. Observe que, na verdade, ele funciona apenas para UMA imagem, se você abrir a janela de seleção de imagem novamente e selecionar uma nova imagem, a imagem anterior será substituída pela nova imagem selecionada.

    
por cybmeta 08.09.2013 / 21:43