Last updated
<?php
// Start Edit
// if you need a settings page where you want to put the upload images button
add_action( 'admin_menu', 'register_media_selector_settings_page' );
function register_media_selector_settings_page() {
add_submenu_page( 'options-general.php', 'Media Selector', 'Media Selector', 'manage_options', 'media-selector', 'media_selector_settings_page_callback' );
}
// this is the callback for the uploader button. You can use anywhere
function media_selector_settings_page_callback() {
// just for simplicity saving the data right here, but in practice you wouldn't want that.
if ( isset( $_POST ) && isset( $_POST['media_ids'] ) ) :
update_option( 'media_ids', $_POST['media_ids'] );
endif;
$media_ids_raw = get_option( 'media_ids');
$media_ids = explode(',', $media_ids_raw);
wp_enqueue_media();
?>
<form method='post'>
<div class="form-group">
<input id="upload_image_button" type="button" class="button" value="<?php _e( 'Upload image' ); ?>" />
<input type='hidden' name='media_ids' id='image_attachment_id' value='<?php echo $media_ids_raw; ?>'>
<div class='image-preview-wrapper'>
<div id="image-preview">
<?php if( count($media_ids) > 0 ):?>
<ul>
<?php foreach($media_ids as $i):?>
<li><img src="<?php echo wp_get_attachment_thumb_url($i);?>"></li>
<?php endforeach;?>
</ul>
<?php endif;?>
</div>
</div>
</div>
<div class="form-group">
<input type="submit" name="submit_image_selector" value="Save" class="button-primary">
</div>
</form>
<?php
}
// make sure you injected this js in the footer of the page
add_action( 'admin_footer', 'media_selector_print_scripts' );
function media_selector_print_scripts() {
?>
<script type='text/javascript'>
jQuery( document ).ready( function( $ ) {
// Uploading files
var file_frame;
var wp_media_post_id = wp.media.model.settings.post.id; // Store the old id
// If you want the uploaded images are to attach with any post then give the post ID here
var set_to_post_id = '1';
var selectedIDS = $("#image_attachment_id").val().split(',');
jQuery('#upload_image_button').on('click', function( event ){
event.preventDefault();
// If the media frame already exists, reopen it.
if ( file_frame ) {
// Set the post ID to what we want
file_frame.uploader.uploader.param( 'post_id', set_to_post_id );
// Open frame
file_frame.open();
return;
} else {
// Set the wp.media post id so the uploader grabs the ID we want when initialised
wp.media.model.settings.post.id = set_to_post_id;
}
// Create the media frame.
file_frame = wp.media.frames.file_frame = wp.media({
title: 'Select images to upload',
button: {
text: 'Use these images',
},
multiple: true // Set to true to allow multiple files to be selected
});
file_frame.on('open', function(){
var selection = file_frame.state().get('selection');
var selected = $("#image_attachment_id").val().split(',') // the id of the image
if (selected && selected.length > 0) {
selected.map( function( s ) {
selection.add(wp.media.attachment(s));
});
}
});
// When an image is selected, run a callback.
file_frame.on( 'select', function() {
// We set multiple to false so only get one image from the uploader
var selection = file_frame.state().get('selection');
var $html = '<ul class="thumb">';
var IDs = [];
selection.map( function( attachment ) {
var attachment = attachment.toJSON();
console.log(attachment);
$html += "<li><img src='" + attachment.sizes.thumbnail.url + "'></li>";
if( IDs.indexOf(attachment.id) === -1 ){
IDs.push(attachment.id);
}
});
$html += "</ul>";
IDs = IDs.join(',');
$( '#image-preview' ).html($html);
$( '#image_attachment_id' ).val( IDs );
// Restore the main post ID
wp.media.model.settings.post.id = wp_media_post_id;
});
// Finally, open the modal
file_frame.open();
});
// Restore the main ID when the add media button in thge post editor page is pressed
jQuery( 'a.add_media' ).on( 'click', function() {
wp.media.model.settings.post.id = wp_media_post_id;
});
});
</script><?php
}
// console.log(attachment);
{
"uploading": false,
"date": 1645502547000,
"filename": "HHHHHJKKKKKKKKKKKKKKK.png",
"menuOrder": 0,
"uploadedTo": 1,
"type": "image",
"subtype": "png",
"id": 11,
"title": "HHHHHJKKKKKKKKKKKKKKK",
"url": "http://localhost/wordpress4/wp-content/uploads/2022/02/HHHHHJKKKKKKKKKKKKKKK.png",
"link": "http://localhost/wordpress4/hello-world/hhhhhjkkkkkkkkkkkkkkk/",
"alt": "",
"author": "1",
"description": "",
"caption": "",
"name": "hhhhhjkkkkkkkkkkkkkkk",
"status": "inherit",
"modified": 1645502547000,
"mime": "image/png",
"icon": "http://localhost/wordpress4/wp-includes/images/media/default.png",
"dateFormatted": "February 22, 2022",
"nonces":
{
"update": "3ad96e64fc",
"delete": "bf83fa7870",
"edit": "8b00f2332f"
},
"editLink": "http://localhost/wordpress4/wp-admin/post.php?post=11&action=edit",
"meta": false,
"authorName": "wordpress3",
"authorLink": "http://localhost/wordpress4/wp-admin/profile.php",
"uploadedToTitle": "Hello world!",
"uploadedToLink": "http://localhost/wordpress4/wp-admin/post.php?post=1&action=edit",
"filesizeInBytes": 10644,
"filesizeHumanReadable": "10 KB",
"context": "",
"height": 480,
"width": 785,
"orientation": "landscape",
"sizes":
{
"thumbnail":
{
"height": 150,
"width": 150,
"url": "http://localhost/wordpress4/wp-content/uploads/2022/02/HHHHHJKKKKKKKKKKKKKKK-150x150.png",
"orientation": "landscape"
},
"medium":
{
"height": 183,
"width": 300,
"url": "http://localhost/wordpress4/wp-content/uploads/2022/02/HHHHHJKKKKKKKKKKKKKKK-300x183.png",
"orientation": "landscape"
},
"full":
{
"url": "http://localhost/wordpress4/wp-content/uploads/2022/02/HHHHHJKKKKKKKKKKKKKKK.png",
"height": 480,
"width": 785,
"orientation": "landscape"
}
},
"compat":
{
"item": "",
"meta": ""
}
}