“Add Media” button in custom plugin

2 comments

1. If you want to add a add media button to your admin panels:

   You need to use wp_enqueue_media();

   add_action ( 'admin_enqueue_scripts', function () {
       if (is_admin ())
           wp_enqueue_media ();
   } );
   

   Then use this js:

   jQuery(document).ready(function() {
       var $ = jQuery;
       if ($('.set_custom_images').length > 0) {
           if ( typeof wp !== 'undefined' && wp.media && wp.media.editor) {
               $('.set_custom_images').on('click', function(e) {
                   e.preventDefault();
                   var button = $(this);
                   var id = button.prev();
                   wp.media.editor.send.attachment = function(props, attachment) {
                       id.val(attachment.id);
                   };
                   wp.media.editor.open(button);
                   return false;
               });
           }
       }
   });
   

   Use this html:

   <p>
       <input type="number" value="" class="regular-text process_custom_images" id="process_custom_images" name="" max="" min="1" step="1">
       <button class="set_custom_images button">Set Image ID</button>
   </p>
   

2. Show thumbnail preview instead of number

   Just as a tweak, I did this…

   changed the number input to hidden.

   added:

   $imgid =(isset( $instance[ 'imgid' ] )) ? $instance[ 'imgid' ] : "";
   $img    = wp_get_attachment_image_src($imgid, 'thumbnail');
   

   And then… above the hidden field.

   if($img != "") {
   ?>
     <img src="<?= $img[0]; ?>" width="80px" /><br />
   <?php 
   }
   

   That will make a thumbnail visible in the user end instead of a number 🙂

Comments are closed.