Change the default-view of Media Library in 3.5?

6 comments

1. There were two minor mistakes in my previous answer:

   1. I forgot to trigger the change event for the parent.
   2. I called the function on every AJAX call, making other selections impossible.

   Here is the fixed code:

   <?php
   /**
    * Plugin Name: Pre-select post specific attachments
    */
   
   add_action( 'admin_footer-post-new.php', 'wpse_76048_script' );
   add_action( 'admin_footer-post.php', 'wpse_76048_script' );
   
   function wpse_76048_script()
   {
       ?>
   <script>
   jQuery(function($) {
       var called = 0;
       $('#wpcontent').ajaxStop(function() {
           if ( 0 == called ) {
               $('[value="uploaded"]').attr( 'selected', true ).parent().trigger('change');
               called = 1;
           }
       });
   });
   </script>
       <?php
   }
   

   Log in to Reply

2. The only problem with the JS above that it toggles the select box to trigger the change after the page loads and after its already begun to download ALL MEDIA ITEMS. For my client on a slow T1 this locked things up as it downloaded both the ALL MEDIA TIMES and the UPLOADED TO THIS POST items together.

   I had some help from the great Sewpafly who develops Post Thumbnail Editor Plugin. he shared a great piece of JS that prevents the load of ALL MEDIA ITEMS and forces it to load only images “UPLOADED TO THIS POST” by default.

   The Code

   File: myadmin.js

   jQuery(function($) {
       var called = 0;
       $('#wpcontent').ajaxStop(function() {
           if ( 0 == called ) {
               $('[value="uploaded"]').attr( 'selected', true ).parent().trigger('change');
               called = 1;
           }
       });
     var oldPost = wp.media.view.MediaFrame.Post;
       wp.media.view.MediaFrame.Post = oldPost.extend({
           initialize: function() {
               oldPost.prototype.initialize.apply( this, arguments );
               this.states.get('insert').get('library').props.set('uploadedTo', wp.media.view.settings.post.id);
           }
       });
   });
   

   File: functions.php

   add_action('admin_enqueue_scripts', 'add_admin_js');
   function add_admin_js() {
       wp_enqueue_script('admin_js', get_bloginfo( 'template_directory' ) . '/js/admin.js');
   }
   

   The same code on GitHub: https://gist.github.com/fishnyc22/5593693

   I dropped that into a JS file and called it in functions.php with the admin_enqueue_scripts. See GIST above for both the PHP and JS.

   Works brilliantly. Hopefully the fine wordpress folks fix this in a upcoming update, but for now Sewpafly has the best solution I’ve found. Thanks again buddy.

   I should note that I have just discovered that the viewer defaults to MEDIUM sized images which I had disabled (set to 0,0) since I was not using and preventing bloat. When medium size isn’t available wordpress loads the FULL size image. I have since given in enabled the medium size.

   Log in to Reply

3. @toscho Ah, I found a bug in your code. Please bare with me. Do the exact following to replicate the issue:

   1) Open a draft post.

   2) Click on Add Media button. Wait for the jQuery function to load.

   3) On your left, click on the Set Featured Image link.

   4) Now close the Media popup window and on the post edit page, click on the Set featured image link on the right side-bar.

   5) You will see that the jQuery function will not work.

   However, if you would have clicked on the Set featured image link first on post edit load, the function would work. Can you replicate this issue and possibly find a solution? Sorry again for posting this as an answer but this platform does not offer me a better option currently.

   EDIT: Can someone please let toscho know about this. You can do this by adding a comment to his answer which I believe should give him a notification. I cannot write comments as I do not have enough reputation…

   EDIT 2: If you want to desperately avoid this issue, you can remove the “Set Featured Image” link in the popup and force the user to use the sidebar link (like WP versions prior to 3.5). Use this filter that was introduced in WP 3.5:

   add_filter( 'media_view_strings', 'cor_media_view_strings' );
   /**
    * @see wp-includes|media.php
    */
   function cor_media_view_strings( $strings ) {
       unset( $strings['setFeaturedImageTitle'] );
       return $strings;
   }
   

   As I said, this is a desperate fix until there is a solution posted for the main code.

   Log in to Reply

4. The main thing I didn’t like about most of these solutions is that it was blinking on alot of screens, and if you clicked on Featured Image it would revert back to showing all images. After some searching I think found a permanent solution (Thanks to Ünsal Korkmaz) which looks like it solves these problems. The code:

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

   which permanently sets the media library to only show “Uploaded To This Post”, even if you try and change the view which means no blinking.

   I’ve added this code to accompany it to remove the selectbox entirely:

   add_action( 'admin_head', 'hide_select_ddl' );
   function hide_select_ddl()
   {
       ?>
   <style type="text/css">
       div.media-menu a.media-menu-item:nth-child(3) {display:none!important;}
       .media-frame-content .attachment-filters:first-child {
           display:none;
       }
   </style>
       <?php
   }
   

   Log in to Reply

5. The new versions of wordpress use a different approach (advanced Backbonejs) for the media uploader;
   Check the code from this plugin as it works for new versions of WordPress.

   Log in to Reply

6. This is my solutions to set dateFilter to current month, though it triggers AJAX twice.

   .on('content:render:browse', function(a, b) {
     var filter = a.toolbar.secondary.get('dateFilter');           
     if (filter.model) {
       filter.model.set(filter.filters[1].props);
     }
   })
   

   Log in to Reply