0

WordPress generates several thumbnail sizes and adding custom image sizes in a theme is great, but is there a way to view all URLs for a given image in WP, ideally right in the media library popup?

Currently if I want the "large" thumbnail URL of an image, I have to edit/add a Page/Post, add the image to the page, view the text editor and copy the URL out of the inserted <img src="goal_url.jpg" />. Not very convenient!

For example, I'd use this to share a specific image crop on social media or to paste the correct URL in a theme/ plugin that doesn't use the media library correctly.

WP gives the full url src in the media popup, I'm looking for the thumbnail sizes as well.

0

This is the solution I came up with - it replaces WP's default Full URL input with a list of any supplied thumbnail sizes right in the media library popup.

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
}

The basic idea is to override the WordPress-supplied media modal layout template (found in /wp-includes/media-template.php.

We hook into print_media_templates which displays several HTML templates in <script> elements to be used by I believe Backbone.js. Specifically, we care about the script#tmpl-attachment-details-two-column and script#tmpl-attachment-details templates.

We add a new template (here, script#ezific-tmpl-attachment-url-list") which holds the HTML to display the image sizes. This snippet uses the image_size_names_choose hook to filter which thumbnail sizes are shown.

Then it's just a mattter of grabbing the template text from the WordPress provided templates, regex-replace in our new HTML and WordPress is no the wiser, it displays our new image sizes right where it originally displayed only the full URL.

I also added a quick link to show/hide the links, since the list could get fairly long theoretically.

|improve this answer|||||
0

I have a plugin I made for multisites, but it should work in single sites also. It shows all pix in the media library as thumbnails. If you have admin rights, click on the pix to get to the edit page.

I use it to check the pictures on my multisite, so I can rotate if needed (and get rid of any pix that don't meet the site TOS). Lots of options to specify. Uses a shortcode on a page to display.

Called Multisite Media Display. There are others that I wrote that show all posts. And more. Use plugin support area for any questions. https://wordpress.org/plugins/multisite-media-display/ . Free for all, no hidden/premium features.

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.