Add option to “Gallery Settings” section

I want to add a option to the “Gallery settings” (when you insert a gallery into a post).

I once found some code on how to do this, but unfortunately I can’t find it anymore.
I can’t even remenber if it was a hook, but I think it was some hackish stuff 😉

Thx

2 Answers
2

Thanks to the hint with the multiple galleries plugin from Niall Campbell and thanks to this question How to Add a Custom Colum on Thickbox Media Gallery Tab? (where I got the hook admin_head-media-upload-popup from), I was able to complete the task.

I’ve added an option to add a style attribute to the gallery shortcode.

option to select the style of the gallery

Here is the complete code:

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

function wpse_53803_script_enqueuer() 
{
    if( $_GET['tab'] == 'gallery' ) 
    {
        ?>
        <script type="text/javascript">
        jQuery(document).ready( function($) {

            // append the table row
            $('#gallery-settings table#basic tbody').append('<tr><th scope="row" class="label"><label><span class="alignleft">Style:</span></label></th><td class="field"><select id="style" name="style"><option value="standard">Standard</option><option value="slideshow">Slideshow</option></select></td></tr>');

            // set our vars
            var $style="", $is_update = false;

            // Select parent editor, read existing gallery data 
            w = wpgallery.getWin();
            editor = w.tinymce.EditorManager.activeEditor;

            if (editor !== null) {
                gal = editor.selection.getNode();

                if (editor.dom.hasClass(gal, 'wpGallery')) {
                    $style = editor.dom.getAttrib(gal, 'title').match(/style=['"]([^'"]+)['"]/i);
                    var $is_update = true;
                    if ($style != null) {
                        $style = $style[1];
                        $('table#basic #style').find('option[value="' + $style + '"]').attr('selected','selected');
                    }
                } else {
                    $('#insert-gallery').show();
                    $('#update-gallery').hide();
                }
            }

            // remove standard onmousedown action
            $('#insert-gallery').attr('onmousedown', '');

            // Insert or update the actual shortcode
            $('#update-gallery, #insert-gallery, #save-all').mousedown(function() {
                var $styleAdd = '';
                if (editor !== null)
                    var orig_gallery = editor.dom.decode(editor.dom.getAttrib(gal, 'title'));
                else
                    var orig_gallery = '';

                // Check which which style is selected
                if($('table#basic #style').val() != 'standard') {
                    $styleAdd = ' style="slideshow"';
                }

                if ($(this).attr('id') == 'insert-gallery') {
                    w.send_to_editor('[gallery' + wpgallery.getSettings() + $styleAdd + ']');
                }

                // Update existing shortcode
                if ($is_update) {
                    if ($styleAdd != '' && orig_gallery.indexOf(' style=") == -1)
                        editor.dom.setAttrib(gal, "title', orig_gallery + $styleAdd);
                    else if (orig_gallery.indexOf(' style=") != -1)
                        editor.dom.setAttrib(gal, "title', orig_gallery.replace(' style="slideshow"', $styleAdd));
                    else
                        editor.dom.setAttrib(gal, 'title', orig_gallery.replace(' style="slideshow"', ''));
                }
            });

        });
        </script>
        <?php
    }
}

It adds style="slideshow" if the slideshow style is selected, otherwise it doesn’t add anything. And it recognizes the set style if you update the gallery, so that the right option is selected.

Thank you!

Leave a Comment