Добавление дополнительных параметров к экземпляру изображения. (Настройки отображения вложений)

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

Я хотел бы иметь возможность добавить пару вариантов для экземпляра изображения. (Подробности в разделе «Настройки отображения вложений»). Например, флажок «Отзывчивый», который отключает (отображает серый цвет) раскрывающийся список размеров изображения или параметры для фиксированных позиций страницы и т. Д.

В Media Manager при выборе / замене изображения я смог добавить некоторые настраиваемые поля с помощью attachment_fields_to_editфильтров и родственных ему фильтров, однако эти поля прикрепляются к самому изображению (или к объекту публикации прикрепленных изображений, если хотите), поэтому если бы у меня было два экземпляра одного и того же изображения на странице, они имели бы одинаковое значение моего настраиваемого поля.

a) Поле Custom Text, которое я добавил, я не могу прикрепить это к экземпляру, все экземпляры одного изображения имеют это значение.

б) Это та область, где я хотел бы добавить опции, так как все здесь, похоже, соответствует каждому экземпляру.

c) Здесь отображаются те же настройки экрана, что и на предыдущем экране, однако они отображаются по-разному при нажатии на «карандаш» в верхней части изображения в Wordpress 3.9. Обратите внимание, что пользовательские параметры, заданные параметром, attachment_fields_to_editвообще отсутствуют на этом экране.

Несмотря на то, что я не до конца понял, как работает магистраль или каковы лучшие методы изменения объектов wp.media, я достаточно компетентен с php, js и поиском ответов. Но этот уже несколько дней ставил меня в тупик, поэтому любая помощь очень ценится.

Спасибо за прочтение!

Вы совершенно правы в анализе проблемы, даже если используемые вами термины немного сбивают с толку. Не существует такого понятия, как «экземпляр изображения»: после того, как вы вставили изображение в сообщение, изменение исходного заголовка или заголовка изображения (например, через меню «Медиа») не приведет к изменению изображения, вставленного в сообщение. Чтобы убедить вас, нажмите на вкладку «Текст» и посмотрите созданный 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, _));

И вот результат: