Améliorer Media Manager for Gallery
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 à droite et envoyer les valeurs sélectionnées au shortcode de la galerie.
Je pense que la fonction wp.media.gallery dans wp-includes/js/media-editor.js est la fonction par défaut pour insérer le shortcode de la galerie.
Je souhaite ajouter un nouveau paramètre et les valeurs de ce paramètre proviennent du champ de sélection du gestionnaire de médias.
J'ai joué avec différentes sources, en particulier celle 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 hook print_media_templates, mais aucun résultat dans la vue Média.
Quels crochets devrais-je utiliser?
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 le Media Manager. La réponse est plus utilisable, mais la réponse de @One Trick Pony était créer et la bonne direction et solution JS.
Voir le résultat sur l'image: 
Le shortcode résultant, si la taille n'est pas la taille par défaut: 
Le crochet print_media_templates est le bon endroit pour inclure le bouton, le balisage. Également était un script en file d'attente, 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 la 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 );
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 posterai 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
});