it-swarm.com.de

Anzeigen von Anhängen nach ID in einem wp.media-Frame

Ich versuche, den neuen wp.media-Uploader-Frame für eine App zu verwenden, die ich erstelle. Ich habe viel über andere Fragen, Blog-Posts usw. gelesen.

Der Code, den ich unten eingefügt habe, funktioniert bereits ganz gut und macht sogar einige zusätzliche Dinge, die ich als Referenz hinterlassen habe, falls es für jemanden nützlich ist.

Es gibt jedoch eine Modifikation, die ich hinzufügen möchte: Wenn der Frame geöffnet wird, soll die Anzeige "Medienbibliothek" so gefiltert werden, dass nur Anhänge angezeigt werden, die durch eine Liste der von mir angegebenen IDs definiert sind.

Hier ist mein aktueller Code:

// Uploading files
 var file_frame;

 $('.upload_attachments_button').on('click', function( event ){

event.preventDefault();

// If the media frame already exists, reopen it.
if ( file_frame ) {
  file_frame.open();
  return;
}

// Create the media frame.
file_frame = wp.media.frames.file_frame = wp.media({
  title: jQuery( this ).data( 'uploader_title' ),
  button: { text: jQuery( this ).data( 'uploader_button_text' ) },
  library : { type : 'image' },
  multiple: true  // Set to true to allow multiple files to be selected
});

   // When frame is open, select existing image attachments from custom field
file_frame.on( 'open', function() {

var selection = file_frame.state().get('selection');
var attachment_ids = jQuery('#attachment_ids').val().split(',');

// This is my attempt at showing only attachment with ID 275 --> but doesn't work!
file_frame.state().set( 'library', media.query({ id: 275 }) );

attachment_ids.forEach(function(id) {
  attachment = wp.media.attachment(id);
  attachment.fetch();
  selection.add( attachment ? [ attachment ] : [] );
});
 });

  // When images are selected, place IDs in hidden custom field and show thumbnails.
file_frame.on( 'select', function() {

var selection = file_frame.state().get('selection');

// Place IDs in custom field
var attachment_ids = selection.map( function( attachment ) {
  attachment = attachment.toJSON();
  return attachment.id;
}).join();
if( attachment_ids.charAt(0) === ',' ) { attachment_ids = attachment_ids.substring(1); }
$('#attachment_ids').val( attachment_ids );


// Show Thumbs
var attachment_thumbs = selection.map( function( attachment ) {
  attachment = attachment.toJSON();
  if( attachment.id != '' ) { return '<img src="' + attachment.sizes.thumbnail.url + '" id="id-' + attachment.id + '" />'; }
}).join(' ');
$('#images-feedback').show();
$('#thumbs').html(attachment_thumbs);

});

// Finally, open the modal
file_frame.open();
});


 // Place selected thumbnail ID into custom field to save as featured image 
 $(document).on('click', '#thumbs img', function() {
 $('#thumbs img').removeClass('chosen');
 var thumb_ID = $(this).attr('id').substring(3);
 $('#wpuf_featured_img').val(thumb_ID);
 $(this).addClass('chosen');
 });

Ich versuche, die Anzeige der Medienbibliothek wie hier gezeigt zu filtern, aber es werden keine Ergebnisse angezeigt:

file_frame.state().set( 'library', media.query({ id: 275 }) );

Weiß jemand, wie man die Syntax schreibt?

6
Adal

Sie können immer clientseitig filtern:

var query = wp.media.query();

query.filterWithIds = function(ids) {
    return _(this.models.filter(function(c) { return _.contains(ids, c.id); }));
};

var res = query.filterWithIds([6,87]); // change these to your IDs

res.each(function(v){
    console.log( v.toJSON() );
});

Haftungsausschluss: fand die schöne filterWithIds Funktion in dieser SO Frage .

3
montrealist