Mejorar el Administrador de medios para la Galería

28

Me gustaría mejorar el Editor de medios, después de WordPress 3.5, en la vista de galería.
Quiero agregar un nuevo campo de selección en el lado derecho y enviar los valores seleccionados al shortcode de la galería.

Creoquelafunciónwp.media.galleryenwp-includes/js/media-editor.jseslafunciónpredeterminadaparainsertarelcódigocortodelagalería.

QuieroagregarunnuevoparámetroylosvaloresdelparámetroprovienendelcampodeseleccióndentrodelAdministradordemedios.

Hejugadocondiferentesfuentes,especialmentede esta pregunta , pero Backbone es muy nuevo para mí y no entiendo cómo funciona. También he jugado con el gancho print_media_templates , pero no he obtenido ningún resultado en la vista de Medios.

¿Qué ganchos debo usar?

    
pregunta bueltge 09.03.2013 - 16:05

2 respuestas

21

Una fuente pequeña, tal vez para un complemento para crear la solución. Al principio, la parte de php, incluye el javascript para el botón dentro del Administrador de medios. Es una respuesta más útil, pero la respuesta de @One Trick Pony fue crear y la dirección correcta y la solución JS.

Ver el resultado en la imagen:

Elshortcoderesultante,sieltamañonoeseltamañopredeterminado:

El Hook print_media_templates es el lugar correcto para incluir el botón, el marcado. También se puso en cola una secuencia de comandos, no hay una solución para agregar los controles.

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 siguiente fuente es javascript, en la fuente de ejemplo en php, el archivo 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 );
    
respondido por el bueltge 12.03.2013 - 12:11
19

Si realmente quieres usar plantillas de Backbone, entonces tu gancho es correcto.

Usaría jQuery para insertar la plantilla HTML en lugar de reemplazar la función template() para la vista de configuración de la galería. Pero supongo que ya lo sabes, así que publicaré la versión 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

});
    
respondido por el onetrickpony 12.03.2013 - 01:35

Lea otras preguntas en las etiquetas