<?php
// media library hook
add_action( 'admin_enqueue_scripts', 'media_uploader' );
function media_uploader() {
//for media uploader
wp_enqueue_media();
}
if (isset($_POST['save_pnr_img'])) {
if ($_POST['pnr_img_url'] != '') {
update_option( 'pnr_custom_image',$_POST['pnr_img_url'] );
}
}
?>
html
<div class="meta-box-sortables ui-sortable" id="pnr-custom-img-upload">
<div id="dashboard_quick_press" class="postbox " style="">
<div class="postbox-header">
<h2 class="hndle ui-sortable-handle"><span class="hide-if-no-js"> Custom
Image</span>
</h2>
</div>
<div class="inside">
<form name="post" action="" method="post" class="initial-form hide-if-no-js">
<div class="column">
<input id="upload_img-btn" type="button" name="upload-btn"
class="button-secondary" value="Upload Image">
<br /> <br />
<input id="delete_img-btn" type="button" name="delete-btn"
class="button-secondary" value="Remove Image"
style="display: none;">
</div>
<div class="column">
<div id="logo_container">
</div>
<div id="pnr-custom-img-url">
</div>
</div>
<div class="submit pnr-submit">
<input type="submit" name="save_pnr_img" class="button button-primary"
value="Update Setting"> <br class="clear">
</div>
</form>
</div>
</div>
</div>
//javascript for custom img upload
jQuery(document).ready(function ($) {
$("#delete_img-btn").on("click", function (e) {
e.preventDefault();
$('#logo_container').html("");
$("#delete_img-btn").hide();
});
$('#upload_img-btn').on("click", function (e) {
e.preventDefault();
var $el = jQuery(this);
var optionImageFrame = wp.media({
title: $el.data('choose'),
button: {
text: $el.data('update')
},
states: [
new wp.media.controller.Library({
title: $el.data('choose'),
filterable: 'all',
// mutiple: true if you want to upload multiple files at once
multiple: false
})
]
});
optionImageFrame.on('select', function (e) {
// This will return the selected image from the Media Uploader, the result is an object
var uploaded_image = optionImageFrame.state().get('selection').first();
// We convert uploaded_image to a JSON object to make accessing it easier
// Output to the console uploaded_image
var attachment = uploaded_image.toJSON();
var image_url = attachment.url;
var image_id = attachment.id;
$('#option_image_id').val(image_id);
$('#pnr-custom-saved-image').hide();
$('#logo_container').append('<img class="logo" src="' + image_url + '" height="100px" width="100px" />');
$('#pnr-custom-img-url').append('<input type="hidden" name="pnr_img_url" value="' + image_url + '" />');
$("#delete_img-btn").show();
});
optionImageFrame.open();
});
});
0 Comments