WordPress Media Uploader Input Field
JavaScript PHP CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
images
js
README.md
wp-media-upload-input.php

README.md

WordPress Media Uploader Input Field

A way to reuse media uploader in WordPress 3.5 or greater which is very very helpful and faster from the old one, OOP with chaining

Usage

  • just place the plugin folder in you plugins directory and activate it
  • the class WP_Media_Uploader_Input will be available to use

Example

$input_settings = array ( 
		// input options
		'input_name' => 'image', // input name for back-end handling
		'input_id_name' => 'id', // item ID input field name
		'input_url_name' => 'url', // item URL input field name
		'multiple' => 'no', // select multiple items or not, "yes" or "no"
		'data_array' => true, // get id & url as an array or not
		'image_placeholder' => WP_MU_URL .'images/placeholder.png', // image placeholder URL
		'image_placeholder_width' => '70', // image width
		'image_placeholder_height' => '70', // image height
		'media_uploader_button_label' => __( 'Media Uploader' ), // Media Uploader button name
		'single_remove_button_label' => __( 'Remove' ), // remove all items button label if multiple
		'multiple_remove_button_label' => __( 'Remove All' ), // remove item label if not multiple
		// Media uploader options
		'frame_title' => __( 'Select an Image' ), // Media Upload frame title 
		'select_button_label' => __( 'Use Image' ), // select button label
		'remove_confirm_message' => __( 'Are you sure ?' ), // confirm message on removing item(s)
		'remove_confirm_yes' => __( 'Yes' ), // "Yes" answer label
		'remove_confirm_no' => __( 'No' ), // "No" answer label
		'file_type' => 'image', // file type of items visible on Media Uploader window open
);
// initial input with settings
$input = new WP_Media_Uploader_Input( $input_settings );

// or set settings later
$input->set_options( $input_settings );

// or set a single option 
$input->set_option( 'option_name', 'option_value' );

// input value
$input->set_value( array ( 
		'id' => 246, 
		'url' => 'http://opensource.org/trademarks/opensource/OSI-logo-300x352.png' 
	) 
);

// "output_input" with true passed will echo the layout and if false passed ( Default ) it will return HTML string
$input->output_input( true ); 

the code is highly customizable through filter hooks and jQuery events

Output Result

Live Preview

  • Download the plugin.
  • and define this constant WP_MU_TEST_MODE in your wp-config.php file.
  • and go to Dashboard > Settings > Media
// wp-config.php

// test input field enabled
define( 'WP_MU_TEST_MODE', true );

/* That's all, stop editing! Happy blogging. */

WP Hooks

Note : remember to user those filters before creating an instance

  • wpmuif_input_value
    • parameters: $value
    • The input default ( initial ) value
  • wpmuif_input_args
    • parameters: $settings
    • The input settings options parsed with default values
  • wpmuif_input_field
    • parameters: $output , $input_instance
    • The input HTML layout to display

Example:

add_filter( 'wpmuif_input_field', function( $output ) {
	return '<div class="media-input-wrapper">'. $output .'</div>';
} );

jQuery Events

Note: remember to listen for those events on the body element

  • wpmuif_media_frame_opened
    • parameters: file_frame , pre_selection
    • Passes the File ( Media ) frame instance and the items to be selected by default
  • wpmuif_selected_items
    • parameters: file_frame , selected
    • Passes the File ( Media ) frame instance and the selected items by the user

Example:

$( 'body' ).on( 'wpmuif_media_frame_opened', function( event, file_frame, pre_selection ) {
	console.log( file_frame, pre_selection );
} );

** Contact if there are any problems **

Hope you find it helpful :)

License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html