wp.media.view.ImageDetails - छवि के लिए HTML5 डेटा- * विशेषताओं के रूप में सेटिंग्स सहेजें

मैं आखिरकार क्या हासिल करना चाहता हूं छवि विवरण बॉक्स में अतिरिक्त सेटिंग्स जोड़ी गई हैं, जो कि विशेषताओं के <img>रूप में छवि टैग में संग्रहीत की जाएंगीdata-*

उदाहरण: <img src="..." data-my_setting="...">

मेरे कोड

मैं एक प्लगइन बना रहा हूं, और जब आप छवियों को संपादित करते हैं, तो मुझे अधिक सेटिंग्स बनाने की आवश्यकता होती है। अब तक मेरे पास निम्नलिखित कोड हैं:

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($))

मैंने एक नई पोस्ट बनाई और एक छवि को जोड़ा, फिर उस पर क्लिक किया और एडिट (टूलबार में पेंसिल आइकन जो पॉप हो गया) दबाया। मैं छवि विवरण पृष्ठ पर समाप्त हुआ, और यह वही है जो ऐसा दिखता था:

अब तक सब ठीक है। इस लाइन पर:

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

मैं आमतौर पर इनपुट के मूल्य को प्राप्त करने के लिए jQuery का उपयोग करता हूं, लेकिन परीक्षण उद्देश्यों के लिए मैंने इसे स्थिर मूल्य के रूप में बदल दिया 'setting-value-here'। मैंने छवि विवरण बॉक्स के निचले-दाएं कोने में 'अपडेट' दबाया।

समस्या

टेक्स्ट एडिटर में, यह HTML कोड इस प्रकार दिखाता है:

यह एक नहीं है data-settings="setting-value-here", कैसे आया?

यदि मैं इसके साथ लाइन को प्रतिस्थापित करता हूं:

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

यह करता है बदलने के एएलटी करने के लिए टैग alt="setting-value-here"। तो क्या मैं गलत डेटा सेट करने की कोशिश कर रहा हूँ- * विशेषता?

समाधान

@Bonger (जिसे 50 प्रतिष्ठा का पूरा इनाम मिला) के लिए धन्यवाद , मेरे पास निम्नलिखित कोड हैं:

पीएचपी:

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');
    }
);

जावास्क्रिप्ट: (का उपयोग करने की आवश्यकता होती है 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 );
});

— कास्पर ली
स्रोत

काश मैं +2 - स्पष्ट, संक्षिप्त, अच्छी तरह से शोध किया जा सकता है, इसलिए विषय पर यह दर्द होता है। इस तरह के सवाल एक दुर्लभ नस्ल हैं।

— TheDeadMedic

धन्यवाद! मैं हमेशा कोशिश करता हूं और अनुसंधान (और बड़े पैमाने पर डिबग) अपनी समस्याओं को जितना मैं पूछ सकता हूं उतना पहले। (जब आप एक बहुत ही सरल प्रश्न पाते हैं तो मुझे इससे घृणा होती है और ओपी ने गोग्लिंग की कोशिश भी नहीं की है)

— कास्पर ली

ऐसा करने का एक तरीका है (बहुत सुविधाजनक) का उपयोग करना editor:image-editऔर सीधे डोम को सेट / सेट करने के लिए editor:image-updateटिनिम्ज़ wpeditimageप्लगइन द्वारा ट्रिगर की गई घटनाओं ( कार्रवाई में लपेटने के लिए अद्यतन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 );
} );

सेटिंग्स फ़ील्ड को जोड़ने और पॉप्युलेट करने के लिए, wp_print_media_templates()ओवरराइड के बजाय आउटपुट को हैक करने के लिए यह संभवतः बेहतर है ImageDetails.initialize()( कार्रवाई में लपेटने के लिए अपडेट किया गया है 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;
    } );
} );

— Bonger
स्रोत

आपको बहुत - बहुत धन्यवाद! यह एक बहुत ही उपयोगी है (हालांकि आपके सिर को चारों ओर आने में कुछ मिनट लगते हैं)। मैं उत्तर को स्वीकार करूंगा और इसके समाप्त होने से ठीक पहले आपको इनाम दूंगा (कोई व्यक्ति मेरे बेहतर / सरल उत्तर के साथ आएगा)

— कास्पर ली

हम्म, यह होगा अगर यह पहले चला wp_enqueue_media()है। शायद एक अच्छा तरीका यह है wp_enqueue_mediaकि उस कार्रवाई का उपयोग किया जाए जिसके अंत में फायर किया जाता है wp_enqueue_media(), अर्थात सभी कोड को एक में add_action( 'wp_enqueue_media', function () { /*the code*/ } );

— लपेटा

नहीं, इसके विपरीत!

— बोंगर

मैं जवाब अपडेट करूंगा ...

— बोंगर

यह अंडरस्कोर के टेम्पलेट सामान का WP के ओवरराइड है underscorejs.org/#template (देखें wp.template.... मुझे लगता है कि "WP-शामिल / js / WP-util.js" में)

— Bonger