Менеджер Wordpress 3.5 Медиа - добавляет кнопку

В моем плагине я хотел бы добавить, две кнопки менеджеру Медиа (слева от "Вставляют В Сообщение" в раздел "media-toolbar-primary"), и подключите действие jQuery к нему.

  1. Сначала один - кнопка "Select All" shoud позволяют выбирать все availabe изображения (только изображения), в зависимости от выбранного значения опции (например, Объекты Всех носителей, Загруженные на Это сообщение и т.д.). Таким образом, если "Объекты Всех носителей" будет выбран - то все доступные изображения будут выбраны, если "Загруженный на Это сообщение" будет выбран - только отображает присоединенный к текущему сообщению, будет выбран.
  2. Второй - "Специальная вставка В Сообщение" - получит данные изображений для всех выбранных изображений (источник полного изображения, сопроводительный текст, размер и т.д., которые доступны), и позволяя переносить их в дополнительный HTML-код - код возврата tinymce редактору.

Возвращенный код для второй кнопки мог посмотреть этот путь:

<ul>
  <li><img src="full/path/to/001.jpg" alt="alt text 1" /></li>
  <li><img src="full/path/to/002.jpg" alt="alt text 2" /></li>
  <li><img src="full/path/to/003.jpg" alt="alt text 3" /></li>
  <li><img src="full/path/to/004.jpg" alt="alt text 4" /></li>
  <li><img src="full/path/to/005.jpg" alt="alt text 5" /></li>
</ul>

Насколько я понимаю, единственный путь состоит в том, чтобы использовать переопределение соответствующее представление Backbone, но около которого, это - все, которое я знаю на данный момент.

Спасибо за справку.

8
19.02.2013, 18:04
5 ответов

Этот блок кода добавит, что кнопка прямо рядом со "Вставляет в сообщение" один. При нажатии это отправит выбранные изображения редактору WP, каждый перенесенный в шаблоне HTML:

var wpMediaFramePost = wp.media.view.MediaFrame.Post;
wp.media.view.MediaFrame.Post = wpMediaFramePost.extend(
{
    mainInsertToolbar: function( view )
    {
        "use strict";

        wpMediaFramePost.prototype.mainInsertToolbar.call(this, view);

        var controller = this;

        this.selectionStatusToolbar( view );

        view.set( "customInsertIntoPost", {
            style: "primary",
            priority: 80,
            text: "Insert selected images into post",
            requires: { selection: true },

            click: function()
            {
                var state = controller.state(),
                    selection = state.get("selection")._byId,
                    template = _.template('<li><img src="<%= imagePath %>" alt="<%= altText %>" /></li>'),
                    output = "<ul>";

                _.each(selection, function( item )
                {
                    if( item.attributes.type === "image" )
                    {
                        output += template({
                            imagePath: item.attributes.sizes.full.url,
                            altText: item.attributes.alt
                        });
                    }
                });

                output += "</ul>";

                send_to_editor(output);
            }
        });
    }
});

Добавление пользовательской кнопки не является проблемой. Но выбирание "всех изображений" могло быть немного хитрым, потому что медиабраузер WP 3.5 загружает вложения поразрядно. Я изучу его, но я рекомендую выбрать вложения вручную.

11
19.02.2020, 22:01

Запишите маленький плагин, используйте следовать источник в качестве примера, чтобы добавить, что объект в списке левой боковой панели в менеджере медиа в наложении раскрывается.

Результат источника ниже: enter image description here

