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

16

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> de l'image sous la forme d'attributs data-*

.

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

MON CODE

Je crée un plug-in 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:

Jusqu'ici,toutvabien.Surcetteligne:

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

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

LE PROBLÈME

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

Cecin'apasdedata-settings="setting-value-here" , comment se fait-il?

Si je remplace la ligne par ceci:

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

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

LA SOLUTION

Merci à @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 );
});
    
posée Kaspar Lee 28.01.2016 - 16:46

1 réponse

11

Pour cela, utilisez 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 ( mis à jour ). dans wp_enqueue_media action):

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() ( mis à jour 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;
    } );
} );
    
réponse donnée bonger 12.02.2016 - 05:30

Lire d'autres questions sur les étiquettes