WordPress 3.5 Media Uploader Wybór wielu plików

Question

Buduję motyw WordPress ze stroną ustawień niestandardowych. Niektóre ustawienia wymagają od użytkownika przesłania/dodania zestawu obrazów (więcej niż 1). Domyślnym zachowaniem narzędzia do przesyłania multimediów jest przesłanie i/lub wybranie pojedynczego obrazu i wstawienie go do wpisu.

Śledziłem this excellent guide w sprawie korzystania z narzędzia do przesyłania multimediów, i sugeruje, że powinienem mieć możliwość ustawienia wielu na true, ale nadal pozwala tylko na załadowanie lub wybranie pojedynczego pliku.

Oto mój kod:

Załaduj potrzebnych skryptów ponieważ jest to strona Ustawienia niestandardowe:

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

JavaScript/jQuery do wyświetlania uploader mediów i obsługi wybranych obrazów:

var tgm_media_frame; 

$('.upload-images').click(function() { 

    if (tgm_media_frame) { 
    tgm_media_frame.open(); 
    return; 
    } 

    tgm_media_frame = wp.media.frames.tgm_media_frame = wp.media({ 
    multiple: true, 
    library: { 
     type: 'image' 
    }, 
    }); 

    tgm_media_frame.on('select', function(){ 
    var selection = tgm_media_frame.state().get('selection'); 
    selection.map(function(attachment) { 
     attachment = attachment.toJSON(); 
      console.log(attachment); 
      // Do something with attachment.id and/or attachment.url here 
    }); 
    }); 

    tgm_media_frame.open(); 

}); 

Czy ktoś był w stanie poprawnie obsługiwać wielu plików? Czy czegoś brakuje? Dzięki!

Answer 1

Aktualizacja

myślę uploader mediów został zmodernizowany, ponieważ pytanie zadane i odpowiedzi. Domyślam się, że w poprzedniej wersji wordpress multiple: 'add' opcja nie była obecna zgodnie z sugestią innych użytkowników. Nie jestem pewien.

---

Wszystko dobrze z kodem. Brakuje tylko małej części.

selection.map(function(attachment) { 
    attachment = attachment.toJSON(); 
    $("#something").after("<img src=" +attachment.url+">"); 
}); 

Po attachment przekształcone toJSON można go używać jak wspomniano w dokumentacji. Możesz umieścić adresy URL obrazów w ukrytych polach umieszczonych na serwerze i wyświetlać wybrane obrazy do użytkownika w tym samym czasie.

Tylko mała rzecz czuję dziwne jest to, że musimy nacisnąć Ctrl + kliknij, aby wybrać zdjęcia. Powinien to być raczej checkbox lub coś.

---

aktualizacja

ctrl + kliknij lub przesunięcie + kliknięcie wyboru wielu obrazów jest sposobem wordpress dały. Dla bliższego spojrzenia, otwartej

... \ wp-includes \ js \ Media-views.js

istnieje funkcja zdefiniowana - toggleSelectionHandler. Odsłuchuje on kombinację klawiszy, która została naciśnięta przez użytkownika i odpowiednio wywołuje inną funkcję, która zmienia niektóre klasy i powoduje rzeczywisty wybór.

Po kontroli w firbug można zobaczyć dwie klasy są stosowane -

1. selected
2. details

details klasa definiuje style dla bieżącej klikniętego/aktywnej selekcji (z niebieskim grubą granicy) i selected faktycznie oznacza obraz jako wybrany i zwraca go w tablicy wyboru.

Możesz zmienić to zachowanie z tego pliku lub napisać własną funkcję do obsługi zaznaczenia. Pierwsze podejście nie jest jednak dobre.

PS: Wordpress w rzeczywistości nie korzysta z powyższego pliku. Wybiera skompresowaną wersję tego samego pliku. Więc możesz załadować nieskompresowany plik i się bawić. Można wymusić wordpress używać nieskompresowanych plików js ustawiając

define('SCRIPT_DEBUG', true); 

w wp-config.php. Spowoduje to pominięcie zachowania load-scripts.php (ładowanie skompresowanej wersji każdego pliku js do pojedynczego pliku poprzez ich scalenie).

Answer 2

W przypadku, gdy ktoś chce wiedzieć, jak to zrobić, jednym ze sposobów jest to. Zauważ, że całkowicie zastąpi domyślne zachowanie w zakresie, w którym jest zaimplementowane.

wp.media.view.Attachment.prototype.toggleSelectionHandler = function(event) { 
    var method = 'between'; 
    if (event.shiftKey) { 
     method = 'between'; 
    } else { 
     method = 'toggle'; 
    } 

    this.toggleSelection({ 
     method: method 
    }); 
}; 

Jeśli multiple jest ustawiony na true wtedy ta pozwala wybrać kilka pozycji, jak na ekranie galerii.

Answer 3

Wystarczy zmienić multiple:true na multiple:'add'. W ten sposób działa domyślna funkcja Utwórz galerię.