add_action( 'admin_footer-post-new.php', 'wpse_78881_script' );
add_action( 'admin_footer-post.php', 'wpse_78881_script' );
function wpse_78881_script() {
    ?>
    <script type="text/javascript">
        jQuery(window).on('load', function() {
            var media   = window.wp.media,  
            Attachment  = media.model.Attachment,
            Attachments = media.model.Attachments,
            Query       = media.model.Query,
            l10n        = media.view.l10n = typeof _wpMediaViewsL10n === 'undefined' ? {} : _wpMediaViewsL10n,
            My_new_item = undefined,
            Item_string = 'New Item!';

            jQuery(document).on( 'click', '.insert-media', function( event ) {
                var workflow = wp.media.editor.get();
                var options  = workflow.options;

                if ( undefined == My_new_item ) {
                    // see for wp.media.view.RouterItem also: wp-includes/js/media-views.js
                    My_new_item = new wp.media.view.RouterItem( _.extend( options, { text: Item_string } ) );
                    workflow.menu.view.views.set( '.media-menu', My_new_item, _.extend( options, { add: true } ) );
                }

            });
        });
    </script>
    <?php
}
6
19.02.2020, 22:01
  • 1
    Это - насколько я вижу способ добавить дополнительное положение меню на левой боковой панели. Таким образом, это - возможно, дорожный знак, но для рабочего решения с двумя кнопками, описанными рассматриваемый... Это все еще даже не близкий :( –  Marcin Bobowski 21.02.2013, 00:07
  • 2
    Да, всегда начинающий для нахождения правильного решения.Прошу прощения; Но у меня нет большего количества времени, и JS не является моим предпочтенным языком. Я добавляю ссылку для ответа сутью, там может помочь Вам больше. –  bueltge 21.02.2013, 11:48

У меня нет полного ответа на Ваш вопрос, но вот хорошее начало. Для настройки нового менеджера Медиа необходимо изучить Магистральный код JavaScript в wp-includes/js/media-views.js. Для exemple вот маленький плагин, который добавляет, что кнопка "Select All" к "Вставляет от URL" Панель инструментов:

custom.php:

add_action('admin_enqueue_scripts', 'custom_add_script');
function custom_add_script(){
    wp_enqueue_script('custom', plugins_url('custom.js', __FILE__), array('media-views'), false, true);
}

custom.js:

var originalToolbar = wp.media.view.Toolbar.Embed;
wp.media.view.Toolbar.Embed = originalToolbar.extend({
    // code modified from media-views.js, l 2500
    initialize: function() {

        this.options.items = _.defaults( this.options.items || {}, {
            // keep the original button
            select: {
                style:    'primary',
                text:     wp.media.view.l10n.insertIntoPost,
                priority: 80,
                click:    this.clickSelect,
                requires: false
            },
            // and add a new one
            selectAll: {
                text: 'Select All',
                style: 'primary',
                priority: 80,
                requires: false,
                click: this.selectAll
            }
        });

        wp.media.view.Toolbar.Select.prototype.initialize.apply( this, arguments );
    },

    selectAll: function(){
        console.log('select All');
    }
});

Для кнопки "Custom insert into post" я предлагаю использовать галерею shortcode вместо этого. UI уже существует, чтобы выбрать желаемые изображения и вставить shortcode в правильном месте в tinymce. Все, что необходимо сделать, должно записать собственную галерею shortcode формат.

Смотрите на gallery_shortcode функция в wp-includes/media.php и используйте post_gallery фильтр.

3
19.02.2020, 22:01
  • 1
    Спасибо Fabien. Работа Иллинойса над кодом Вы, если, пытаясь смешать его с ответом от aesque. К сожалению, может быть только один победитель, и он был первым. Спасибо за справку. –  Marcin Bobowski 26.02.2013, 05:26

Thomas Griffin создал сменный пример, Новый Загрузчик Изображения Медиа, о том, как работать с новым менеджером медиа.

Этот плагин обеспечивает твердый пример для интеграции нового рабочего процесса менеджера медиа в Ваши плагины/темы путем показа Вам, как загрузить/вставить файл изображения в текстовое поле.

3
19.02.2020, 22:01
  • 1
    Это - довольно интересное, но все о добавляющем метаполе с входом и кнопкой для загрузки media_manager. И моя проблема о добавляющих элементах к самому media_manager. Но тем не менее, довольно полезная вещь. –  Marcin Bobowski 14.01.2013, 13:04

Я только что встретился со случаем в WP 3.6, где (очень полезный) ответ aesqe приводит к изображениям, вставляемым дважды из-за магистрали state.get("selection")._byId включая обоих id и cid для каждого выбранного изображения.

Изменение state.get("selection")._byId кому: state.get("selection").models зафиксированный это для меня при сохранении атрибутов каждого объекта.

Надо надеяться, это сэкономит кому-то некоторые нервы. Я отправил бы это как комментарий вместо ответа, но, увы, у меня нет репутации.

2
19.02.2020, 22:01
  • 1
    Это намного лучше как Превосходный :) –  Michal Mau 29.08.2013, 19:01

Теги

Похожие вопросы