Wordpress Media Button Settings

Question

I have built myself a custom options page in my wordpress admin. In it, I have a few "media" picker buttons utilizing the following:

jQuery( document ).ready( function( $ ) {
    // pop the media box
    $('.gyo_upload').on( 'click', function( e ) {
        e.preventDefault();
        var send_attachment_bkp = wp.media.editor.send.attachment;
        var $button = $( this );
        wp.media.editor.send.attachment = function( props, attachment ) {
            alert(props.library);
            var $_which = $button.data( 'which' );
            $( '#img_' + $_which ).attr( 'src', attachment.url ).css( 'width', 'auto' );
            $( '#' + $_which ).val( attachment.url );
            wp.media.editor.send.attachment = send_attachment_bkp;
        }
        wp.media.editor.open( $button );
        return false;
    } );
    $('.remove_image_button').click(function() {
        var answer = confirm('Are you sure?');
        if (answer == true) {
            var src = $(this).parent().prev().attr('data-src');
            var $this = $( this );
            var $_which = $this.data( 'which' );
            $( '#img_' + $_which ).attr('src', '');
            $( '#' + $_which ).val('');
        }
        return false;
    });
} );

While this works great, I have not found how I can limit this to only show images, instead it shows the full media spectrum.

How can I force it to use/show only images?

Answer 1

My suggestion would be to change query parameters so only images are displayed in the media library. You could add a snippet like the one below to your functions.php file

add_filter('ajax_query_attachments_args', function($query){

  /**
   * check if you're on the correct page
   */
  if(filter_var($_SERVER['HTTP_REFERER'], FILTER_VALIDATE_URL) == 
     'https://yourhostdomain.com/wp-admin/admin.php?page=_your_options_page'){
      $query['post_mime_type'] = [
         'image/jpeg',
         'image/gif',
         'image/png',
         'image/bmp',
         'image/tiff',
         'image/x-icon'
      ];
  }
  return $query;
});

Answer 2

I actually have it figured out.

I ended up modifying the code in my question to include a "type" check to either pop the full media browser, or just the image browser:

jQuery( document ).ready( function( $ ) {

    // pop the media box
    $('.gyo_upload').on( 'click', function( e ) {

        // prevent the default behavior
        e.preventDefault();

        // get what we're clicking
        var $button = $( this );

        // now figure out which one we want to popup
        var $what = $button.data( 'what' );

        // what do we actually want to popup here?
        if ( $what == 'image' ) {
            // image frame
            mediaUploader = wp.media.frames.file_frame = wp.media( {
                title: 'Choose Image',
                button: {
                text: 'Choose Image'
                }, multiple: false } );
            mediaUploader.on( 'select', function( ) {
                var $_which = $button.data( 'which' );
                var attachment = mediaUploader.state().get( 'selection' ).first().toJSON();
                $( '#img_' + $_which ).attr( 'src', attachment.url ).css( 'width', 'auto' );
                $( '#' + $_which ).val( attachment.url );
            } );
            mediaUploader.open();
        } else if ( $what == 'media' ) {
            // media frame
            var send_attachment_bkp = wp.media.editor.send.attachment;
            wp.media.editor.send.attachment = function( props, attachment ) {
                var $_which = $button.data( 'which' );
                $( '#img_' + $_which ).attr( 'src', attachment.url ).css( 'width', 'auto' );
                $( '#' + $_which ).val( attachment.url );
                wp.media.editor.send.attachment = send_attachment_bkp;
            }
            wp.media.editor.open( $button );
        }       

        return false;
    } );

    // process the remove attachment button
    $( '.remove_image_button' ).click( function() {
        var answer = confirm( 'Are you sure?' );
        if ( answer == true ) {
            var $this = $( this );
            var $_which = $this.data( 'which' );
            $( '#img_' + $_which ).attr('src', '');
            $( '#' + $_which ).val( '' );
        }
        return false;
    } );

} );