Wordpress 3.5 niestandardowe przesyłanie nośników dla opcji kompozycji

Question

Wordpress 3.5 został niedawno wydany, użyłem systemu Wordpress Media Upload przez thickbox i window.send_to_editor dla niektórych opcji w moim motywie Wordpress (tła, logo itp.).

Ale jak wiesz, Wordpress zintegrował nowy Media Manager, chciałem użyć tej nowej funkcji do przesyłania zdjęć/plików jako pól niestandardowych. Więc spędziłem ranek, aby znaleźć sposób na uzyskanie pożądanego rezultatu.

Znalazłem za pomocą tego rozwiązania, które może być przydatne dla niektórych z was. Dziękuję za przesłanie opinii na temat kodu lub ulepszeń, o których myślisz!

HTML próbki:

<a href="#" class="custom_media_upload">Upload</a> 
<img class="custom_media_image" src="" /> 
<input class="custom_media_url" type="text" name="attachment_url" value=""> 
<input class="custom_media_id" type="text" name="attachment_id" value=""> 

kod jQuery:

$('.custom_media_upload').click(function() { 

    var send_attachment_bkp = wp.media.editor.send.attachment; 

    wp.media.editor.send.attachment = function(props, attachment) { 

     $('.custom_media_image').attr('src', attachment.url); 
     $('.custom_media_url').val(attachment.url); 
     $('.custom_media_id').val(attachment.id); 

     wp.media.editor.send.attachment = send_attachment_bkp; 
    } 

    wp.media.editor.open(); 

    return false; 
}); 

Jeśli chcesz zobaczyć wszystkie ustawienia zawarte w zmiennej attachment można zrobić console.log(attachment) lub alert(attachment).

Answer 1

Nie zapomnij użyć wp_enqueue_media (nowego w 3.5), jeśli nie you'r na stronie po edycji

Aby używać starego przesyłania mediów pola można to zrobić:

if(function_exists('wp_enqueue_media')){ 
    wp_enqueue_media(); 
}else{ 
    wp_enqueue_style('thickbox'); 
    wp_enqueue_script('media-upload'); 
    wp_enqueue_script('thickbox'); 
} 

Answer 2

I nie znalazł nic, co wywołałoby funkcję niestandardową, gdyby edytor został zamknięty. I korzysta z tego:

wp.media.editor.open(); 
$('.media-modal-close, .media-modal-backdrop').one('click', function(){ 
    //do some stuff 
}); 

lub lepiej:

var id = wp.media.editor.id(); 
var editor = wp.media.editor.get(id); 
if('undefined' != typeof(editor)) editor = wp.media.editor.add(id); 

if (editor) { 
    editor.on('close', function(){ 
     //do some stuff 
    }); 
} 

Answer 3

nie miałem większych szans na zabawę z tego, ale dla tych, którzy chcą wykorzystać element galeria, kod ten powinien ustawić się na swoje droga.

To tylko punkt początkowy - zawiera tylko oddzieloną przecinkami listę identyfikatorów obrazu, ale to powinno wystarczyć, aby zacząć być kreatywnym.

<input id="custom_media_id" type="text" name="attachment_id" value=""> 
<a href="#" class="button custom_media_upload" title="Add Media">Add Media</a> 

<script type="text/javascript"> 
    jQuery('.custom_media_upload').click(function() { 
    var clone = wp.media.gallery.shortcode; 
    wp.media.gallery.shortcode = function(attachments) { 
    images = attachments.pluck('id'); 
    jQuery('#custom_media_id').val(images); 
    wp.media.gallery.shortcode = clone; 
    var shortcode= new Object(); 
    shortcode.string = function() {return ''}; 
    return shortcode; 
    } 
jQuery(this).blur(); // For Opera. See: http://core.trac.wordpress.org/ticket/22445 
wp.media.editor.open(); 
return false;  
}); 
</script> 

To będzie wypełnić pole wejściowe z oddzielonych przecinkami listę Image ID-tych, w kolejności, w jakiej zostały ustawione w edytorze (przy użyciu nowej funkcji przeciągnij i upuść).

Funkcja oczekuje, że kod zostanie odesłany do miejsca docelowego w edytorze głównym, ale nie chcemy tego robić, dlatego tworzymy nowy obiekt, który zwraca pusty ciąg do wstawienia.

Należy również zauważyć, że nie dotyczy to wstawiania pojedynczego obrazu, jak opisano powyżej - po prostu wstawi się go do edytora postów. Dlatego spróbuj połączyć dwa detektory lub usunąć odpowiednie karty.

EDIT

Spędził trochę czasu patrząc na rdzeniu, myślę, że cały ten proces można faktycznie zrobić łatwiej stosując technikę rozplanowany here, ale jak będziesz czytać nie zorientowali się jeszcze jak wstępnie wybierać obrazy po ponownym otwarciu menedżera multimediów.

Answer 4

I zmodyfikowany kod nieco bardziej by działał na wielu polach jednocześnie:

HTML:

<!-- Image Thumbnail --> 
<img class="custom_media_image" src="" style="max-width:100px; float:left; margin: 0px  10px 0px 0px; display:inline-block;" /> 

<!-- Upload button and text field --> 
<input class="custom_media_url" id="" type="text" name="" value="" style="margin-bottom:10px; clear:right;"> 
<a href="#" class="button custom_media_upload">Upload</a> 

jQuery:

jQuery(document).ready(function($){ 

$('.custom_media_upload').click(function() { 

     var send_attachment_bkp = wp.media.editor.send.attachment; 
     var button = $(this); 

     wp.media.editor.send.attachment = function(props, attachment) { 

      $(button).prev().prev().attr('src', attachment.url); 
      $(button).prev().val(attachment.url); 

      wp.media.editor.send.attachment = send_attachment_bkp; 
     } 

     wp.media.editor.open(button); 

     return false;  
    }); 

}); 

Answer 5

Twój będzie o tym w taki sposób, to było niezamierzone. Twój kod javascript powinien wyglądać mniej więcej tak:

$('.custom_media_upload').click(function(e) { 
    e.preventDefault(); 

    var custom_uploader = wp.media({ 
     title: 'Custom Title', 
     button: { 
      text: 'Custom Button Text' 
     }, 
     multiple: false // Set this to true to allow multiple files to be selected 
    }) 
    .on('select', function() { 
     var attachment = custom_uploader.state().get('selection').first().toJSON(); 
     $('.custom_media_image').attr('src', attachment.url); 
     $('.custom_media_url').val(attachment.url); 
     $('.custom_media_id').val(attachment.id); 
    }) 
    .open(); 
});