Menambahkan lebih banyak opsi ke instance gambar. (Pengaturan Tampilan Lampiran)

Saya mencoba membangun sebuah plugin sederhana yang dapat digunakan kembali untuk presentasi gambar di Wordpress 3.9, dan sepertinya saya telah menabrak dinding bata.

Saya ingin dapat menambahkan beberapa opsi pada instance gambar. (Detail di bawah "Pengaturan Tampilan Lampiran"). Seperti kotak centang yang mengatakan "Responsif" yang menonaktifkan (mengaburkan) dropdown ukuran gambar, atau opsi untuk posisi halaman tetap dll.

Di Manajer Media saat memilih / mengganti gambar, saya dapat menambahkan beberapa bidang khusus dengan menggunakan attachment_fields_to_editdan itu adalah filter saudara, namun bidang ini melampirkan gambar itu sendiri (atau objek posting lampiran gambar jika Anda mau), jadi jika saya memiliki dua contoh gambar yang sama pada satu halaman, mereka akan berbagi nilai yang sama dari bidang kustom saya.

a) Bidang Teks Khusus yang saya tambahkan, saya tidak dapat melampirkan ini ke contoh, semua contoh dari gambar yang sama berbagi nilai ini.

b) Ini adalah area di mana saya ingin menambahkan opsi, karena semua yang ada di sini tampaknya mengikuti setiap instance.

c) Ini menunjukkan pengaturan tampilan yang sama seperti di layar sebelumnya, namun disajikan berbeda ketika mengklik "pensil" di atas gambar di Wordpress 3.9. Perhatikan bagaimana opsi khusus yang diberikan oleh attachment_fields_to_edittidak ada di layar ini sama sekali.

Meskipun saya belum memahami sepenuhnya bagaimana backbone bekerja, atau apa praktik terbaik untuk memodifikasi objek wp.media, saya cukup kompeten dengan php, js, dan googling untuk jawaban. Tapi yang ini membuat saya bingung selama beberapa hari sekarang, jadi bantuan apa pun sangat dihargai.

Terima kasih sudah membaca!

Anda benar tentang analisis masalah, meskipun istilah yang Anda gunakan agak membingungkan. Tidak ada yang namanya "contoh gambar": setelah Anda memasukkan gambar ke dalam kiriman, memodifikasi judul atau judul gambar asli (melalui menu Media misalnya) tidak akan mengubah gambar yang dimasukkan ke dalam kiriman. Untuk meyakinkan Anda, klik pada tab "Teks" dan periksa kode HTML yang dihasilkan.

Inilah yang terjadi ketika Anda memasukkan gambar dengan tombol "Tambah media":

1. Ketika Anda mengklik "Sisipkan ke Posting", data diambil dari modal Media untuk menghasilkan beberapa kode HTML: <img>tag dengan sumber yang benar tergantung pada ukuran yang Anda pilih, judul sebagai teks alternatif dan teks jika ada. Kode ini disisipkan di tempat yang tepat di editor TinyMCE (lihat melalui tab "Teks")

2. Di dalam tab "Visual" sebuah "tampilan" dibuat untuk mewakili gambar dalam editor visual. Tampilan ini menampilkan gambar dan dua tombol: edit dan hapus. Pandangan ini yang memungkinkan Anda untuk mengubah ukuran gambar dan mengubah beberapa parameter lainnya secara visual, tanpa menyentuh kode HTML.

Jadi, jika Anda ingin menambahkan beberapa data khusus (jangan menyebutnya bidang khusus karena tidak dilampirkan ke pos lampiran), Anda harus memasukkannya ke dalam kode HTML ini dan kemudian memodifikasi tampilan untuk memungkinkan untuk mengubah data ini secara visual . Jika saya memahami pertanyaan Anda dengan baik, Anda ingin menambahkan data yang akan memposisikan gambar dengan cara tertentu pada halaman. Anda bisa menggunakan kelas khusus untuk ini.

Berikut adalah kode HTML yang dihasilkan:

<img class="alignnone size-medium wp-image-10" src="http://myserver.com/wp-content/uploads/2014/08/opensource-300x259.gif" alt="opensource" width="300" height="259" />

Dan Anda ingin memiliki pilihan "responsif" dalam daftar dropdown ukuran yang akan membuat kode terlihat seperti:

<img class="alignnone size-responsive wp-image-10" src="http://myserver.com/wp-content/uploads/2014/08/opensource-300x259.gif" alt="opensource" />

Inilah cara untuk mencapai ini: buat sebuah plugin yang akan membuat skrip baru pada halaman edit posting.

add_action( 'admin_enqueue_scripts', 'wpse16975_custom_image_view');
function wpse16975_custom_image_view($hook){
    if($hook == 'post.php'){
        wp_enqueue_script( 'custom_image_view', plugin_dir_url( __FILE__ ) . '/customView.js', array( 'media-views' ));
    }
}

Maka, customView.js akan terlihat seperti ini:

(function($, _){
    var media = wp.media;

    var origImageDetails = media.view.ImageDetails;
    media.view.ImageDetails = origImageDetails.extend({
        initialize: function() {
            origImageDetails.prototype.initialize.apply( this, arguments );
            this.on( 'post-render', this.responsiveSize );
            this.listenTo( this.model, 'change:size', this.setReponsiveSize );
            this.initSize = this.model.get('size');
        },

        responsiveSize: function(){
            // add a "Reponsive" option to the Size dropdown setting
            var $opt = $(document.createElement('option')).attr('value', 'responsive').text('Responsive');
            if(this.initSize == 'responsive') $opt.attr('selected', 'selected');
            this.$('.embed-media-settings select.size').append($opt);
        },

        setReponsiveSize: function(){
            // remove width and height
            if(this.model.get('size') == 'responsive') this.controller.image.set({width:null, height:null}, {silent:true});
        }

    });
}(jQuery, _));

Dan inilah hasilnya: