Используйте AJAX для получения миниатюры текущего поста в WordPress при загрузке через медиагрузчик на фронтенде.

Я использую загрузчик медиафайлов WordPress на фронтенде, чтобы пользователи могли загружать миниатюры для своего сайта UGC. Я также отображаю предварительный просмотр изображения на фронтенде. Когда пользователь нажимает кнопку, открывается загрузчик медиафайлов, пользователь загружает изображение, устанавливает его как выделенное изображение, и всё готово. Но предварительный просмотр изображения всё еще показывает старое изображение.

У меня есть сайт на WordPress, основанный на контенте, созданном пользователями, где люди могут создавать посты через форму на фронтенде.

Когда пользователь обновляет выделенное изображение на фронтенде с помощью загрузчика медиафайлов, как мне обновить предварительный просмотр новым изображением?

Ниже представлен код для загрузчика медиафайлов, который пользователи используют для загрузки выделенного изображения:

            $uparms="?post_id=" . $post_id;
            $uparms .= '&' . 'type=image';
            $uparms .= '&' . 'TB_iframe=1';
            //$uparms .= '&'.'inline=1';
            $uparms .= '&' . 'tab=library';

echo '<a class="Thumbnail-Upload-Button thickbox"  title="' . __("Выбрать выделенное изображение") . '" href="' . site_url('/wp-admin/media-upload.php') . $uparms . '" id="frontier-post-select-thumbnail set-post-thumbnail" name="set-post-thumbnail"></div>';

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

echo '<img class="milyin-field milyin-thumbnail-true" align="center" style="padding:0 !Important; width:100vw;  min-height:250px; object-fit:contain; " src="';
echo get_the_post_thumbnail_url($post_id, 'hestia_blogs', array(
                                                          'class' => 'milyin-post-feat-img'
                                                         ));
echo '"> ';

Теперь приходит трудная часть

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

Я использую WordPress Thickbox для появления загрузчика медиафайлов, поэтому, на мой взгляд, лучшая стратегия будет заключаться в том, чтобы проверять каждый раз, когда Thickbox закрывается, JS проверяет сервер и находит URL миниатюры, а затем вставляет этот URL в атрибут “SRC” моего предварительного просмотра <img class="milyin-thumbnail-true" />

Пожалуйста, помогите мне реализовать это или предложите другую, по вашему мнению, лучшую стратегию.

Я использую сильно модифицированную версию плагина Frontier Post для WordPress…

Кнопка, закрывающая Thickbox, имеет class="tb-close-icon", поэтому при нажатии на эту кнопку нам нужно получить URL миниатюры текущего поста…

Моя ссылка на сайт: 17 секретов, как я оптимизировал свой сайт на WordPress для загрузки за 927 мс (100% GTMetrix)

Итак,

Вопросе вы указали, что код должен выполняться при закрытии thickbox.

Мы можем решить вашу проблему двумя способами: первый — это проверять изменение URL миниатюры каждые x секунд и обновлять изображение, если URL меняется, это работает хорошо, но требует много данных, поэтому я не могу это рекомендовать.

Второй способ — использовать событие закрытия thickbox, чтобы каждый раз при закрытии thickbox запускать AJAX-запрос, который возвращает URL миниатюры, и этот URL затем вставляется в содержимое.

jQuery(".Thumbnail.Close").click(function(){
jQuery.ajax({
url: "/wp-admin/admin-ajax.php",
type: "POST",
data: {'ID' : '<?php echo $thispost->ID; ?>', 'action': 'Featured_Image'},
dataType:'json',
success: function(response){
        console.log(response['img']);
        jQuery('.Thumbnail-IMG').attr('src', response['img']);
}
});

Здесь я предполагаю, что класс для закрытия thickbox — .Thumbnail.Close. Я протестировал этот код на обычном iFrame, потому что большинство читателей, вероятно, будут использовать обычную реализацию iFrame.

Таким образом, когда кнопка закрытия миниатюры нажата, мы запускаем AJAX-запрос, здесь я использовал PHP, чтобы вставить ID поста в данные JS, если вы хотите делать это иначе, вы можете использовать скрытое поле ввода для хранения ID поста, а затем получить его с помощью JS тоже.

Следующий момент — вот код для части PHP AJAX.

function Featured_Image(){
        if (has_post_thumbnail($_POST['ID'])) {
            $return_data= array('img'=> get_the_post_thumbnail_url($_POST['ID'], 'full'));
        }
         wp_send_json($return_data);
        exit;
}

add_action( 'wp_ajax_nopriv_Featured_Image', 'Featured_Image' );

add_action( 'wp_ajax_Featured_Image', 'Featured_Image' );