web-dev-qa-db-fra.com

wp.media.view.ImageDetails - Enregistre les paramètres en tant qu'attributs HTML5 - * pour l'image

Ce que je souhaite enfin, ce sont des paramètres supplémentaires ajoutés à la zone Détails de l'image, qui seront stockés dans la balise <img> en tant qu'attributs data-*

Exemple: <img src="..." data-my_setting="...">

Mon code

Je crée un plugin et je dois créer davantage de paramètres pour la modification des images. Jusqu'à présent, j'ai le code suivant:

jQuery(function($) {

    var imageDetails = wp.media.view.ImageDetails

    wp.media.view.ImageDetails = wp.media.view.ImageDetails.extend({
        // Initialize - Call function to add settings when rendered
        initialize: function() {
            this.on('post-render', this.add_settings);
        },
        // To add the Settings
        add_settings: function() {
            $('.advanced-section').prepend('\
                <h2>My Settings</h2>\
                <input type="text" class="my_setting">\
            ');

            // Set Options
            this.controller.image.set({"data-settings": 'setting-value-here'})
        }
    });

}) // End of jQuery(function($))

J'ai créé un nouveau message et ajouté une image, puis cliqué dessus et appuyé sur Modifier (l'icône représentant un crayon dans la barre d'outils qui s'est affichée). Je me suis retrouvé sur la page de détails de l'image, et voici à quoi elle ressemblait:

 enter image description here 

Jusqu'ici tout va bien. Sur cette ligne:

this.controller.image.set({"data-settings": 'setting-value-here'})

J'utilise normalement jQuery pour obtenir la valeur de l'entrée, mais à des fins de test, je l'ai changée en une valeur statique de 'setting-value-here'. J'ai appuyé sur "Mettre à jour" dans le coin inférieur droit de la zone Détails de l'image.

LE PROBLÈME

Dans l'éditeur de texte, le code HTML est affiché comme ceci:

 enter image description here 

Ce n'a pas a un data-settings="setting-value-here", comment ça se fait?

Si je remplace la ligne par ceci:

 this.controller.image.set({alt: 'setting-value-here'})

Il fait change la baliseALTen alt="setting-value-here". Alors qu'est-ce que je fais mal en essayant de définir l'attribut data- *?

LA SOLUTION

Grâce à @bonger (qui a reçu la prime complète de 50 points de réputation), j'ai le code suivant:

PHP: 

function add_my_settings() {
    ob_start();
    wp_print_media_templates();
    $tpl = ob_get_clean();
    if ( ( $idx = strpos( $tpl, 'tmpl-image-details' ) ) !== false
            && ( $before_idx = strpos( $tpl, '<div class="advanced-section">', $idx ) ) !== false ) {
        ob_start();
        ?>
        <div class="my_setting-section">
            <h2><?php _e( 'My Settings' ); ?></h2>
            <div class="my_setting">
                <label class="setting my_setting">
                    <span><?php _e( 'My Setting' ); ?></span>
                        <input type="text" data-setting="my_setting" value="{{ data.model.my_setting }}" />
                    </label>
                </div>
            </div>
        <?php
        $my_section = ob_get_clean();
        $tpl = substr_replace( $tpl, $my_section, $before_idx, 0 );
    }
    echo $tpl;
};

// Hack the output of wp_print_media_templates()
add_action('wp_enqueue_media', $func =
    function() {
        remove_action('admin_footer', 'wp_print_media_templates');
        add_action('admin_footer',  'add_my_settings');
    }
);

JavaScript: (Doit être mis en file d'attente avec wp_enqueue_script())

// When Image is Edited
wp.media.events.on('editor:image-edit', function(data) {
    data.metadata.my_setting = data.editor.dom.getAttrib( data.image, 'data-my_setting' );
});

// When Image is Updated
wp.media.events.on('editor:image-update', function(data) {
    data.editor.dom.setAttrib( data.image, 'data-my_setting', data.metadata.my_setting );
});
pluginsimagesmediahtml5
18
Kaspar Lee

Une façon de le faire est d'utiliser les événements (très pratiques) editor:image-edit et editor:image-update déclenchés par le plugin tinymce wpeditimage pour obtenir/définir le dom directement ( updated pour envelopper l'action wp_enqueue_media):

add_action( 'wp_enqueue_media', function () {
    add_action( 'admin_footer', function () {
        ?>
        <script type="text/javascript">
        jQuery(function ($) {
            if (wp && wp.media && wp.media.events) {
                wp.media.events.on( 'editor:image-edit', function (data) {
                    data.metadata.my_setting = data.editor.dom.getAttrib( data.image, 'data-my_setting' );
                } );
                wp.media.events.on( 'editor:image-update', function (data) {
                    data.editor.dom.setAttrib( data.image, 'data-my_setting', data.metadata.my_setting );
                } );
            }
        });
        </script>
        <?php
    }, 11 );
} );

Pour ajouter et renseigner le champ des paramètres, il est peut-être plus judicieux de pirater la sortie de wp_print_media_templates() plutôt que de remplacer ImageDetails.initialize() ( updated pour envelopper l'action wp_enqueue_media):

add_action( 'wp_enqueue_media', function () {
    remove_action( 'admin_footer', 'wp_print_media_templates' );
    add_action( 'admin_footer', $func = function () {
        ob_start();
        wp_print_media_templates();
        $tpl = ob_get_clean();
        // To future-proof a bit, search first for the template and then for the section.
        if ( ( $idx = strpos( $tpl, 'tmpl-image-details' ) ) !== false
                && ( $before_idx = strpos( $tpl, '<div class="advanced-section">', $idx ) ) !== false ) {
            ob_start();
            ?>
    <div class="my_setting-section">
        <h2><?php _e( 'My Settings' ); ?></h2>
        <div class="my_setting">
            <label class="setting my_setting">
                <span><?php _e( 'My Setting' ); ?></span>
                <input type="text" data-setting="my_setting" value="{{ data.model.my_setting }}" />
            </label>
        </div>
    </div>
            <?php
            $my_section = ob_get_clean();
            $tpl = substr_replace( $tpl, $my_section, $before_idx, 0 );
        }
        echo $tpl;
    } );
} );
13
bonger