Améliorer Media Manager pour la galerie

29

Je voudrais améliorer l'éditeur de médias, après WordPress 3.5, dans la vue de la galerie.
Je veux ajouter un nouveau champ de sélection sur le côté droit et envoyer les valeurs sélectionnées au shortcode de la galerie.

entrez la description de l'image ici

Je pense que, la fonction wp.media.galleryen wp-includes/js/media-editor.jsest la fonction par défaut pour insérer la galerie shortcode.

Je veux ajouter un nouveau paramètre et les valeurs du paramètre proviennent du champ de sélection à l'intérieur du Media Manager.

J'ai joué avec différentes sources, en particulier à partir de cette question , mais Backbone est très nouveau pour moi et je ne comprends pas comment cela fonctionne. J'ai également joué avec le crochet print_media_templates, mais aucun résultat sur la vue Media.

Quels crochets dois-je utiliser?

bueltge
la source

Réponses:

21

Une petite source, peut-être pour un plugin pour créer la solution. Au début, la partie php, il y a le javascript pour le bouton à l'intérieur du Media Manager. C'est une réponse plus utilisable, mais la réponse de @One Trick Pony a été de créer et la bonne direction et la solution JS.

Voir le résultat sur l'image: entrez la description de l'image ici

Le shortcode résultant, si la taille n'est pas la taille par défaut: entrez la description de l'image ici

Le crochet print_media_templatesest le bon endroit pour inclure le bouton, le balisage. A également été mis en file d'attente un script, il y a la solution pour ajouter les contrôles.

class Custom_Gallery_Setting {
    /**
     * Stores the class instance.
     *
     * @var Custom_Gallery_Setting
     */
    private static $instance = null;


    /**
     * Returns the instance of this class.
     *
     * It's a singleton class.
     *
     * @return Custom_Gallery_Setting The instance
     */
    public static function get_instance() {

        if ( ! self::$instance )
            self::$instance = new self;

        return self::$instance;
    }

    /**
     * Initialises the plugin.
     */
    public function init_plugin() {

        $this->init_hooks();
    }

    /**
     * Initialises the WP actions.
     *  - admin_print_scripts
     */
    private function init_hooks() {

        add_action( 'wp_enqueue_media', array( $this, 'wp_enqueue_media' ) );
        add_action( 'print_media_templates', array( $this, 'print_media_templates' ) );
    }


    /**
     * Enqueues the script.
     */
    public function wp_enqueue_media() {

        if ( ! isset( get_current_screen()->id ) || get_current_screen()->base != 'post' )
            return;

        wp_enqueue_script(
            'custom-gallery-settings',
            plugins_url( 'js/custom-gallery-setting.js', __FILE__ ),
            array( 'media-views' )
        );

    }

    /**
     * Outputs the view template with the custom setting.
     */
    public function print_media_templates() {

        if ( ! isset( get_current_screen()->id ) || get_current_screen()->base != 'post' )
            return;

        ?>
        <script type="text/html" id="tmpl-custom-gallery-setting">
            <label class="setting">
                <span>Size</span>
                <select class="type" name="size" data-setting="size">
                    <?php

                    $sizes = apply_filters( 'image_size_names_choose', array(
                        'thumbnail' => __( 'Thumbnail' ),
                        'medium'    => __( 'Medium' ),
                        'large'     => __( 'Large' ),
                        'full'      => __( 'Full Size' ),
                    ) );

                    foreach ( $sizes as $value => $name ) { ?>
                        <option value="<?php echo esc_attr( $value ); ?>" <?php selected( $value, 'thumbnail' ); ?>>
                            <?php echo esc_html( $name ); ?>
                        </option>
                    <?php } ?>
                </select>
            </label>
        </script>
        <?php
    }

}

// Put your hands up...
add_action( 'admin_init', array( Custom_Gallery_Setting::get_instance(), 'init_plugin' ), 20 );

La source suivante est le javascript, sur l'exemple de source en php, le fichier custom-gallery-setting.js

/**
 * Custom Gallery Setting
 */
( function( $ ) {
    var media = wp.media;

    // Wrap the render() function to append controls
    media.view.Settings.Gallery = media.view.Settings.Gallery.extend({
        render: function() {
            media.view.Settings.prototype.render.apply( this, arguments );

            // Append the custom template
            this.$el.append( media.template( 'custom-gallery-setting' ) );

            // Save the setting
            media.gallery.defaults.size = 'thumbnail';
            this.update.apply( this, ['size'] );
            return this;
        }
    } );
} )( jQuery );
bueltge
la source
4
Bravo! Il semble que WordPress Development construit une base de connaissances sur la nouvelle médiathèque à un rythme plus rapide que les développeurs principaux;) Et, comment faire, @OneTrickPony révèle encore une autre de ses astuces de sac magique, bravo aux deux!
brasofilo
Fantastique. Question de suivi: existe-t-il un moyen simple de supprimer les attributs par défaut dans le shortcode? Alors [gallery type="thumbnail" ids="1,2"]devient [gallery ids="1,2"]? J'ajoute un attribut personnalisé pour un plugin pour éventuellement transformer la galerie en diaporama. Je voudrais supprimer l'attribut quand il dit simplement d'afficher une galerie WP normale. Ainsi, lors de la désactivation du plugin, il laisse moins de corruption.
kitchin
Je pense que c'est une meilleure façon d'ajouter une nouvelle question à ce sujet. Le shortcode est en dehors du q / a ici.
bueltge
@bueltge, puis-je vous demander de jeter un œil à une question liée au champ personnalisé ici: wordpress.stackexchange.com/questions/265852/… ?
Istiaque Ahmed
19

Si vous voulez vraiment utiliser des modèles Backbone, votre crochet est correct.

J'utiliserais jQuery pour insérer le modèle HTML plutôt que de remplacer la template()fonction pour la vue des paramètres de la galerie. Mais je suppose que vous le savez déjà, alors je publierai la version Backbone:

add_action('print_media_templates', function(){

  // define your backbone template;
  // the "tmpl-" prefix is required,
  // and your input field should have a data-setting attribute
  // matching the shortcode name
  ?>
  <script type="text/html" id="tmpl-my-custom-gallery-setting">
    <label class="setting">
      <span><?php _e('My setting'); ?></span>
      <select data-setting="my_custom_attr">
        <option value="foo"> Foo </option>
        <option value="bar"> Bar </option>        
        <option value="default_val"> Default Value </option>        
      </select>
    </label>
  </script>

  <script>

    jQuery(document).ready(function(){

      // add your shortcode attribute and its default value to the
      // gallery settings list; $.extend should work as well...
      _.extend(wp.media.gallery.defaults, {
        my_custom_attr: 'default_val'
      });

      // merge default gallery settings template with yours
      wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
        template: function(view){
          return wp.media.template('gallery-settings')(view)
               + wp.media.template('my-custom-gallery-setting')(view);
        }
      });

    });

  </script>
  <?php

});
onetrickpony
la source