Code Monkey home page Code Monkey logo

wp-media-upload-input's Introduction

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.