Uzyskaj adresy URL miniatur obrazów w bibliotece multimediów
![Uzyskaj adresy URL miniatur obrazów w bibliotece multimediów](https://oen.pl/wp-content/uploads/2023/01/apple-touch-icon@2.png)
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.
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.