Administrador de medios mejorado para la galería

29

Me gustaría mejorar el Editor de medios, después de WordPress 3.5, en la vista de la 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.

ingrese la descripción de la imagen aquí

Creo que la función wp.media.galleryen wp-includes/js/media-editor.jses la función predeterminada para insertar el shortcode de la galería.

Quiero agregar un nuevo parámetro y los valores del parámetro provienen del campo de selección dentro del Administrador de medios.

He jugado con diferentes fuentes, especialmente de esta pregunta , pero Backbone es muy nuevo para mí y no entiendo cómo funciona. También jugué con el gancho print_media_templates, pero no obtuve ningún resultado en la vista de Medios.

¿Qué ganchos debo usar?

bueltge
fuente

Respuestas:

21

Una pequeña fuente, quizás para un complemento para crear la solución. Al principio, la parte 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.

Vea el resultado en la imagen: ingrese la descripción de la imagen aquí

El shortcode resultante, si el tamaño no es el tamaño predeterminado: ingrese la descripción de la imagen aquí

El gancho print_media_templateses el lugar adecuado para incluir el botón, el marcado. También se puso en cola un script, allí tiene la 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 );
bueltge
fuente
44
¡Bravo! Parece que WordPress Development está construyendo una base de conocimiento sobre la nueva Biblioteca de Medios a un ritmo más rápido que los desarrolladores principales;) Y, cómo no, @OneTrickPony revela una vez más otro de sus trucos mágicos, ¡felicitaciones a ambos!
brasofilo
Fantástico. Pregunta de seguimiento: ¿hay una manera fácil de suprimir los atributos predeterminados en el shortcode? Entonces se [gallery type="thumbnail" ids="1,2"]convierte [gallery ids="1,2"]? Estoy agregando un atributo personalizado para un complemento para convertir opcionalmente la galería en una presentación de diapositivas. Me gustaría suprimir el atributo cuando solo dice mostrar una Galería WP normal. Entonces, al desactivar el complemento, deja menos migajas.
Kitchin
Creo que es una mejor manera de agregar una nueva pregunta sobre este tema. El shortcode está fuera de la q / a aquí.
bueltge
@bueltge, ¿puedo pedirle que eche un vistazo a una pregunta relacionada con un campo personalizado aquí: wordpress.stackexchange.com/questions/265852/… ?
Istiaque Ahmed
19

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

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

});
Pony de un solo truco
fuente