WordPress

Uzyskaj adresy URL miniatur obrazów w bibliotece multimediów

  • 22 czerwca, 2019
  • 3 min read
Uzyskaj adresy URL miniatur obrazów w bibliotece multimediów


To jest rozwiązanie, które wymyśliłem – zastępuje domyślne wejście pełnego adresu URL WP listą dowolnych dostarczonych rozmiarów miniatur bezpośrednio w wyskakującym okienku biblioteki multimediów.

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

/* // The prior URL HTML; /wp-includes/media-template.php
    // found with regex in variable old_html_regex below
<label class="setting" data-setting="url">
                    <span class="name">Copy Link</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" );

            // Loop through the script elements and swap in the new HTML
            existing_tmpls.each(function() {
                text = jQuery(this).text();
                text = text.replace( old_html_regex, the_url_list );
                jQuery(this).text( text );
            });

            // Add show/hide toggle
            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">Show All URLS</a>
            <div id="ezific-image-urls-hold" style="display: none;">
                <?php
                $sizes = apply_filters( 'image_size_names_choose', array(
                    'thumbnail' => __('Thumbnail'),
                    'medium'    => __('Medium'),
                    'large'     => __('Large'),
                    'full'      => __('Full Size'),
                ) );
                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
}

Podstawową ideą jest zastąpienie szablonu modalnego układu multimediów dostarczonego przez WordPress (znajdującego się w /wp-includes/media-template.php.

Warto przeczytać!  tworzenie wtyczek - przesyłanie obrazu do biblioteki multimediów wordpress nie powiodło się dla niestandardowego typu postu

Wpinamy się print_media_templates który wyświetla kilka szablonów HTML w <script> elementów, które mają być używane przez, jak sądzę, Backbone.js. W szczególności zależy nam na script#tmpl-attachment-details-two-column oraz script#tmpl-attachment-details szablony.

Dodajemy nowy szablon (tutaj, script#ezific-tmpl-attachment-url-list"), który zawiera kod HTML do wyświetlania rozmiarów obrazu. Ten fragment wykorzystuje image_size_names_choose hak, aby odfiltrować, które rozmiary miniatur są wyświetlane.

Następnie wystarczy pobrać tekst szablonu z szablonów dostarczonych przez WordPress, zamienić wyrażenie regularne w naszym nowym kodzie HTML, a WordPress nie jest mądrzejszy, wyświetla nasze nowe rozmiary obrazów dokładnie tam, gdzie pierwotnie wyświetlał tylko pełny adres URL.

Dodałem również szybki link, aby pokazać/ukryć linki, ponieważ teoretycznie lista mogłaby być dość długa.


Źródło