web-dev-qa-db-fra.com

Impossible d'obtenir un aperçu de l'image téléchargée dans une boîte de méta personnalisée

J'ai d'abord suivi les étapes de ce tutoriel . Ajout de l'Image Uploader, j'ai essayé, mais j'ai compris que c'était une ancienne version de WP Uploader ...

Alors j'ai alors trouvé ce post , et maintenant mon uploader est mis à jour.

Le problème, c'est que je ne parviens pas à obtenir l'aperçu de l'image ...

Tout d’abord, c’est la section Image pour les détails de la 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;

C'est le code utilisé pour le téléchargeur //

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

});

Ma tentative pour ajouter l'aperçu utilisait ces lignes pour 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;

Ma question est donc la suivante: comment puis-je obtenir un aperçu de mon image Uploader dans une boîte méta personnalisée?

Toute aide appréciée, merci.

custom-fieldmetaboxjavascriptadvanced-custom-fieldspreviews
4
keilowe

Je vois votre problème dans le javascript. J'ai fait quelque chose de similaire en utilisant l'événement "on close" de l'objet wp.media. Vous pouvez utiliser l'événement "select", comme vous le faites actuellement, mais j'utiliserais l'événement "on select" principalement pour les événements de la fenêtre modale (mais il s'agit simplement d'une préférence, vous pouvez utiliser l'option "on select" si vous le souhaitez). .

Voici mon code javascript suggéré pour vous.

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

Ce code devrait fonctionner avec le code HTML que vous avez posté dans la question. Notez qu'en réalité, cela ne fonctionne que pour UNE image. Si vous ouvrez à nouveau la fenêtre de sélection d'image et sélectionnez une nouvelle image, l'image précédente sera remplacée par la nouvelle image sélectionnée.

1
cybmeta