Show only specific media using wp.media

  • arrann

    (@arrann)


    7 years, 11 months ago

    I am working on a button which allows you to add images to a post.
    I did so using the following code which open a frame of the media library.

    frame = wp.media({
    title: 'Select or Upload',
    button: {
        text: 'Use this media'
    },
    multiple: false,
    frame: frame_type
});
frame.open();

    My problem is that I want the frame to only show specific media types e.g. only images or only videos.
    Is there a way to achieve that behaviour?

Viewing 1 replies (of 1 total)
  • Aubrey Portwood

    (@aubreypwd)

    7 years, 10 months ago

    There is a way, checkout https://githu…topic/show-only-specific-media-using-wpmedia/media.js and this gif to see it in action

    // Open the wp.media frame.
var frame = wp.media( {
	multiple: false, // Change to true for multiple file selections.

	/*
	* Here is where the main magic happens.
	*
	* We take the type, e.g. video, image, audio,
	* and we send it to library.type which only
	* shows the files of that type.
	*/
	library: { type : type },
} );

    By passing audio, video, or image to the library attribute, you can tell wp.media which files to show.

    In my example I add the type to the button directly via a data- attribute.

    /**
 * We need to enqueue our scripts.
 *
 * @author Aubrey Portwood
 */
function aubreypwd_wp_forums_metabox_add_media_test_scripts() {
	wp_enqueue_media();
	wp_enqueue_script( 'aubreypwd-wp-forums-metabox-add-media-test-script', plugins_url( 'media.js', __FILE__ ), array( 'jquery' ), '1.0.0' );
}
add_action( 'admin_enqueue_scripts', 'aubreypwd_wp_forums_metabox_add_media_test_scripts' );

/**
 * Display buttons in a metabox.
 *
 * @author  Aubrey Portwood
 */
function aubreypwd_wp_forums_metabox_add_media_test_display() {
	?>
		<p>
			<!--
				As you can see below, I've
				specified the type in a data-attribute.

				This will get passed to wp.media() as the type of file
				you want to show.

				@see media.js
			-->
			<button class="js-add-media-button" data-type="video"><?php _e( 'Select Video', 'wp-forums' ); ?></button>
			<button class="js-add-media-button" data-type="image"><?php _e( 'Select Image', 'wp-forums' ); ?></button>
			<button class="js-add-media-button" data-type="audio"><?php _e( 'Select Audio', 'wp-forums' ); ?></button>
		</p>
	<?
}

/**
 * Add a metabox to place our buttons.
 *
 * @author  Aubrey Portwood
 */
function aubreypwd_wp_forums_metabox_add_media_test() {
	add_meta_box( 'wp-forums-aubreypwd-add-media-test', __( 'Meta Box', 'wp-forums' ), 'aubreypwd_wp_forums_metabox_add_media_test_display', 'post' );
}
add_action( 'add_meta_boxes', 'aubreypwd_wp_forums_metabox_add_media_test' );

    Hope this helps!

Viewing 1 replies (of 1 total)
  • The topic ‘Show only specific media using wp.media’ is closed to new replies.