‘Add Media’ to post – filter images

Question

Well I have figured out the answer to my question. As mentioned in the comments, I’m making an ajax call to get the list of entries for the custom ‘select’ dropdown. In the ajax function, I’m comparing window.location.pathname to this regex:var regex = /\/wp-admin\/post[-new]*\.php/; to make sure that it only executes when I’m trying to ‘Add media’ to a post or page. When the ajax call returns to the client, I’m having the ‘success:’ path invoke a function which contains the following blocks of backbone.js code:

var MediaLibraryUploadedFilter = wp.media.view.AttachmentFilters.extend({

   id: 'media-attachment-directory-filter',

   createFilters: function() {

     var filters = {};
     dirAry = retdata.split(","); /* retdata = "Dogs,Birds,Fish,Cats,Alligators" -from ajax*/
     arySz = dirAry.length;

     var newPri = 20; /* Saving 10 for the 'ALL' */
     for (let i = 0; i < arySz; i++) {
       tagName = dirAry[i].replace(/ /g, '_'); /* will disallow spaces in tagName*/

       filters[tagName] = {
           text: tagName,
           props: {
               typeofanimal: tagName,
           },
           priority: newPri
       };
       newPri = newPri + 10; /* Determines order on dropdown */
     }


      filters.all = {  /* The 'all' will appear as the default on the dropdown */
         text:  "ALL Dirs",
         props: {
            typeofanimal: "all",
            status:  null,
            type:    'image',
            uploadedTo: null,
            orderby: 'date',
            order:   'ASC'
         },
         priority: 10 /* Will show as default (first on dropdown) */
      };

      this.filters = filters;
   }
});

var AttachmentsBrowser = wp.media.view.AttachmentsBrowser;
wp.media.view.AttachmentsBrowser = wp.media.view.AttachmentsBrowser.extend({
   createToolbar: function() {

      // Make sure to load the original toolbar
      AttachmentsBrowser.prototype.createToolbar.call( this );

      this.toolbar.set(
         'MediaLibraryUploadedFilter',
         new MediaLibraryUploadedFilter({
            controller: this.controller,
            model:      this.collection.props,
            priority:   -100
         })
         .render()
      );
   }
});

The the above code is all that is needed to make my animals show up in the dropdown and for an ajax call to go up to the server when the user selects a specific animal. Then, fortunately, up on the server, I’m able to use the ‘ajax_query_attachments_args’ filter to get his selection and construct a query for the image ID’s (eg: corresponding to photos of Birds)

add_filter('ajax_query_attachments_args', 'filter_attachments_by_custom_dropdown', 10, 1);
function filter_attachments_by_custom_dropdown($query) {
    /* Ultimately, logic not shown here would create the array for the Image ID's at post__in */
    $is_target_page = array_key_exists('typeofanimal', $_REQUEST['query']);
    if ($is_target_page && $_REQUEST['query']['typeofanimal'] != 'all') {
       $query['meta_key'] = '_wp_attached_file';
       $query['post__in'] =  array(5, 20);    /* Temporary hardcode of Image ID's */
    }
    return $query;
}

Here’s what comes into the above function as $_REQUEST[‘query’] when the user selects ‘Birds’:

[orderby] => date
[typeofanimal] => Birds
[order] => DESC
[posts_per_page] => 80
[paged] => 1

To enqueue the javascript (backbone) code I followed the pattern here (with slight modifications) …my code looks like this:

wp_enqueue_script( 'media-library-taxonomy-filter', get_stylesheet_directory_uri() .
                '/assets/js/collection-filter.js', array( 'media-editor', 'media-views' ) );
// Override code styling to accommodate for a third dropdown filter
add_action( 'admin_footer', function(){
   ?>
   <style>
   .media-modal-content .media-frame select.attachment-filters {
      max-width: -webkit-calc(33% - 12px);
      max-width: calc(33% - 12px);
   }
   </style>
   <?php
});

That’s all!

Related Posts: