web-dev-qa-db-fra.com

Wordpress 3.5 Media Manager - ajouter un bouton

Dans mon plug-in, je voudrais ajouter deux boutons au Gestionnaire de médias (à gauche de "Insérer dans le message" dans la section "media-toolbar-primary"), et lui connecter une action jQuery.

  1. Première - Le bouton "Tout sélectionner" devrait permettre de sélectionner toutes les images disponibles (uniquement les images), en fonction de la valeur d'option sélectionnée (par exemple, Tous les éléments multimédias, Téléchargés dans ce message, etc.). Donc, si "Tous les éléments multimédias" est sélectionné - toutes les images disponibles seront sélectionnés, si "Téléchargé sur cet article" est sélectionné - seules les images jointes au message actuel seront sélectionnées.
  2. La deuxième - "Insertion personnalisée dans le message" - obtiendra les données d’image pour toutes les images sélectionnées (source de l’image pleine taille, texte alternatif, taille, etc. disponibles) et permettra de les envelopper dans du code html supplémentaire - renvoie le code à l’éditeur tinymce.

Le code retourné 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>

Autant que je sache, le seul moyen est d’utiliser la vue Backbone appropriée, mais à côté de cela, c’est tout ce que je sais pour le moment.

Merci pour l'aide.

pluginsjquerymediamedia-librarymedia-modal
8
Marcin Bobowski

Ce bloc de code ajoutera un bouton juste à côté de celui "Insérer dans le post". Lorsque vous cliquez dessus, les images sélectionnées seront envoyées vers 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" peut s'avérer un peu délicat, car le navigateur de média WP 3.5 charge les pièces jointes petit à petit. Je vais y regarder, mais je vous recommande de sélectionner les pièces jointes manuellement.

11
aesqe

Écrivez un petit plugin, utilisez l’exemple de source ci-dessous pour ajouter un élément à la liste de la barre latérale gauche du gestionnaire de médias dans la fenêtre contextuelle de superposition.

Résultat de la source ci-dessous: enter image description here

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
}
6
bueltge

Thomas Griffin a créé un exemple de plug-in, New Media Image Uploader , sur la manière de travailler avec le nouveau gestionnaire de médias.

Ce plugin fournit un bon exemple d'intégration du flux de travail du nouveau gestionnaire de média dans vos plugins/thèmes en vous montrant comment charger/insérer un fichier image dans un champ de texte.

3
Elliott

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 javascript Backbone 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 à partir d'une 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 post", je suggère d'utiliser plutôt le shortcode de la galerie. L’UI 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 shortcode de galerie.

Examinez la fonction gallery_shortcode dans wp-includes/media.php et utilisez le filtre post_gallery.

3
Fabien Quatravaux

Je viens de rencontrer un cas dans WP 3.6 où la réponse de aesqe (très utile) a pour résultat l'insertion d'images à deux reprises en raison de la fonction state.get("selection")._byId de l'épine dorsale, comprenant à la fois id et cid pour chaque image sélectionnée.

Remplacer state.get("selection")._byId par state.get("selection").models a résolu ce problème, tout en préservant les attributs de chaque objet.

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

2
Dameian