ওয়ার্ডপ্রেস 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

আপনাকে শুরু করার জন্য, আমি যতটা জানি এখন পর্যন্ত বেসিক ফাংশন এবং ওভাররাইডগুলি better আরও ভাল সমাধান হতে পারে, তবে আমার কেবল মাত্র 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.
   }

এটি সম্পূর্ণ কাজের উত্তর নয়। আপনাকে নিজের ইনপুট ক্ষেত্রগুলি নিজের দ্বারা নির্ধারণ এবং ট্র্যাক করে রাখতে হবে ইত্যাদি This এটি আপনাকে শুরু করা উচিত। আপনার যদি আরও দৃ concrete় প্রশ্ন থাকে তবে কেবল জিজ্ঞাসা করুন।

এবং আপনার স্ক্রিপ্টটি হয়ে গেলে মূল ফাংশনগুলি পুনরায় নিয়োগের বিষয়টি নিশ্চিত করুন।

---

_{মন্তব্য থেকে টানা:}

আমি কীভাবে লাইটবক্সের ঘনিষ্ঠ ইভেন্টটি শুনতে পারি?

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

Comments

ধন্যবাদ! আমি যদিও এটি কাজ করতে পারে বলে মনে হচ্ছে না। উপরের পুরানো মিডিয়া আপলোডারের জন্য আমি যা ব্যবহার করছি তা পেস্ট করেছি, যদি এটি সহায়তা করে।

— স্যুপোরসিয়াস

ওয়ার্ডপ্রেস ৩.৫-এর জন্য রিপোর্ট করা ইপস্টেনু এবং সহায়তা দল একত্রিত ইস্যুগুলির একটি মাস্টার তালিকা ( wordpress.org/support/topic/… ) রেখে দিয়েছে। এই থ্রেডটি কোনও ব্যবহারকারীর প্রতিক্রিয়া বোঝাতে নয় বরং এটি একটি সংযুক্ত থ্রেড যা দ্রুত জানা যাচ্ছিল সমস্যাগুলি হাইলাইট করার পাশাপাশি সমস্যাটি কীভাবে ঠিক করবেন সে সম্পর্কে নির্দেশাবলী।

— তারা

আমি কীভাবে লাইটবক্সের ঘনিষ্ঠ ইভেন্টটি শুনতে পারি? কেউ যদি নতুন চিত্র চয়ন না করে তবে আমাকে একটি কাস্টম ফাংশন ট্রিগার করতে হবে

— Xaver

// শ্রোতা যুক্ত করুন: wp.media.view.Modal.prototype.on ('বন্ধ', ফাংশন () so কনসোল.লগ ('ট্রিগার

— ট্রিট

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

আমি প্রায় একই কাজ করছি এটি এখনও প্রস্তুত নয় তবে এটি কাজ করে:

পিএইচপি তে:

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

এটি আপনাকে <input>উপাদানটির কাছে চিত্র url (কোনও আকারের) আপলোড এবং প্রেরণে সক্ষম করবে ।
আমি এটি একটি সেটিংস হিসাবে এটি করার চেষ্টা করছি এবং এটি কাজ করে, কেবলমাত্র এখনই আমার প্রয়োজন সংযুক্তি আইডি প্রেরণের একটি নির্ভরযোগ্য উপায়<input>

Comments

আপনাকে অনেক ধন্যবাদ sooooooooooooooooooooo !!!! সমাধানের জন্য হতাশ শিকারের 2 দিন পরে এটি অবশেষে কাজ করেছে !!! অসংখ্য ধন্যবাদ!!!

— ডেভনার

আপনি আমার প্লাগইনটিতে এর উত্স কোডটি একবার দেখে নিতে চান: wordpress.org/extend/plugins/default-featured-image

— জানু

Answer 4

আমি মনে করি @ জঞ্জউ এটি পুরোপুরি ঠিকভাবে পেয়েছে তবে আমি একটি জিনিস কাজ করতে অক্ষম হয়েছি। জান মিডিয়া লাইব্রেরি বোতামটি ব্যবহার করে সন্নিবেশ করান:

do_action( 'media_buttons', 'default_featured_image' );

এবং তারপরে ব্যবহার করে ডিফল্ট ক্রিয়াটি প্রাক-শূন্য করে:

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

আমি যে সমস্যাটি দেখেছি তা হ'ল এই ফ্যাশনে একটি মিডিয়া বোতাম সন্নিবেশ করা লিঙ্কটিতে "ডিফল্ট_প্রেমযুক্ত_আইমেজ_বটন" এর একটি আইডি বরাদ্দ করে না। আসলে এটি linkোকানো লিঙ্কটিতে কোনও আইডি যুক্ত করে না। কাজেই এটি পেতে আমি এটিই করেছি।

আমি আমার ইনপুট ফিল্ডের ঠিক পরে এই মেটা বক্স কলব্যাক ফাংশনে এই লাইনটি যুক্ত করেছি:

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

তারপরে আমি আমার কাস্টম jquery ফাইল এবং পুরুবাক্স সিএসএস ফাইলটিও আমার ফাংশন.এফপি ফাইলে এটিকে ব্যবহার করে:

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

অবশেষে আমার ইমেজ-সেট.জেএস ফাইলটিতে নিম্নলিখিতগুলি অন্তর্ভুক্ত রয়েছে:

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 কল করার লিঙ্কের ঠিক আগে। সেভাবে এই কোডটি একই পৃষ্ঠায় বারবার ব্যবহার করা যেতে পারে। আপনাকে যেমন করতে হবে ঠিক তেমন সমস্ত বাটনে একটি ক্লাস বরাদ্দ করতে হবে বা আপনার jquery এর বোতামগুলির জন্য স্বতন্ত্র আইডি ব্যবহার করতে হবে। আমি আশা করি যে জ্যানের উত্তর আমাকে যেমন করেছে তেমনই এটি কাউকে সহায়তা করে।

Answer 5

আমি জানি যে এটি একটি পুরানো পোস্ট, তবে আমি কেবল আমার অনুসন্ধানগুলি ভাগ করতে চাই:

মিডিয়া সম্পাদক খোলার জন্য, আমরা এই ফাংশনটি কল করি

wp.media.editor.open();

মিডিয়া সম্পাদক মূলত tinyMCE সম্পাদক ( 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