How to restrict images in v3.5 Media Library modal to only those from a specific post id?

How can someone restrict the images which appear in the v3.5 Media Library modal to only show those that are attached to a specific post id?

I'm creating a front-end management template that allows multiple authors to edit any particular post, hence the need to restrict what is shown on a post-by-post basis rather than those uploaded by a particular user.

The upload modal is based off of Mike Jolley's upload modal tutorial. It's been modified to look for the post id in the body class and attach uploaded media to that $pid.

This is the complete modal js so far:

// Uploading files
jQuery(document).ready(function($) {

  var file_frame;
  var wp_media_post_id = wp.media.model.settings.post.id; // Store the old id

  var classes = $('body').attr('class'); // get all classes from body element
  var set_to_post_id = classes.match(/postid-(\d+)/)[1]; // pid to attach media to

  jQuery(document).on('click', '.upload_image_button', function(){

    event.preventDefault();

    // If the media frame already exists, reopen it.
    if ( file_frame ) {
      // Set the post ID to what we want
      file_frame.uploader.uploader.param( 'post_id', set_to_post_id );
      // Open frame
      file_frame.open();
      return;
    } else {
      // Set the wp.media post id so the uploader grabs the ID we want when initialised
      wp.media.model.settings.post.id = set_to_post_id;
    }

    // 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' ),
      },
      multiple: false  // Set to true to allow multiple files to be selected
    });

    // When an image is selected, run a callback.
    file_frame.on( 'select', function() {
      // We set multiple to false so only get one image from the uploader
      attachment = file_frame.state().get('selection').first().toJSON();

      // Do something with attachment.id and/or attachment.url here

      // Restore the main post ID
      wp.media.model.settings.post.id = wp_media_post_id;
    });

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

  });

  // Restore the main ID when the add media button is pressed
  jQuery('a.add_media').on('click', function() {
    wp.media.model.settings.post.id = wp_media_post_id;
  });

});

The two primary authoritative WPSE threads on Media Library only deal with restricting by user.

Another WPSE reference is Limit Media Library to Given Folder.

Any direction is appreciated.

Topic media-modal media-library uploads Wordpress

Category Web

1
answered at

I am not sure is this what you are looking for. This code will "lock" uploads to show only “Uploaded to this post” in media panel

add_action( 'admin_footer-post-new.php', 'firmasite_mediapanel_lock_uploaded' );
add_action( 'admin_footer-post.php', 'firmasite_mediapanel_lock_uploaded' );
function firmasite_mediapanel_lock_uploaded() { ?>
  <script type="text/javascript">
    jQuery(document).on("DOMNodeInserted", function(){
        // Lock uploads to "Uploaded to this post"
        jQuery('select.attachment-filters [value="uploaded"]').attr( 'selected', true ).parent().trigger('change');
    });
  </script>
<?php }
1
answered at

I've spend two days looking for a solution, the answer from Ünsal Korkmaz didn't work for me. Finally I've found the correct answer and I want to share with every one.

Just to clarify, the answer from Ünsal Korkmaz will preselect the option of "Uploaded to this post" in the media manager window, but if you are using the media manager in your own plugin, theme, custom meta box, etc, and you are constructing your own media manager frame this won't work. Even if it works, you will have a preselected filter but this dosen't effectively limit the media library to a defined post attachments.

Here is the solution I've found:

  //Chame the selector to fit your code
  jQuery('#manage-gallery-button').click(function(e) {

         e.preventDefault();
         var frame = wp.media({
                       title : 'Pick the images for the gallery of this entry',
                       frame: 'select',
                       multiple : true,
                       library : {
                                    type : 'image',
                                    //HERE IS THE MAGIC. Set your own post ID var
                                    uploadedTo : wp.media.view.settings.post.id
                                  },
                       button : { text : 'Insert' }
                   });

                   frame.on('close',function() {
                      // get selections and save to hidden input plus other AJAX stuff etc.
                      var selection = frame.state().get('selection');
                      var gallery_ids = new Array();
                      var my_index = 0;
                      selection.each(function(attachment) {
                         gallery_ids[my_index] = attachment['id'];
                         my_index++;
                      });
                      var ids = gallery_ids.join(",");
                      //Store ids in my hidden input
                      jQuery('#gallery-ids').val(ids);
                      Refresh_Gallery(ids);
                   });

                  frame.on('open',function() {
                    //Preselect attachements from my hidden input
                    var selection = frame.state().get('selection');
                    ids = jQuery('#gallery-ids').val().split(',');
                    ids.forEach(function(id) {
                      attachment = wp.media.attachment(id);
                      attachment.fetch();
                      selection.add( attachment ? [ attachment ] : [] );
                    });

                  });

                frame.open();
 });

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.