web-dev-qa-db-fra.com

Personnalisation du popup 3.5 "Add Media" (Backbone.js)

Voici encore une autre question en ce qui concerne le nouveau (ish) 3.5 "Ajouter un média" popup et comment le personnaliser!

Ce que j'essaie de faire

J'essaie de faire quatre choses principales: 1) Créer un onglet personnalisé intitulé "Uploads Flickr"; 2) Personnalisez le texte affiché dans le fichier upload button; 3) Remplissez la liste déroulante select avec des options de tri externes API (en d'autres termes, unset les options par défaut et set ma propre ... uniquement pour l'onglet personnalisé); 4) modifiez les photos qui sont affichées à partir d'une API externe et pouvez toujours ajouter des balises, des descriptions, etc. dans la barre de droite.

Ce que j'ai réussi à faire

Avec l’utilisation de Gist de @Fabien Quatravaux, j’ai terminé les étapes 1) and 2) dans la liste ci-dessus ... mais j’ai du mal à comprendre ce que cela signifie. Voici ce qui est affiché:

Good start but not done!

Où j'ai besoin d'aide pour finir

Comme vous pouvez le constater, il me reste à comprendre comment personnaliser les options de la liste déroulante select, afficher les entrées meta-data dans la barre à droite, ainsi que faire en sorte que les images soient sélectionnées correctement et que le bouton interagisse de la même manière l'onglet "Insérer un média".

J'ai à peine foiré avec jQuery laissé seul Backbone ... donc, inutile de dire que je suis tout à fait perdu dans quoi faire. Je ne sais pas où commencer.

Merci pour toute aide!

plugin-developmentjavascriptmediamedia-modalbackbone
5
Designer 17

J'avais dû adapter Backbone à un de mes projets, je pourrais donc vous aider à démarrer.

Si vous souhaitez adapter le rendu de vos modèles Backbone, vous devez les réécrire car il n’existe aucun filtre intégré pour les modèles existants.

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
}

La prochaine chose à faire: Préparez le modèle demandé et ajoutez-y vos données.

add_action('media_view_strings', 'prepare_data_for_js');

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

Adaptez votre custom_media_menu.js pour rendre le nouveau modèle:

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

Ensuite, la magie de votre API devrait bientôt commencer à fonctionner.

1
iantsch