Wordpress 3.5 Media Manager - ajouter un bouton

Dans mon plugin, je voudrais ajouter deux boutons à Media Manager (à gauche de "Insérer dans le message" dans la section "media-toolbar-primary"), et y connecter une action jQuery.

1. Première - Le bouton "Sélectionner tout" devrait permettre de sélectionner toutes les images disponibles (uniquement les images), en fonction de la valeur de l'option sélectionnée (par exemple, tous les éléments multimédias, téléchargés sur ce message, etc.). Donc, si "Tous les éléments multimédias" est sélectionné - toutes les images disponibles seront sélectionnées, si "Téléversé vers ce message" est sélectionné - seules les images jointes au message actuel seront sélectionnées.
2. Le second - "Insertion personnalisée dans le message" - obtiendra les données d'images pour toutes les images sélectionnées (source d'image pleine taille, texte alternatif, taille, etc. qui sont disponibles) et tout en permettant de les envelopper dans du code html supplémentaire - retournez le code dans l'éditeur tinymce.

Le code renvoyé pour le deuxième bouton pourrait ressembler à ceci:

<ul>
  <li><img src="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>

Pour autant que je sache, la seule façon consiste à remplacer la vue Backbone appropriée, mais à côté de cela, c'est tout ce que je sais pour l'instant.

Merci pour l'aide.

Ce bloc de code ajoutera un bouton juste à côté de celui "Insérer dans le message". Lorsque vous cliquez dessus, il enverra les images sélectionnées à l'éditeur WP, chacune enveloppée dans votre modèle 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="<%= 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);
            }
        });
    }
});

L'ajout d'un bouton personnalisé n'est pas un problème. Mais sélectionner "toutes les images" pourrait être un peu délicat car le navigateur multimédia WP 3.5 charge les pièces jointes petit à petit. Je vais l'examiner, mais je recommande de sélectionner les pièces jointes manuellement.

Écrivez un petit plugin, utilisez l'exemple de source suivant pour ajouter un élément dans la liste de la barre latérale gauche dans le gestionnaire de médias à l'intérieur de la fenêtre contextuelle de superposition.

Résultat de la source ci-dessous:

add_action( 'admin_footer-post-new.php', 'wpse_78881_script' );
add_action( 'admin_footer-post.php', 'wpse_78881_script' );
function wpse_78881_script() {
    ?>
    <script type="text/javascript">
        jQuery(window).on('load', function() {
            var media   = window.wp.media,  
            Attachment  = media.model.Attachment,
            Attachments = media.model.Attachments,
            Query       = media.model.Query,
            l10n        = media.view.l10n = typeof _wpMediaViewsL10n === 'undefined' ? {} : _wpMediaViewsL10n,
            My_new_item = undefined,
            Item_string = 'New Item!';

            jQuery(document).on( 'click', '.insert-media', function( event ) {
                var workflow = wp.media.editor.get();
                var options  = workflow.options;

                if ( undefined == My_new_item ) {
                    // see for wp.media.view.RouterItem also: wp-includes/js/media-views.js
                    My_new_item = new wp.media.view.RouterItem( _.extend( options, { text: Item_string } ) );
                    workflow.menu.view.views.set( '.media-menu', My_new_item, _.extend( options, { add: true } ) );
                }

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

• Init solution de cette réponse WPSE .

• Lien vers un exemple de plug-in pour ajouter un menu javascript dans la fenêtre contextuelle WP3.5 Media Library

Je n'ai pas de réponse complète à votre question, mais voici un bon début. Pour personnaliser le nouveau Media Manager, vous devez étudier le code Backbone javascript dans wp-includes/js/media-views.js. Par exemple, voici un petit plugin qui ajoute un bouton "Sélectionner tout" à la barre d'outils "Insérer depuis URL":

custom.php:

add_action('admin_enqueue_scripts', 'custom_add_script');
function custom_add_script(){
    wp_enqueue_script('custom', plugins_url('custom.js', __FILE__), array('media-views'), false, true);
}

custom.js:

var originalToolbar = wp.media.view.Toolbar.Embed;
wp.media.view.Toolbar.Embed = originalToolbar.extend({
    // code modified from media-views.js, l 2500
    initialize: function() {

        this.options.items = _.defaults( this.options.items || {}, {
            // keep the original button
            select: {
                style:    'primary',
                text:     wp.media.view.l10n.insertIntoPost,
                priority: 80,
                click:    this.clickSelect,
                requires: false
            },
            // and add a new one
            selectAll: {
                text: 'Select All',
                style: 'primary',
                priority: 80,
                requires: false,
                click: this.selectAll
            }
        });

        wp.media.view.Toolbar.Select.prototype.initialize.apply( this, arguments );
    },

    selectAll: function(){
        console.log('select All');
    }
});

Pour le bouton "Insertion personnalisée dans la publication", je suggère d'utiliser à la place le shortcode de la galerie. L'interface utilisateur existe déjà pour sélectionner les images souhaitées et insérer le shortcode au bon endroit dans tinymce. Tout ce que vous avez à faire est d'écrire votre propre format de shortcode de galerie.

Jetez un œil à la gallery_shortcodefonction wp-includes/media.phpet utilisez le post_galleryfiltre.

Thomas Griffin a créé un exemple de plugin, New Media Image Uploader , sur la façon de travailler avec le nouveau gestionnaire de médias.

Ce plugin fournit un exemple solide pour intégrer le nouveau flux de travail du gestionnaire multimédia dans vos plugins / thèmes en vous montrant comment télécharger / insérer un fichier image dans un champ de texte.

Je viens de rencontrer un cas dans WP 3.6 où la réponse (très utile) de aesqe entraîne l'insertion d'images deux fois en raison de l'épine dorsale state.get("selection")._byIdincluant les deux idet cidpour chaque image sélectionnée.

Changer state.get("selection")._byIdpour state.get("selection").modelsrésoudre ce problème pour moi tout en préservant les attributs de chaque objet.

Espérons que cela épargnera à quelqu'un une certaine frustration. J'aurais posté cela comme un commentaire au lieu d'une réponse mais, hélas, je n'ai aucune réputation.