Dodanie większej liczby opcji do wystąpienia obrazu. (Ustawienia wyświetlania załączników)

Próbuję zbudować prostą wtyczkę wielokrotnego użytku do prezentacji obrazów w Wordpress 3.9 i wygląda na to, że uderzyłem w mur.

Chciałbym móc dodać kilka opcji do instancji obrazu. (Szczegóły w „Ustawieniach wyświetlania załączników”). Jak pole wyboru z napisem „Responsive”, które wyłącza (szarości) menu rozwijane rozmiaru obrazu lub opcje ustalania pozycji strony itp.

W Menedżerze multimediów podczas wybierania / zastępowania obrazu byłem w stanie dodać niektóre niestandardowe pola za pomocą attachment_fields_to_editi filtrów rodzeństwa, jednak pola te dołączają się do samego obrazu (lub obiektu postu załącznika do obrazu, jeśli chcesz), więc gdybym miał dwa wystąpienia tego samego obrazu na stronie, podzieliłbym tę samą wartość mojego niestandardowego pola.

a) Dodane pole niestandardowego tekstu nie mogę dołączyć tego do instancji, wszystkie instancje tego samego obrazu mają tę samą wartość.

b) W tym obszarze chciałbym dodać opcje, ponieważ wszystko tutaj wydaje się następować po każdej instancji.

c) Pokazuje te same ustawienia wyświetlania, co na poprzednim ekranie, ale jest inaczej, gdy klikniesz „ołówek” na obrazie w Wordpress 3.9. Zauważ, że opcje niestandardowe podane przez attachment_fields_to_editnie są w ogóle obecne na tym ekranie.

Mimo, że nie do końca rozumiem, jak działa kręgosłup lub jakie są najlepsze praktyki modyfikowania obiektów wp.media, jestem dość kompetentny zarówno w php, js, jak i w wyszukiwaniu odpowiedzi. Ale ten już od kilku dni mnie zaskoczył, więc każda pomoc jest bardzo ceniona.

Dziękuje za przeczytanie!

Masz całkowitą rację co do analizy problemu, nawet jeśli stosowane przez Ciebie warunki są nieco mylące. Nie ma czegoś takiego jak „instancja obrazu”: po wstawieniu obrazu do postu modyfikacja oryginalnego tytułu lub podpisu (na przykład za pośrednictwem menu Media) nie spowoduje modyfikacji obrazu wstawionego do posta. Aby Cię przekonać, kliknij kartę „Tekst” i sprawdź wygenerowany kod HTML.

Oto, co dzieje się po wstawieniu obrazu za pomocą przycisku „Dodaj multimedia”:

1. Po kliknięciu przycisku „Wstaw do posta” dane są pobierane z modułu Media w celu wygenerowania kodu HTML: <img>znacznik z poprawnym źródłem w zależności od wybranego rozmiaru, tytuł jako tekst alternatywny i podpis, jeśli taki istnieje. Ten kod jest wstawiany we właściwym miejscu w edytorze TinyMCE (sprawdź go za pomocą zakładki „Tekst”)

2. W zakładce „Wizualny” tworzony jest „widok” reprezentujący obraz w edytorze wizualnym. Ten widok wyświetla obraz i dwa przyciski: edytuj i usuń. Ten widok umożliwia zmianę rozmiaru obrazu i zmianę niektórych innych parametrów wizualnie, bez dotykania kodu HTML.

Jeśli więc chcesz dodać jakieś niestandardowe dane (nie nazywaj tego niestandardowym polem, ponieważ nie jest ono dołączone do żadnego postu załącznika), będziesz musiał wstawić go do tego kodu HTML, a następnie zmodyfikować widok, aby umożliwić wizualną zmianę tych danych . Jeśli dobrze rozumiem twoje pytanie, chcesz dodać dane, które pozycjonują obraz w określony sposób na stronie. Możesz do tego użyć niestandardowej klasy.

Oto kod HTML, który został wygenerowany:

<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" />

I chcesz mieć „responsywny” wybór na liście rozwijanej rozmiaru, który sprawi, że kod będzie wyglądał następująco:

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

Oto jak to osiągnąć: utwórz wtyczkę, która będzie kolejkować nowy skrypt na stronie edycji postów.

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

Następnie plik customView.js powinien wyglądać następująco:

(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, _));

A oto wynik: