WordPress 3.5 Media Manager – add a button

by

In my plugin, I would like to add two buttons to Media Manager (to the left of “Insert Into Post” in “media-toolbar-primary” section), and connect a jQuery action to it.

  1. First one – The “Select All” button shoud allow to select all availabe images (only images), depending on option value selected (eg. All Media Items, Uploaded to This post etc). So if “All Media Items” is selected – all images available will be selected, if “Uploaded to This post” is selected – only images attached to current post will be selected.
  2. Second one – “Custom Insert Into Post” – will get images data for all selected images (full size image source, alt text, size etc that are available) and while allowing to wrap them in aditional html code – return code to tinymce editor.

Returned code for second button could look this way:

<ul>
  <li><img src="https://wordpress.stackexchange.com/questions/94167/full/path/to/001.jpg" alt="alt text 1" /></li>
  <li><img src="full/path/to/002.jpg" alt="alt text 2" /></li>
  <li><img src="full/path/to/003.jpg" alt="alt text 3" /></li>
  <li><img src="full/path/to/004.jpg" alt="alt text 4" /></li>
  <li><img src="full/path/to/005.jpg" alt="alt text 5" /></li>
</ul>

As far as I understand, the only way is to use override appropriate Backbone view, but beside that, thats all I know for now.

Thanks for help.

5 Answers
5

This block of code will add a button right next to the “Insert into post” one. When clicked, it will send selected images to WP editor, each wrapped inside your template HTML:

var wpMediaFramePost = wp.media.view.MediaFrame.Post;
wp.media.view.MediaFrame.Post = wpMediaFramePost.extend(
{
    mainInsertToolbar: function( view )
    {
        "use strict";

        wpMediaFramePost.prototype.mainInsertToolbar.call(this, view);

        var controller = this;

        this.selectionStatusToolbar( view );

        view.set( "customInsertIntoPost", {
            style: "primary",
            priority: 80,
            text: "Insert selected images into post",
            requires: { selection: true },

            click: function()
            {
                var state = controller.state(),
                    selection = state.get("selection")._byId,
                    template = _.template('<li><img src="https://wordpress.stackexchange.com/questions/94167/<%= imagePath %>" alt="<%= altText %>" /></li>'),
                    output = "<ul>";

                _.each(selection, function( item )
                {
                    if( item.attributes.type === "image" )
                    {
                        output += template({
                            imagePath: item.attributes.sizes.full.url,
                            altText: item.attributes.alt
                        });
                    }
                });

                output += "</ul>";

                send_to_editor(output);
            }
        });
    }
});

Adding a custom button is not a problem. But selecting “all images” could be a bit tricky because WP 3.5 media browser loads attachments bit by bit. I’ll look into it, but I recommend selecting attachments manually.

Leave a Comment