Вопрос или проблема
Я хочу иметь медиа-рамку, которая появляется при нажатии на кнопку на существующей медиа-рамке. Таким образом, я могу связать другое вложение с этим вложением.
Вот мой код с кликом, исходящим от селектора на исходной рамке.
jQuery('*[id*=attachment_link]').on('click', function( event ){
event.preventDefault();
// Если медиа-рамка уже существует, откройте ее снова.
if ( file_frame ) {
// Установите ID поста на то, что нам нужно
file_frame.uploader.uploader.param( 'post_id', set_to_post_id );
// Откройте рамку
file_frame.open();
return;
} else {
// Установите ID поста wp.media, чтобы загрузчик захватывал нужный нам ID при инициализации
wp.media.model.settings.post.id = set_to_post_id;
}
// Создайте медиа-рамку.
file_frame = wp.media.frames.file_frame = wp.media({
title: 'Выберите изображение для загрузки',
button: {
text: 'Использовать это изображение',
},
multiple: false // Установите на true, чтобы разрешить выбор нескольких файлов
});
// Когда выбирается изображение, выполняется обратный вызов.
file_frame.on( 'select', function() {
// Мы установили multiple в false, чтобы получить только одно изображение от загрузчика
attachment = file_frame.state().get('selection').first().toJSON();
// Сделайте что-то с attachment.id и/или attachment.url здесь
//$( '#image-preview' ).attr( 'src', attachment.url ).css( 'width', 'auto' );
$( '*[id*=attachment_link]' ).val( attachment.id );
// Восстановите основной ID поста
wp.media.model.settings.post.id = wp_media_post_id;
});
// Наконец, откройте модальное окно
file_frame.open();
});
// Восстановите основной ID, когда нажата кнопка добавления медиа
jQuery( 'a.add_media' ).on( 'click', function() {
wp.media.model.settings.post.id = wp_media_post_id;
});
});
Этот вопрос показывает пример того, как можно иметь две медиа-рамки по двум причинам.
Ответ или решение
Конечно, я рад помочь вам разобраться в вопросе открытия медиа-рамки для выбора вложения, которое можно ассоциировать с другим редактируемым вложением. Рассмотрим ваш код и необходимые шаги для достижения вашей цели, а также проанализируем, как это можно улучшить и адаптировать для ваших нужд.
Введение
Ваша задача заключается в необходимости открытия новой медиа-рамки при нажатии на кнопку в существующей рамке. Это позволит пользователю выбирать дополнительные вложения и связывать их с уже существующими. Давайте подробно рассмотрим ваш код и необходимые настройки.
Анализ вашего кода
Ваш код имеет следующие ключевые элементы:
- Событие клика: Использование селектора для активации события клика.
- Проверка существования медиа-рамки: Предотвращение создания новой рамки, если аналогичная уже существует.
- Инициализация медиа-рамки: Настройка параметров, таких как заголовок, кнопка и возможность множественного выбора.
- Обработка выбора: Когда пользователь выбирает изображение, вы выполняете определенные действия с его ID и URL.
Рекомендации по улучшению
-
Создание нового экземпляра медиа-рамки:
Убедитесь, что вы правильно инициализируете новое окно для выбора вложения, если рамка еще не была создана. Это позволяет избежать лишнего кода и улучшает структуру вашего кода. -
Использование модификаторов:
Вы можете добавлять дополнительные функции для обработчиков событий, что улучшит читаемость и управление кодом. -
Значения по умолчанию:
Убедитесь, что значения по умолчанию дляpost.id
правильно устанавливаются каждый раз, когда пользователь открывает медиа-рамку. Это позволит избежать путаницы с предыдущими выборами.
Пример улучшенного кода
Вот как вы можете модернизировать ваш код с учетом вышеизложенных рекомендаций:
jQuery(document).ready(function($) {
var file_frame; // Объявляем глобальную переменную для медиа-рамки
var wp_media_post_id = wp.media.model.settings.post.id; // Сохраняем текущий ID поста
// Обработчик клика по элементу
$('*[id*=attachment_link]').on('click', function(event) {
event.preventDefault();
// Если рамка уже существует, переоткрываем её
if (file_frame) {
file_frame.uploader.uploader.param('post_id', set_to_post_id);
file_frame.open();
return;
}
// Устанавливаем ID поста для медиа-рамки
wp.media.model.settings.post.id = set_to_post_id;
// Создаем новую медиа-рамку
file_frame = wp.media({
title: 'Выберите изображение для загрузки',
button: {
text: 'Использовать это изображение',
},
multiple: false // Отключаем множественный выбор
});
// Обработка выбора изображения
file_frame.on('select', function() {
var attachment = file_frame.state().get('selection').first().toJSON();
// Здесь вы можете обработать attachment.id и/или attachment.url
$('*[id*=attachment_link]').val(attachment.id);
// Можно также обновить предварительный просмотр изображения
$('#image-preview').attr('src', attachment.url).css('width', 'auto');
// Восстанавливаем оригинальный ID поста
wp.media.model.settings.post.id = wp_media_post_id;
});
// Открываем модальное окно
file_frame.open();
});
// Восстанавливаем первоначальный ID, когда нажимается кнопка добавления медиа
$('a.add_media').on('click', function() {
wp.media.model.settings.post.id = wp_media_post_id;
});
});
Заключение
С вышеизложенными улучшениями ваш код станет более структурированным и легким для понимания. Убедитесь, что вы постоянно проверяете свой код на наличие ошибок, особенно при работе с медиа-рамками, чтобы гарантировать стабильность и функциональность.
Если у вас есть дополнительные вопросы или вам нужна помощь с другими аспектами внедрения, не стесняйтесь обращаться. Успехов в разработке!