Додавання додаткових опцій до екземпляра зображення. (Налаштування відображення вкладених файлів)

Я намагаюся створити простий плагін для багаторазового представлення зображень у Wordpress 3.9, і, здається, я потрапив у цегляну стіну.

Мені хотілося б додати параметр до екземпляра зображення. (Деталі в розділі "Налаштування відображення вкладень"). Як і прапорець "Відповідальний", який вимикає (відтіняє сірий) спадний розмір зображення або параметри фіксованих позицій сторінки тощо.

У Менеджері медіа-файлів під час вибору / заміни зображення мені вдалося додати деякі власні поля за допомогою attachment_fields_to_editфільтру та сибіт, але ці поля приєднуються до самого зображення (або об'єкта вкладеного зображення, якщо ви хочете), якби у мене було два екземпляри одного зображення на сторінці, вони поділили б однакове значення мого спеціального поля.

а) Додане до користувача поле "Текст" я не можу приєднати це до екземпляра, всі екземпляри одного зображення поділяють це значення.

б) Це область, де я хотів би додати параметри, оскільки все, що тут, здається, слідкує за кожним випадком.

в) Тут відображаються ті ж налаштування дисплея, що і в попередньому екрані, однак вони відображаються різними при натисканні на «олівець» зверху зображення в Wordpress 3.9. Зверніть увагу на те, як спеціальні параметри, задані користувачем attachment_fields_to_edit, взагалі відсутні на цьому екрані.

Незважаючи на те, що я до кінця не зрозумів, як працює магістраль, або які найкращі практики модифікації об'єктів wp.media, я досить компетентний як з php, js, так і з googling. Але цей мене вже кілька днів тупотує, тому будь-яка допомога дуже цінується.

Дякуємо за прочитане!

Ви абсолютно праві щодо аналізу проблеми, навіть якщо умови, які ви використовуєте, трохи заплутані. Не існує такого поняття, як "екземпляр зображення": після того, як ви вставили зображення в допис, зміна оригінального заголовка зображення або підпису (наприклад, через меню "Медіа") не змінить зображення, вставлене в допис. Щоб переконати вас, натисніть на вкладку "Текст" і перевірте створений HTML-код.

Ось що відбувається, коли ви вставляєте зображення кнопкою "Додати медіа":

1. Після натискання кнопки "Вставити до публікації" дані беруться з медіа-модалу, щоб генерувати якийсь код HTML: <img>тег з правильним джерелом залежно від вибраного розміру, заголовок як альт-тексту та підписи, якщо такий є. Цей код вставляється в потрібному місці в редакторі TinyMCE (перевірити його на вкладці "Текст")

2. На вкладці "Візуальний" створюється "перегляд", який представляє зображення у візуальному редакторі. У цьому вікні відображаються зображення та дві кнопки: редагування та видалення. Цей погляд дозволяє вам змінити розмір зображення та змінити деякі інші параметри візуально, не торкаючись HTML-коду.

Отже, якщо ви хочете додати деякі власні дані (не називайте це спеціальним полем, оскільки воно не додається до жодної публікації вкладених файлів), вам доведеться вставити його в цей HTML-код і потім змінити подання, щоб дозволити візуально змінити ці дані. . Якщо я добре розумію ваше запитання, ви хочете додати дані, які будуть розміщувати зображення певним чином на сторінці. Ви можете використовувати для цього спеціальний клас.

Ось HTML-код, який було створено:

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

І ви хочете, щоб у спадному списку розмірів був вибір "чуйний", який би зробив такий код:

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

Ось як цього досягти: створіть плагін, який запускатиме новий сценарій на сторінці редагування публікацій.

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

Тоді customView.js повинен виглядати так:

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

І ось результат: