WordPress 3.5 Media Uploader Seleziona file multipli

Question

Sto creando un tema WordPress con una pagina delle impostazioni personalizzate. Alcune delle impostazioni richiedono all'utente di caricare/aggiungere un set di immagini (più di 1). Il comportamento predefinito del media uploader è caricare e/o selezionare una singola immagine e inserirla in un post.

Ho seguito this excellent guide sull'utilizzo del media uploader e suggerisce che dovrei essere in grado di impostare più valori su true, ma consente comunque il caricamento o la selezione di un singolo file.

Ecco il mio codice:

Caricare gli script necessari dal momento che si tratta di una pagina di impostazioni personalizzate:

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 Per visualizzare l'uploader dei media e la manipolazione delle immagini selezionate:

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

}); 

Qualcuno è riuscito a far funzionare correttamente la selezione di più file? Mi sto perdendo qualcosa? Grazie!

Answer 1

Aggiornamento

Credo che i media uploader è stato aggiornato dal domanda ha chiesto e ha risposto. Suppongo che nella versione precedente di wordpress l'opzione multiple: 'add' non fosse presente come suggerito da altri utenti. Non ne sono abbastanza sicuro

---

Tutto va bene con il tuo codice. Manca solo una piccola parte.

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

Dopo attachment convertito toJSON è possibile utilizzarlo come indicato nella documentazione. È possibile inserire gli URL delle immagini in alcuni campi nascosti che inviano al server e visualizzare le immagini selezionate per l'utente nello stesso momento.

Solo una piccola cosa che mi sento strana è che, abbiamo bisogno di premere Ctrl + click per selezionare le immagini. Dovrebbe essere piuttosto caselle di controllo o qualcosa del genere.

---

aggiornamento

Ctrl +click o spostamento + click per la selezione di più immagini è il modo wordpress hanno dato. Per uno sguardo più attento, aperto

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

C'è una funzione definita - toggleSelectionHandler. Ascolta la combinazione di tasti che l'utente ha premuto e di conseguenza chiama un'altra funzione che modifica determinate classi e causa la selezione effettiva.

Dopo aver ispezionato in firbug, è possibile vedere due classi vengono applicate -

1. selected
2. details

details classe definisce gli stili per la selezione corrente cliccato/attiva (con bordo blu di spessore) e selected contrassegna effettivamente l'immagine come selezionata e la restituisce nella serie .

È possibile modificare tale comportamento da quel file stesso o scrivere la propria funzione per gestire la selezione. Il primo approccio non è comunque buono.

PS: Wordpress in realtà non utilizza il file sopra. Sceglie la versione compressa dello stesso file. Quindi potresti voler caricare file non compressi e giocare. È possibile forzare wordpress di utilizzare i file non compressi js impostando

define('SCRIPT_DEBUG', true); 

in wp-config.php. Questo salterà il comportamento di load-scripts.php (caricando la versione compressa di ogni file js in un unico file unendoli).

Answer 2

Nel caso qualcuno volesse sapere come farlo, un modo è questo. Si noti che sostituirà completamente il comportamento predefinito nell'ambito che è implementato.

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

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

Se multiple è impostato su true allora questo vi permetterà di selezionare più elementi, come nella schermata della galleria.

Answer 3

Hai solo bisogno di cambiare multiple:true a multiple:'add'. Ecco come funziona la Galleria di default.