Enhance Media Manager pour Galerie

28

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

Jepensequelafonctionwp.media.gallerydanswp-includes/js/media-editor.jsestlafonctionpardéfautpourinsérerleshortcodedelagalerie.

Jesouhaiteajouterunnouveauparamètreetlesvaleursdeceparamètreproviennentduchampdesélectiondugestionnairedemédias.

J'aijouéavecdifférentessources,notammentde cette question. , mais Backbone est très nouveau pour moi et je ne comprends pas comment cela fonctionne. J'ai également joué avec le hook print_media_templates , mais aucun résultat sur la vue Média.

Quels crochets devrais-je utiliser?

    
posée bueltge 09.03.2013 - 16:05

2 réponses

21

Une petite source, peut-être un plugin pour créer la solution. Au début, la partie php inclut le javascript pour le bouton dans Media Manager. La réponse est plus utilisable, mais la réponse de @One Trick Pony était créer et la bonne direction et la solution JS.

Voir le résultat sur l'image:

Leshortcoderésultant,silataillen'estpaslataillepardéfaut:

Le crochet print_media_templates est le bon endroit pour inclure le bouton, le balisage. Nous avons également mis en file d'attente un script, voici 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 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 );
    
réponse donnée bueltge 12.03.2013 - 12:11
19

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

J'utiliserais jQuery pour insérer le modèle HTML plutôt que de remplacer la fonction template() pour la vue des paramètres de la galerie. Mais je suppose que vous le savez déjà, alors je vais poster la version de 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

});
    
réponse donnée onetrickpony 12.03.2013 - 01:35

Lire d'autres questions sur les étiquettes