web-dev-qa-db-ja.com

Wp。mediaフレームに添付ファイルをIDで表示する

私が構築しているアプリに新しいwp.mediaアップローダフレームを使用しようとしています。私は他の質問、ブログの投稿などについてたくさん読んだ。

私が以下に貼り付けたコードはすでにかなりうまく動いていて、それがだれにでも役立つ場合のために私が参考のために残しておいたいくつかの余分なものさえもします。

ただし、フレームを開いたときにメディアライブラリの表示をフィルタして、指定したIDのリストで定義された添付ファイルのみを表示するようにします

これが私の現在のコードです：

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

ここで見られるようにメディアライブラリの表示をフィルタしようとしていますが、結果が得られません。

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

誰かが構文を書く方法を知っていますか？

uploadsjavascriptmediabackbone
6
Adal

クライアント側でいつでもフィルタリングできます。

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

免責事項： は this SO question に美しいfilterWithIds関数が見つかりました。

3
montrealist