Вызов media библиотеки в плагине

Рубрика: wordpress, Дата: 24 June, 2017, Автор:
Tags:

Вызов media библиотеки в плагине, нужно добавить изображение или файл в плагине, для этого вызываем библиотеку и в нее загружаем нужный нам файл.

Вызов media библиотеки в плагине скрин

Вызов media библиотеки в плагине

 

При клике на кнопку должна появится загрузочное окно в котором выбираем файл и загружаем на сервер, или выбираем имеющиеся файлы.

Подключение

Чтобы сделать Вызов media библиотеки в плагине сначала в админке делается подключение нужных скриптов. Прописываем следующее

// upload images

// Your custom js file

wp_enqueue_script( 'media-lib-uploader-js', plugins_url( '../js/media-lib-uploader.js' , __FILE__ ), array('jquery') );

// wp_enqueue_script( 'media-lib-uploader-js' );

wp_enqueue_media();

И в самом javascript файле media-lib-uploader.js следующий код

jQuery(function($){



// Set all variables to be used in scope
 var frame,
 metaBox = $('#meta-box-id.postbox'), // Your meta box id here
 addImgLink = metaBox.find('.upload-custom-img'),
 delImgLink = metaBox.find( '.delete-custom-img'),
 imgContainer = metaBox.find( '.custom-img-container'),
 imgIdInput = metaBox.find( '.custom-img-id' );

// ADD IMAGE LINK
 jQuery('#addImgLink').on( 'click', function( event ){

event.preventDefault();

// If the media frame already exists, reopen it.
 if ( frame ) {
 frame.open();
 return;
 }

// Create a new media frame
 frame = wp.media({
 title: 'Select or Upload Media Of Your Chosen Persuasion',
 button: {
 text: 'Use this media'
 },
 multiple: false // Set to true to allow multiple files to be selected
 });


 // When an image is selected in the media frame...
 frame.on( 'select', function() {

// Get media attachment details from the frame state
 var attachment = frame.state().get('selection').first().toJSON();

jQuery('#image-url').val(attachment.url);
 jQuery('#choosen_img').attr('src', attachment.url);

});



// Finally, open the modal on click
 frame.open();
 });



});

 

И само поле html

<div class="form-group">

<label class="col-sm-3 text-right" for="img_logo">Картинка логотип:</label>

<div class="col-sm-7">

<input class="form-control" id="image-url" type="text" value="<?php echo $_POST['img_logo']; ?>" name="img_logo" />

<input class="btn" id="addImgLink" type="button" class="addImgLink" value="Добавить изображение" />

<img id="choosen_img" src="<?php echo $_POST['img_logo']; ?>" alt="" style="width:100%;"/>

</div>

<div class="col-sm-2"></div>

</div>

Комментарии:


Оставить комментарий

Your email address will not be published. Required fields are marked *