Получить URL-адреса миниатюр изображений в медиабиблиотеке

WordPress генерирует несколько размеров миниатюр, и добавление пользовательских размеров изображений в тему – это здорово, но есть ли способ просмотреть все URL для данного изображения в WP, желательно прямо в всплывающем окне медиабиблиотеки?

В настоящее время, если я хочу получить URL миниатюры “large” изображения, мне нужно редактировать/добавлять страницу/пост, добавить изображение на страницу, просмотреть текстовый редактор и скопировать URL из вставленного <img src="https://wordpress.stackexchange.com/questions/341220/goal_url.jpg" />. Это не очень удобно!

Например, я бы использовал это для того, чтобы поделиться определенным обрезанным изображением в социальных сетях или вставить правильный URL в тему/плагин, который неправильно использует медиабиблиотеку.

WP предоставляет полный URL src во всплывающем окне медиа, я ищу также размеры миниатюр.

Это решение, которое я придумал — оно заменяет стандартный ввод полного URL от WP на список любых предоставленных размеров миниатюр прямо во всплывающем окне медиабиблиотеки.

add_action( 'print_media_templates', 'ezific_media_tmpl_image_thumbnail_urls' );
function ezific_media_tmpl_image_thumbnail_urls() {

/* // HTML предыдущего URL; /wp-includes/media-template.php
    // найден с помощью регулярного выражения в переменной old_html_regex ниже
<label class="setting" data-setting="url">
                    <span class="name">Скопировать ссылку</span>
                    <input type="text" value="{{ data.url }}" readonly />
                </label>
                */
    ?>
    <script>
        jQuery( document ).ready( function( $ ){
            var text = "",
                old_html_regex = /<label class="setting" data-setting="url">.*<\/label>/gms,
                the_url_list = jQuery( "script#ezific-tmpl-attachment-url-list" ).text(),
                existing_tmpls = jQuery( "script#tmpl-attachment-details-two-column, script#tmpl-attachment-details" );

            // Проходим циклом по элементам скрипта и заменяем старый HTML на новый
            existing_tmpls.each(function() {
                text = jQuery(this).text();
                text = text.replace( old_html_regex, the_url_list );
                jQuery(this).text( text );
            });

            // Добавляем переключатель показать/скрыть
            jQuery( "body" ).on("click", "#ezific-toggle-urls", function(e){
                e.preventDefault();
                jQuery( "#ezific-image-urls-hold" ).toggle();
            });
        });
    </script>

    <script type="text/template" id="ezific-tmpl-attachment-url-list">
        <div class="setting" id="ezific-image-urls">
            <a href="#" id="ezific-toggle-urls">Показать все URL</a>
            <div id="ezific-image-urls-hold" style="display: none;">
                <?php
                $sizes = apply_filters( 'image_size_names_choose', array(
                    'thumbnail' => __('Миниатюра'),
                    'medium'    => __('Средний'),
                    'large'     => __('Большой'),
                    'full'      => __('Полный размер'),
                ) );
                foreach ( $sizes as $value => $name ) : ?>
                    <#
                    var size = data.sizes['<?php echo esc_js( $value ); ?>'];
                    if ( size ) { #>
                    <span class="setting">
                        <label for="attachment-details-copy-link-<?php echo esc_attr( $value ); ?>" class="name" style="float:left;"><?php echo esc_attr( $name ); ?></label>
                        <input type="text" id="attachment-details-copy-link-<?php echo esc_attr( $value ); ?>" value="{{ size.url }}" readonly />
                    </span>
                    <# } #>
                <?php endforeach; ?>
            </div>
        </div>
    </script>

    <?php
}

Основная идея заключается в том, чтобы переопределить ресурсный шаблон макета медиа-модали, предоставленный WordPress (находится по адресу /wp-includes/media-template.php).

Мы подключаемся к print_media_templates, который отображает несколько HTML шаблонов в элементах <script>, которые используются, как я полагаю, Backbone.js. В частности, нас интересуют шаблоны script#tmpl-attachment-details-two-column и script#tmpl-attachment-details.

Мы добавляем новый шаблон (здесь script#ezific-tmpl-attachment-url-list"), который содержит HTML для отображения размеров изображений. Этот фрагмент использует image_size_names_choose хук, чтобы отфильтровать, какие размеры миниатюр будут показаны.

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

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

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

Я использую его для проверки изображений на своем мультисайте, чтобы при необходимости вращать их (и избавиться от любых изображений, которые не соответствуют правилам сайта). Много опций для задания. Использует короткий код на странице для отображения.

Называется Multisite Media Display. Есть и другие, которые я написал, показывающие все посты. И еще. Используйте раздел поддержки плагина для любых вопросов. https://wordpress.org/plugins/multisite-media-display/. Бесплатно для всех, без скрытых/премиум функций.