मेटा बॉक्स में वर्डप्रेस 3.5 मीडिया अपलोडर का उपयोग करना?

Question

क्या ऐसा करना संभव है?

मुझे पसंद है कि नया अपलोडर कैसे काम करता है। मुझे लगता है कि यह एक jQuery कॉल के साथ दूसरे तरीके की तरह करना है।

संपादित करें

यह वह कोड है जिसका मैं वर्तमान में उपयोग कर रहा हूं

jQuery(document).ready(function($) {
$('.custom_upload_image_button').click(function() {
    imageField = $(this).prev('input');
    tb_show('', 'media-upload.php?type=image&TB_iframe=true');
});
window.send_to_editor = function(html) {
    imgurl = $(html).attr('href');
    $(imageField).val(imgurl);
    tb_remove();
};
$('.clear_field').click(function() {
    var defaultImage = jQuery(this).parent().siblings('.custom_default_image').text();
    jQuery(this).parent().siblings('.custom_upload_image').val('');
    return false;
});
});

Answer 1

आपको आरंभ करने के लिए, मूल कार्य और जहाँ तक मैं वर्तमान में जानता हूँ, बेहतर समाधान हो सकता है, लेकिन मेरे पास केवल 3.5 दिनों के लिए दो दिन थे:

// open modal - bind this to your button
    if ( typeof wp !== 'undefined' && wp.media && wp.media.editor )
        wp.media.editor.open( ##unique_id_here## );

// backup of original send function
   original_send = wp.media.editor.send.attachment;

// new send function
   wp.media.editor.send.attachment = function( a, b) {
       console.log(b); // b has all informations about the attachment
       // or whatever you want to do with the data at this point
       // original function makes an ajax call to retrieve the image html tag and does a little more
    };

// wp.media.send.to.editor will automatically trigger window.send_to_editor for backwards compatibility

// backup original window.send_to_editor
   window.original_send_to_editor = window.send_to_editor; 

// override window.send_to_editor
   window.send_to_editor = function(html) {
       // html argument might not be useful in this case
       // use the data from var b (attachment) here to make your own ajax call or use data from b and send it back to your defined input fields etc.
   }

यह पूर्ण रूप से कार्य करने वाला उत्तर नहीं है। आपको अपने इनपुट फ़ील्ड को अपने आप से परिभाषित करना होगा और आदि को ध्यान में रखना होगा। यह बस आपको शुरू करना चाहिए। यदि आपके पास अधिक ठोस प्रश्न हैं, तो बस पूछें।

और अपनी स्क्रिप्ट के पूरा होने पर मूल कार्यों को फिर से असाइन करना सुनिश्चित करें।

---

_{टिप्पणियों से खींचा गया:}

मैं लाइटबॉक्स की करीबी घटना को कैसे सुन सकता हूं?

// add listener: 
wp.media.view.Modal.prototype.on('close', function(){ console.log('triggered close'); }

Comments

धन्यवाद! हालांकि यह काम करने के लिए मुझे नहीं मिल रहा है। मैंने ऊपर जो पुराने मीडिया अपलोडर के लिए उपयोग किया है, यदि वह मदद करता है, तो मैंने पेस्ट किया।

— souporserious

Ipstenu और समर्थन टीम ने मुद्दों की एक मास्टर सूची ( wordpress.org/support/topic/… ) को वर्डप्रेस 3.5 के लिए रिपोर्ट किया है। यह थ्रेड किसी भी उपयोगकर्ता की प्रतिक्रिया के लिए नहीं है, लेकिन एक क्यूरेटेड थ्रेड है जो समस्या को ठीक करने के निर्देश के साथ-साथ ज्ञात मामलों को जल्दी से उजागर करता है।

— तारा

मैं लाइटबॉक्स की करीबी घटना को कैसे सुन सकता हूं? अगर कोई नई छवि नहीं चुनता है तो मुझे एक कस्टम फंक्शन को ट्रिगर करना होगा

— Xaver

// श्रोता जोड़ें: wp.media.view.odal.prototyp.on ('नज़दीकी', फ़ंक्शन () {कंसोल.लॉग ('ट्रिगर बंद');}

— ungestaltbar

Answer 2

यहां थीम विकल्पों में WP 3.5 मीडिया अपलोडर का उपयोग करने का एक छोटा ट्यूटोरियल दिया गया है। यही मैं लेकर आया हूं और यह मेरे लिए परफेक्ट है। अगर आपको कोई बेहतर उपाय आता है तो मुझे बताएं।

इस प्रकार मैंने अपने थीम विकल्पों में कोड लागू किया है:

jQuery(document).ready(function($){
  $('.stag-metabox-table .button').click(function(e){
  var send_attachment_bkp = wp.media.editor.send.attachment;
  var button = $(this);
  var id = button.attr('id').replace('_button', '');
  wp.media.editor.send.attachment = function(props, attachment){
    $("#"+id).val(attachment.url);
    wp.media.editor.send.attachment = send_attachment_bkp;
  }

  wp.media.editor.open(button);
  return false;

  });
});

अपडेट करें

यह कोड केवल पोस्ट एडिट पेज पर काम करता है। इसे थीम विकल्प पृष्ठ पर काम करने के लिए आपको जोड़ना होगाwp_enqueue_media();

Comments

क्या होगा अगर केवल एकल छवि चयन प्रदान करें एकाधिक नहीं?

— मेहुल ककलोटार

Answer 3

मैं लगभग वही कर रहा हूं जो अभी तैयार नहीं है लेकिन यह काम करता है:

php में:

<input id="default_featured_image" type="text" size="100" name="default_featured_image" value="<?php echo esc_attr( $value ); ?>" />
<?php
do_action( 'media_buttons', 'default_featured_image' ); // second argument is the same as the `<input>` id

जावास्क्रिप्ट:

jQuery('#default_featured_image_button').click(function () {
    var formfield = jQuery('#default_featured_image').attr('name');
    tb_show('', 'media-upload.php?type=image&TB_iframe=true');
    return false;
});

window.send_to_editor = function (html) {
    var imgurl = jQuery('img', html).attr('src');
    console.log(jQuery('img', html));
    console.log(html);
    console.log(imgurl);
    // set the url as the value
    jQuery('#default_featured_image').val(imgurl);
    tb_remove();
};

यह आपको छवि url (किसी भी आकार का) को <input>तत्व में अपलोड करने और भेजने में सक्षम करेगा ।
मैं इसे एक सेटिंग के रूप में करने की कोशिश कर रहा हूं और यह काम करता है, केवल थिग मुझे अब अटैचमेंट आईडी भेजने का एक विश्वसनीय तरीका है<input>

Comments

बहुत बहुत धन्यवाद sooooooooooooooooooooo !!!! यह अंत में समाधान के लिए बेताब शिकार के 2 दिनों के बाद काम किया !!! अनेक अनेक धन्यवाद!!!

— डेवनेर

तुम मेरे प्लगइन में इस के स्रोत कोड पर एक नज़र रखना चाहते हो सकता है: wordpress.org/extend/plugins/default-featured-image

— janw

Answer 4

मुझे लगता है कि @janw को यह पूरी तरह से सही मिला है, लेकिन मैं एक काम करने में असमर्थ था। जन मीडिया लाइब्रेरी बटन का उपयोग करता है:

do_action( 'media_buttons', 'default_featured_image' );

और उसके बाद डिफ़ॉल्ट क्रिया का पूर्व-प्रयोग करता है:

jQuery('#default_featured_image_button').click(function () {...

समस्या यह है कि मैं भाग गया है कि इस तरह से एक मीडिया बटन डालने से लिंक करने के लिए "default_featured_image_button" की एक आईडी प्रदान नहीं करता है। वास्तव में यह सम्मिलित लिंक पर कोई आईडी नहीं जोड़ता है। तो यह वही है जो मैंने इसे काम करने के लिए प्राप्त किया।

मैंने अपने इनपुट फ़ील्ड के ठीक बाद इस लाइन को अपने मेटा बॉक्स कॉलबैक फ़ंक्शन में जोड़ा:

<input id="upload_logo_button" type="button" value="Media Library Image" class="button-secondary" />

मैंने तब अपने कस्टम jquery फ़ाइल और thickbox css फ़ाइल को अपने कार्यों में भी प्रयोग किया।

add_action('admin_enqueue_scripts', 'jhsir_load_image_set_js');

function jhsir_load_image_set_js() {
    wp_enqueue_script( 'jhsir_image_set_script', get_stylesheet_directory_uri() . '/js/image-set.js', array('jquery','media-upload','thickbox') );
    wp_enqueue_style( 'thickbox' );
}

अंत में मेरी छवि- set.js फ़ाइल में निम्नलिखित शामिल थे:

jQuery(document).ready(function($) {

    var formfield = null;

    $('#upload_logo_button, #upload_background_button').click(function() {

        $('html').addClass('Image');

        formfield = $(this).prev('input').attr('name');  
        formfield_id = $(this).prev('input').attr('id'); 

        tb_show( '', 'media-upload.php?type=image&TB_iframe=true' );
        return false;
    });

    // user inserts file into post.
    // only run custom if user started process using the above process
    // window.send_to_editor(html) is how wp normally handles the received data

    window.original_send_to_editor = window.send_to_editor;
    window.send_to_editor = function( html ) {
        var fileurl;

        if(formfield != null) {
            fileurl = $( 'img', html).attr('src');

            $( "#" + formfield_id ).val(fileurl);

            tb_remove();

            $('html').removeClass('Image');
            formfield = null;
        } else {
            window.original_send_to_editor(html);
        }
    };
});

आप ध्यान देंगे कि मैंने इनपुट फ़ील्ड के नाम और आईडी को संग्रहीत करने के लिए चर का उपयोग किया था जो कि उस लिंक से पहले है जो jQuery को कॉल करता है। इस तरह इस कोड को एक ही पेज पर बार-बार इस्तेमाल किया जा सकता है। आपको बस सभी बटनों के लिए एक वर्ग निर्दिष्ट करने की आवश्यकता होगी या आपके ईद-गिर्द के बटनों के लिए व्यक्तिगत आईडी का उपयोग करना होगा जैसा मैंने किया था। मुझे उम्मीद है कि इससे किसी को मदद मिलेगी क्योंकि जनवरी का जवाब मुझे मिला था।

Answer 5

मुझे पता है कि यह एक पुरानी पोस्ट है, लेकिन मैं सिर्फ अपने निष्कर्षों को साझा करना चाहता हूं:

मीडिया संपादक खोलने के लिए, हम इस फ़ंक्शन को कहते हैं

wp.media.editor.open();

मीडिया एडिटर मूल रूप से window.tinymceलिटिलएमसीई एडिटर ( ), फिर क्विकटैग्स ( window.QTags) के लिए कंटेंट पास करने के लिए जांच करेगा ।

सामग्री प्राप्त करने के लिए मेरे दृष्टिकोण के लिए, मैंने window.QTagsएक कस्टम ऑब्जेक्ट के साथ असाइन किया, जिसमें एक insertContent()विधि है:

var newObject = {
  insertContent: function(html){
    // to extract the image source
    $(html).find('img').attr('src');
  }
}

// assign the newObject to window.QTags property
window.QTags = newObject;

संदर्भ: phpxref