Intereting Posts
Когда загружается таблица метаданных пользователя? что делает мою тему совместимой с несколькими? Активация темы, создание таблиц базы данных Ограничьте пост для разных пользовательских типов сообщений в том же wp_query Используя get_posts, мне нужно использовать комбинацию отношений OR & AND Скрыть список mu-plugins Как добавить пользовательский CSS только к определенным виджетам Добавление the_date внутри тегов <p> вокруг the_content Как отобразить заголовок сообщения по идентификатору и его большому содержимому Multisite: нельзя создавать или создавать категории Дублированные сообщения, если сообщения имеют одинаковое значение мета и при использовании с параметром orderby. Только на моем сервере Предотвращение выполнения PHP в родительской теме Как подключиться к базе данных WordPress в плагине? Shortcode не работает после перемещения файлов сайта WordPress Несколько настроек регистра с таким же именем – проблема

wp.media.view.ImageDetails – Сохранить настройки как данные HTML5 – * атрибуты для изображения

То, что я, наконец, хочу достичь, – это дополнительные настройки, добавленные в поле «Детали изображения», которые будут храниться в <img> image <img> качестве атрибутов data-*

Пример: <img src="..." data-my_setting="...">


МОЙ КОД

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

 jQuery(function($) { var imageDetails = wp.media.view.ImageDetails wp.media.view.ImageDetails = wp.media.view.ImageDetails.extend({ // Initialize - Call function to add settings when rendered initialize: function() { this.on('post-render', this.add_settings); }, // To add the Settings add_settings: function() { $('.advanced-section').prepend('\ <h2>My Settings</h2>\ <input type="text" class="my_setting">\ '); // Set Options this.controller.image.set({"data-settings": 'setting-value-here'}) } }); }) // End of jQuery(function($)) 

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

введите описание изображения здесь

Все идет нормально. На этой строке:

this.controller.image.set({"data-settings": 'setting-value-here'})

Обычно я использовал jQuery для получения значения ввода, но для целей тестирования я изменил его на статическое значение 'setting-value-here' . Я нажал «Обновить» в нижнем правом углу окна «Сведения об изображении».


ПРОБЛЕМА

В текстовом редакторе он отображает код HTML следующим образом:

введите описание изображения здесь

У этого нет data-settings="setting-value-here" , как получилось?

Если я заменю строку следующим образом:

  this.controller.image.set({alt: 'setting-value-here'}) 

Он изменяет тег ALT на alt="setting-value-here" . Так что я делаю неправильно, пытаясь установить атрибут data- *?


РЕШЕНИЕ

Благодаря @bonger (который получил полную награду в 50 баллов), у меня есть следующий код:

PHP:

 function add_my_settings() { ob_start(); wp_print_media_templates(); $tpl = ob_get_clean(); if ( ( $idx = strpos( $tpl, 'tmpl-image-details' ) ) !== false && ( $before_idx = strpos( $tpl, '<div class="advanced-section">', $idx ) ) !== false ) { ob_start(); ?> <div class="my_setting-section"> <h2><?php _e( 'My Settings' ); ?></h2> <div class="my_setting"> <label class="setting my_setting"> <span><?php _e( 'My Setting' ); ?></span> <input type="text" data-setting="my_setting" value="{{ data.model.my_setting }}" /> </label> </div> </div> <?php $my_section = ob_get_clean(); $tpl = substr_replace( $tpl, $my_section, $before_idx, 0 ); } echo $tpl; }; // Hack the output of wp_print_media_templates() add_action('wp_enqueue_media', $func = function() { remove_action('admin_footer', 'wp_print_media_templates'); add_action('admin_footer', 'add_my_settings'); } ); 

JavaScript: (необходимо поставить в очередь с помощью wp_enqueue_script() )

 // When Image is Edited wp.media.events.on('editor:image-edit', function(data) { data.metadata.my_setting = data.editor.dom.getAttrib( data.image, 'data-my_setting' ); }); // When Image is Updated wp.media.events.on('editor:image-update', function(data) { data.editor.dom.setAttrib( data.image, 'data-my_setting', data.metadata.my_setting ); }); 

Solutions Collecting From Web of "wp.media.view.ImageDetails – Сохранить настройки как данные HTML5 – * атрибуты для изображения"

Способ сделать это – использовать (очень удобный) editor:image-edit и editor:image-update события editor:image-update инициируемые плагином wpeditimage чтобы получить / установить dom напрямую ( обновлено для wp_enqueue_media действие wp_enqueue_media ):

 add_action( 'wp_enqueue_media', function () { add_action( 'admin_footer', function () { ?> <script type="text/javascript"> jQuery(function ($) { if (wp && wp.media && wp.media.events) { wp.media.events.on( 'editor:image-edit', function (data) { data.metadata.my_setting = data.editor.dom.getAttrib( data.image, 'data-my_setting' ); } ); wp.media.events.on( 'editor:image-update', function (data) { data.editor.dom.setAttrib( data.image, 'data-my_setting', data.metadata.my_setting ); } ); } }); </script> <?php }, 11 ); } ); 

Чтобы добавить и заполнить поле настроек, возможно, более тяжело взломать вывод wp_print_media_templates() а не переопределить ImageDetails.initialize() ( обновленный для wp_enqueue_media действие wp_enqueue_media ):

 add_action( 'wp_enqueue_media', function () { remove_action( 'admin_footer', 'wp_print_media_templates' ); add_action( 'admin_footer', $func = function () { ob_start(); wp_print_media_templates(); $tpl = ob_get_clean(); // To future-proof a bit, search first for the template and then for the section. if ( ( $idx = strpos( $tpl, 'tmpl-image-details' ) ) !== false && ( $before_idx = strpos( $tpl, '<div class="advanced-section">', $idx ) ) !== false ) { ob_start(); ?> <div class="my_setting-section"> <h2><?php _e( 'My Settings' ); ?></h2> <div class="my_setting"> <label class="setting my_setting"> <span><?php _e( 'My Setting' ); ?></span> <input type="text" data-setting="my_setting" value="{{ data.model.my_setting }}" /> </label> </div> </div> <?php $my_section = ob_get_clean(); $tpl = substr_replace( $tpl, $my_section, $before_idx, 0 ); } echo $tpl; } ); } );