Wordpress 3.5 Media Manager - ajouter un bouton

8

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.

Marcin Bobowski
la source

Réponses:

11

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.

aesqe
la source
6

É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: entrez la description de l'image ici

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
}
bueltge
la source
C'est autant que je peux voir un moyen d'ajouter une position de menu supplémentaire dans la barre latérale gauche. C'est donc peut-être un panneau routier, mais pour une solution de travail avec deux boutons décrits en question ... Il n'est même pas encore proche :(
Marcin Bobowski
Oui, c'est toujours un débutant pour trouver la bonne solution. Désolé; Mais je n'ai plus de temps et le JS n'est pas ma langue préférée. J'ajoute un lien pour répondre avec un gist, il peut vous aider davantage.
bueltge
3

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.

Fabien Quatravaux
la source
Merci Fabien. Mauvais travail sur le code que vous avez fourni, en essayant de le mélanger avec la réponse d'Aesque. Malheureusement, il ne peut y avoir qu'un seul gagnant et il / elle a été le premier. Merci pour l'aide.
Marcin Bobowski
3

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.

Elliott
la source
C'est assez intéressant, mais il s'agit avant tout d'ajouter une métabox avec entrée et bouton pour charger media_manager. Et mon problème concerne l'ajout d'éléments au media_manager lui-même. Mais quand même, chose assez utile.
Marcin Bobowski
2

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.

Dameian
la source
C'est beaucoup mieux comme réponse :)
Michal Mau