Wordpress 3.5 Media Manager - tambahkan tombol

8

Di plugin saya, saya ingin menambahkan dua tombol ke Media Manager (di sebelah kiri "Sisipkan Ke Posting" di bagian "media-toolbar-primer"), dan hubungkan tindakan jQuery ke sana.

  1. Yang pertama - Tombol "Pilih Semua" harus memungkinkan untuk memilih semua gambar yang tersedia (hanya gambar), tergantung pada nilai opsi yang dipilih (mis. Semua Item Media, Diunggah ke Posting ini, dll.). Jadi jika "Semua Item Media" dipilih - semua gambar yang tersedia akan dipilih, jika "Diunggah ke posting ini" dipilih - hanya gambar yang dilampirkan ke posting saat ini yang akan dipilih.
  2. Yang kedua - "Kustom Sisipkan Ke Posting" - akan mendapatkan data gambar untuk semua gambar yang dipilih (sumber gambar ukuran penuh, teks alt, ukuran dll yang tersedia) dan sambil memungkinkan untuk membungkusnya dalam kode html tambahan - kode kembali ke editor tinymce.

Kode yang dikembalikan untuk tombol kedua dapat terlihat seperti ini:

<ul>
  <li><img src="full/path/to/001.jpg" alt="alt text 1" /></li>
  <li><img src="full/path/to/002.jpg" alt="alt text 2" /></li>
  <li><img src="full/path/to/003.jpg" alt="alt text 3" /></li>
  <li><img src="full/path/to/004.jpg" alt="alt text 4" /></li>
  <li><img src="full/path/to/005.jpg" alt="alt text 5" /></li>
</ul>

Sejauh yang saya mengerti, satu-satunya cara adalah menggunakan menimpa tampilan Backbone yang sesuai, tetapi di samping itu, hanya itu yang saya tahu untuk saat ini.

Terimakasih atas bantuannya.

Marcin Bobowski
sumber

Jawaban:

11

Blok kode ini akan menambahkan tombol tepat di sebelah "Sisipkan ke dalam pos". Ketika diklik, itu akan mengirim gambar yang dipilih ke WP editor, masing-masing dibungkus dengan HTML templat Anda:

var wpMediaFramePost = wp.media.view.MediaFrame.Post;
wp.media.view.MediaFrame.Post = wpMediaFramePost.extend(
{
    mainInsertToolbar: function( view )
    {
        "use strict";

        wpMediaFramePost.prototype.mainInsertToolbar.call(this, view);

        var controller = this;

        this.selectionStatusToolbar( view );

        view.set( "customInsertIntoPost", {
            style: "primary",
            priority: 80,
            text: "Insert selected images into post",
            requires: { selection: true },

            click: function()
            {
                var state = controller.state(),
                    selection = state.get("selection")._byId,
                    template = _.template('<li><img src="<%= imagePath %>" alt="<%= altText %>" /></li>'),
                    output = "<ul>";

                _.each(selection, function( item )
                {
                    if( item.attributes.type === "image" )
                    {
                        output += template({
                            imagePath: item.attributes.sizes.full.url,
                            altText: item.attributes.alt
                        });
                    }
                });

                output += "</ul>";

                send_to_editor(output);
            }
        });
    }
});

Menambahkan tombol khusus tidak menjadi masalah. Tetapi memilih "semua gambar" bisa sedikit rumit karena browser media WP 3.5 memuat lampiran sedikit demi sedikit. Saya akan memeriksanya, tetapi saya sarankan memilih lampiran secara manual.

aesqe
sumber
6

Tulis sebuah plugin kecil, gunakan contoh sumber ikuti untuk menambahkan item dalam daftar sidebar kiri pada manajer media di dalam popup overlay.

Hasil sumber di bawah ini: masukkan deskripsi gambar di sini

