How to Add a Custom Colum on Thickbox Media Gallery Tab?

While researching I found what may be a duplicate, but I’m really not sure, as this one deals with sending the value somewhere else…

There, I learned that there’s a plugin for what I was already coding (
Multiple Galleries) and it injects the include attribute when inserting the gallery.

Nonetheless, a worthy exercise and a joint venture with a StackOverflow’er.


Application

Appears in the Gallery and Library tabs.
The idea is to copy/paste the value of the selected images and use it manually.
Usage can be in a Custom Field, from where it is read in some template page.


Result of the Code

enter image description here


The Code

add_action( 'admin_head-media-upload-popup', 'wpse_53803_script_enqueuer' );

function wpse_53803_script_enqueuer() 
{
    if( $_GET['tab'] == 'gallery' || $_GET['tab'] == 'library' ) 
    {
        ?>
           <style>#media-upload th.order-head {width: 5%} #media-upload th.actions-head {width: 10%}</style>
           <script type="text/javascript">
        jQuery(document).ready( function($) {
            
             /*
              * Add Input Text Field
              */
             $('<span>Copy this to use in the Gallery shortcode as the "include=image-ids" (<a href="http://codex.wordpress.org/Gallery_Shortcode" target="_blank">documentation</a>): </span><input type="text" id="shortcode" style="width:99%;clear:both" /><span></span><hr style="width:99%;opacity:.5" />').prependTo('p.ml-submit:first');

            /*
             * OnClick Populate/Depopulate Text Field
             */
            $(document).on('change','input[type="checkbox"][name^="gal-item"]',function(){
                var checkedIds = $('input[type="checkbox"][name^="gal-item"]:checked').map(function(){
                    return parseInt($(this).prop('name').replace(/gal-item-/,''));
                }).get();

                $('#shortcode').val(checkedIds.join(','));
            });

            /* 
             * Iterate through the Media Items and Add a CheckBox
             */
            $('.filename.new').each(function(i,e){
               var id = $(this).next('.slidetoggle')
                                .find('thead')
                                .attr('id')
                                .replace(/media-head-/, '');
               var filename = $('<label>Add to gal-list <input type="checkbox" name="gal-item-'+id+'" id="gal-item-'+id+'" value=""  /></label>')
                             .insertBefore($(this));
               filename.css('float','right').css('margin','12px 40px 0 0');
             });                 
          });
           </script>
        <?php
    }
}

Leave a Comment