it-swarm.com.de

Wordpress 3.5 Media Manager - fügen Sie eine Schaltfläche hinzu

In meinem Plugin möchte ich dem Media Manager zwei Schaltflächen hinzufügen (links von "In Post einfügen" im Abschnitt "media-toolbar-primary") und eine jQuery-Aktion damit verbinden.

  1. Erste - Mit der Schaltfläche "Alle auswählen" können Sie alle verfügbaren Bilder (nur Bilder) auswählen, abhängig vom ausgewählten Optionswert (z. B. Alle Medienelemente, In diesen Beitrag hochgeladen usw.). Wenn "Alle Medienelemente" ausgewählt ist, werden alle verfügbaren Bilder ausgewählt. Wenn "In diesen Beitrag hochgeladen" ausgewählt ist, werden nur Bilder ausgewählt, die an den aktuellen Beitrag angehängt sind.
  2. Die zweite Option - "Benutzerdefiniertes Einfügen in den Post" - ruft Bilddaten für alle ausgewählten Bilder ab (Bildquelle in voller Größe, Alternativtext, Größe usw., die verfügbar sind) und ermöglicht es, sie in zusätzlichen HTML-Code zu verpacken.

Der zurückgegebene Code für die zweite Schaltfläche könnte folgendermaßen aussehen:

<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>

Soweit ich weiß, besteht die einzige Möglichkeit darin, die entsprechende Backbone-Ansicht außer Kraft zu setzen, aber das ist alles, was ich jetzt weiß.

Danke für die Hilfe.

8
Marcin Bobowski

Dieser Codeblock fügt eine Schaltfläche direkt neben der Schaltfläche "In Beitrag einfügen" hinzu. Wenn Sie darauf klicken, werden ausgewählte Bilder an den WP -Editor gesendet, die jeweils in Ihrem Vorlagen-HTML-Code enthalten sind:

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);
            }
        });
    }
});

Das Hinzufügen einer benutzerdefinierten Schaltfläche ist kein Problem. Die Auswahl von "Alle Bilder" kann jedoch schwierig sein, da der Medienbrowser WP 3.5 Anhänge nach und nach lädt. Ich werde es untersuchen, empfehle jedoch, Anhänge manuell auszuwählen.

11
aesqe

Schreiben Sie ein kleines Plug-in. Verwenden Sie die folgende Beispielquelle, um ein Element in die Liste der linken Seitenleiste im Medienmanager im Überlagerungs-Popup einzufügen.

Ergebnis der Quelle unten: 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 hat ein Plugin-Beispiel erstellt, New Media Image Uploader , wie man mit dem neuen Medienmanager arbeitet.

Dieses Plugin bietet ein solides Beispiel für die Integration des neuen Media Manager-Workflows in Ihre Plugins/Themes. Es zeigt Ihnen, wie Sie eine Bilddatei in ein Textfeld hochladen/einfügen.

3
Elliott

Ich habe keine vollständige Antwort auf Ihre Frage, aber hier ist ein guter Anfang. Um den neuen Media Manager anzupassen, sollten Sie den Javascript-Backbone-Code in wp-includes/js/media-views.js studieren. Zum Beispiel ist hier ein kleines Plugin, das der Symbolleiste "Aus URL einfügen" die Schaltfläche "Alle auswählen" hinzufügt:

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');
    }
});

Für die Schaltfläche "Benutzerdefiniertes Einfügen in Post" empfehle ich stattdessen den Galerie-Shortcode. Die Benutzeroberfläche ist bereits vorhanden, um die gewünschten Bilder auszuwählen und den Shortcode an der richtigen Stelle in Tinymce einzufügen. Sie müssen lediglich Ihr eigenes Galerie-Shortcode-Format schreiben.

Sehen Sie sich die Funktion gallery_shortcode in wp-includes/media.php an und verwenden Sie den Filter post_gallery.

3

Ich bin gerade auf einen Fall in WP 3.6 gestoßen, in dem die (sehr nützliche) Antwort von aesqe dazu führt, dass Bilder aufgrund der state.get("selection")._byId des Backbones zweimal eingefügt werden, einschließlich id und cid für jedes ausgewählte Bild.

Das Ändern von state.get("selection")._byId in state.get("selection").models hat dies für mich behoben, während die Attribute jedes Objekts beibehalten wurden.

Hoffentlich erspart dies jemandem etwas Frust. Ich hätte dies als Kommentar anstatt als Antwort gepostet, aber leider habe ich keinen Ruf.

2
Dameian