web-dev-qa-db-fra.com

Afficher les pièces jointes par ID dans un cadre wp.media

J'essaie d'utiliser le nouveau cadre de téléchargement wp.media pour une application que je suis en train de construire. J'ai beaucoup lu sur d'autres questions, sur des blogs, etc.

Le code que j'ai collé ci-dessous fonctionne déjà assez bien et contient même des éléments supplémentaires que j'ai laissés à titre de référence, au cas où ils seraient utiles à quiconque.

Mais il y a une modification que j'aimerais y apporter: lorsque le cadre est ouvert, je veux qu'il filtre l'affichage de la "médiathèque" pour afficher uniquement la pièce jointe définie par une liste d'identifiants que je fournis.

Voici mon code actuel:

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

J'essaie de filtrer l'affichage de la médiathèque comme on le voit ici, mais cela ne donne aucun résultat:

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

Est-ce que quelqu'un sait comment écrire la syntaxe?

uploadsjavascriptmediabackbone
6
Adal

Vous pouvez toujours filtrer côté client:

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

Disclaimer: a trouvé la belle fonction filterWithIds dans this SO question .

3
montrealist