add_action( 'admin_footer-post-new.php', 'wpse_78881_script' );
add_action( 'admin_footer-post.php', 'wpse_78881_script' );
function wpse_78881_script() {
    ?>
    <script type="text/javascript">
        jQuery(window).on('load', function() {
            var media   = window.wp.media,  
            Attachment  = media.model.Attachment,
            Attachments = media.model.Attachments,
            Query       = media.model.Query,
            l10n        = media.view.l10n = typeof _wpMediaViewsL10n === 'undefined' ? {} : _wpMediaViewsL10n,
            My_new_item = undefined,
            Item_string = 'New Item!';

            jQuery(document).on( 'click', '.insert-media', function( event ) {
                var workflow = wp.media.editor.get();
                var options  = workflow.options;

                if ( undefined == My_new_item ) {
                    // see for wp.media.view.RouterItem also: wp-includes/js/media-views.js
                    My_new_item = new wp.media.view.RouterItem( _.extend( options, { text: Item_string } ) );
                    workflow.menu.view.views.set( '.media-menu', My_new_item, _.extend( options, { add: true } ) );
                }

            });
        });
    </script>
    <?php
}
bueltge
sumber
Sejauh ini saya bisa melihat cara untuk menambahkan posisi menu aditional di sidebar kiri. Jadi ini mungkin tanda jalan, tetapi untuk solusi yang berfungsi dengan dua tombol yang dijelaskan dalam pertanyaan ... Masih belum menutup :(
Marcin Bobowski
Ya, selalu menjadi starter untuk menemukan solusi yang tepat. Maaf; Tapi saya tidak punya lebih banyak waktu dan JS bukan bahasa pilihan saya. Saya menambahkan tautan untuk menjawab dengan intisari, ada yang bisa membantu Anda lebih banyak.
bueltge
3

Saya tidak punya jawaban penuh untuk pertanyaan Anda, tapi ini awal yang bagus. Untuk menyesuaikan Media Manager baru, Anda harus mempelajari kode Backbone javascript di wp-includes/js/media-views.js. Sebagai contoh, berikut adalah plugin kecil yang menambahkan tombol "Pilih Semua" ke Bilah Alat "Sisipkan dari URL":

custom.php:

add_action('admin_enqueue_scripts', 'custom_add_script');
function custom_add_script(){
    wp_enqueue_script('custom', plugins_url('custom.js', __FILE__), array('media-views'), false, true);
}

custom.js:

var originalToolbar = wp.media.view.Toolbar.Embed;
wp.media.view.Toolbar.Embed = originalToolbar.extend({
    // code modified from media-views.js, l 2500
    initialize: function() {

        this.options.items = _.defaults( this.options.items || {}, {
            // keep the original button
            select: {
                style:    'primary',
                text:     wp.media.view.l10n.insertIntoPost,
                priority: 80,
                click:    this.clickSelect,
                requires: false
            },
            // and add a new one
            selectAll: {
                text: 'Select All',
                style: 'primary',
                priority: 80,
                requires: false,
                click: this.selectAll
            }
        });

        wp.media.view.Toolbar.Select.prototype.initialize.apply( this, arguments );
    },

    selectAll: function(){
        console.log('select All');
    }
});

Untuk tombol "Sisipkan ke dalam pos", saya sarankan untuk menggunakan kode pendek galeri. UI sudah ada untuk memilih gambar yang diinginkan dan menyisipkan kode pendek di tempat yang tepat di tinymce. Yang harus Anda lakukan adalah menulis format shortcode galeri Anda sendiri.

Lihatlah gallery_shortcodefungsi wp-includes/media.phpdan gunakan post_galleryfilter.

Fabien Quatravaux
sumber
Terima kasih Fabien. Sakit bekerja pada kode yang Anda berikan, mencoba mencampurnya dengan jawaban dari aesque. Sayangnya, hanya ada satu pemenang, dan dia yang pertama. Terimakasih atas bantuannya.
Marcin Bobowski
3

Thomas Griffin membuat contoh plugin, New Media Image Uploader , tentang cara bekerja dengan manajer media baru.

Plugin ini memberikan contoh yang kuat untuk mengintegrasikan alur kerja manajer media baru ke plugin / tema Anda dengan menunjukkan kepada Anda cara mengunggah / menyisipkan file gambar ke dalam bidang teks.

Elliott
sumber
Ini cukup menarik, tetapi semua tentang menambahkan metabox dengan input dan tombol untuk memuat media_manager. Dan masalah saya adalah tentang menambahkan elemen ke media_manager itu sendiri. Tapi tetap saja, hal yang cukup bermanfaat.
Marcin Bobowski
2

Saya baru saja menemukan sebuah kasus di WP 3.6 di mana jawaban aesqe (sangat berguna) menghasilkan gambar yang dimasukkan dua kali karena backbone state.get("selection")._byIdtermasuk keduanya iddan ciduntuk setiap gambar yang dipilih.

Mengubah state.get("selection")._byIduntuk state.get("selection").modelsmemperbaiki ini untuk saya sambil menjaga atribut setiap objek.

Mudah-mudahan ini akan membuat seseorang frustrasi. Saya akan memposting ini sebagai komentar daripada jawaban tetapi, sayangnya, saya tidak punya reputasi.

Dameian
sumber
Jauh lebih baik sebagai jawaban :)
Michal Mau