wake-up-neo.net

Anpassen des 3.5-Popups "Add Media" (Backbone.js)

Hier ist noch eine weitere Frage zum neuen (ish) 3.5 "Add Media" -Popup und wie man es anpasst!

Was ich versuche zu tun

Ich versuche, vier Hauptaufgaben zu erledigen: 1) Erstellen Sie einen benutzerdefinierten Tab mit dem Titel "Flickr Uploads"; 2) Passen Sie den Text an, der im Upload buttonangezeigt wird. 3) Füllen Sie die Dropdown-Liste selectmit externen Sortieroptionen für API(mit anderen Worten unsetdie Standardoptionen und setmeine eigenen ... nur für die benutzerdefinierte Registerkarte). 4) Ändern Sie die Fotos, die angezeigt werden, in Fotos, die von einem externen APIstammen, und können Sie dennoch Tags, Beschreibungen usw. in der rechten Leiste hinzufügen.

Was ich geschafft habe

Mit dem Gist von @Fabien Quatravaux habe ich die Schritte 1) and 2) in der obigen Liste ausgeführt ... aber ich habe einige Probleme, dieses Zeug herauszufinden. Folgendes wird angezeigt:

Good start but not done!

Wo ich Hilfe brauche, um fertig zu werden

Wie Sie sehen, muss ich noch herausfinden, wie die Dropdown-Optionen für selectangepasst werden, die meta-data-Eingaben in der rechten Leiste angezeigt werden und die Bilder den richtigen Weg wählen, damit die Schaltfläche genauso wie bei interagieren kann die Registerkarte "Insert Media".

Ich habe kaum mit jQueryzu tun gehabt, geschweige denn Backbone... also muss ich nicht erwähnen, dass ich ziemlich verloren bin, was zu tun ist. Ich weiß nicht, wo ich anfangen soll.

Vielen Dank für jede Hilfe!

5
Designer 17

Ich musste Backbone für ein Projekt von mir anpassen, damit ich Ihnen beim Start behilflich sein kann.

Wenn Sie das Rendering Ihrer Backbone-Vorlagen anpassen möchten, müssen Sie sie neu schreiben, da für vorhandene Vorlagen keine integrierten Filter vorhanden sind.

add_action('print_media_templates', 'print_my_media_templates');

function print_my_media_templates() {
    ?>
    <script type="text/html" id="my-custom-template">
        //TODO: Copy existing blade template and adapt to your needs
        //TODO: You can access all custom vars here and seed
    </script>
    <?php
}

Das nächste, was zu tun ist: Bereiten Sie die angeforderte Vorlage vor und ordnen Sie sie Ihren Daten zu.

add_action('media_view_strings', 'prepare_data_for_js');

function prepare_data_for_js( $response ) {
    //TODO: Conditional seeding of $response['some_var']
}

Passen Sie Ihren custom_media_menu.js an, um die neue Vorlage zu rendern:

wp.media.view.Custom = wp.media.view.Custom.extend({
    template: function(view) {
        return wp.media.template('my-custom-template')(view);
    }
});

Dann sollte Ihre API-Magie bald funktionieren.

1
iantsch