Steve Taylor photo

WordPress Media Library URLs

Many, many times in my custom WordPress development, there are situations where I have to ask clients to grab the URL for an image from the Media Library. Maybe to paste into a widget or a custom field? In any case, to get the URL of the file, by default in WP you have to edit the media first—you get a read-only input called File URL.

Wouldn’t it be easier if the URL was output in the main list? I posted some code here a while ago to do this. But what if you want to make the URLs for all the different sizes of images in the Media Library available? I thought I’d revamp my code to tackle this and post it afresh here.

So, here’s the code. As ever, it should be pasted into the functions.php file of your active theme.

// Add the media URL column
function slt_mediaURLColumn( $cols ) {
	$cols["media_urls"] = "Media URLs";
	return $cols;
}
add_filter( 'manage_media_columns', 'slt_mediaURLColumn' );

// Populate the media URL column
function slt_mediaURLValue( $column_name, $id ) {
	if ( $column_name == "media_urls" ) {
		if ( wp_attachment_is_image( $id ) ) {
			global $_wp_additional_image_sizes;
			$sizes = array( "full", "large", "medium", "thumbnail" );
			if ( count( $_wp_additional_image_sizes ) ) {
				foreach ( $_wp_additional_image_sizes as $additional_image_size_label => $additional_image_size_info )
					$sizes[] = $additional_image_size_label;
			}
			echo '<a href="#">View &amp;raquo;</a>';
			echo '<div class="box" id="image-urls-' . $id . '">';
			foreach( $sizes as $size ) {
				$image_src = wp_get_attachment_image_src( $id, $size );
				echo '<b>' . ucfirst( $size ) . ':</b><br /><input readonly="readonly" type="text" value="' . $image_src[0] . '" /><br />';
			}
			echo '</div>';
		} else {
			echo '<input readonly="readonly" type="text" value="' . wp_get_attachment_url( $id ) . '" />';
		}
	}
}
add_action( 'manage_media_custom_column', 'slt_mediaURLValue', 10, 2 );

// Media URLs CSS and JS
function slt_mediaURLCSSJS() { ?>
	<style type="text/css">
	td.column-media_urls div.box { display: none; padding: 5px; background-color: #f9f9f9; border: 1px solid #ccc; }
	tr.alternate td.column-media_urls div.box { background-color: #fff; }
	td.column-media_urls input { width: 100%; font-size: 11px; }
	</style>
	<script type="text/javascript">/* <![CDATA[ */
	jQuery( document ).ready( function($) {
		if ( $( "td.column-media_urls" ).length ) {
			$( "td.column-media_urls a" ).click( function() {
				if ( $( this ).siblings( "div.box" ).is( ":visible" ) ) {
					$( this ).siblings( "div.box" ).slideUp( "fast" );
				} else {
					$( "td.column-media_urls div.box" ).slideUp( "fast" );
					$( this ).siblings( "div.box" ).slideDown( "fast" );
				}
				return false;
			});
			$( "td.column-media_urls input" ).click( function() {
				$( this ).select();
			});
		}
	});
	/* ]]> */</script>
<?php }
add_action( 'admin_head', 'slt_mediaURLCSSJS' );

The first function adds the column, the second function fills the column. First, we test to see if the media is an image. If it isn’t (e.g. it’s PDF), only the URL is output. If it is an image, we output a little link intended to fold out a box contained the URLs for all the sizes.

Note that I’ve put the URLs into read-only form inputs. This just keeps thing neat. Also, lines 12–17 ensure that even if someone has defined non-standard sizes for images, using the post thumbnails feature, they’ll be included, too.

At the end, we hook into the admin’s header to add some CSS and JavaScript. Just a bit of jQuery to toggle the image URLs boxes, and to make the URLs automatically selected when you click on one of the inputs.

Comments, bug reports and improvements welcome!

13 comments

  1. hi Steve, this is a really neat solution

    I had to add return false; after line 48 to stop the page scrolling back to the top when I clicked on the View » links.

    Hope you’re keeping busy!
    Dan

  2. You’re right, Dan, thanks for that. Keeping very busy – obviously too busy to remember to return false from an anchor tag onclick! ;-)

  3. I was interested in this code – as it is, the column is added, but the click is like #, nothing happens at all.

    actually, my main interest is a column that merely shows the image’s dimensions, if you’re interested in diverting a bit for that idea.

    Thanks,
    phil

  4. Hi Phil, not sure what that problem could be—do you get a JavaScript error? Image dimensions would be nice, and I imagine very straight-forward based on the above code. If you beat me to it, let me know!

  5. Hi steve,
    I have some problem with media library. Could you help me?
    With the new dashboard GUI (which I like, BTW), I find it easier to add items to my Media Library and edit them.
    However, when viewing the library, and right-clicking an item, and using “Copy Link”, I fetch a URL that cannot be used (with proper results) in an href in my blog.

  6. Hi Katrina, sorry but I’m not sure I follow your problem. What are you right-clicking? The above code should provide a “View” link which, when clicked with the left mouse button as normal, opens up a series of inputs with URLs in. If you just click on any of these inputs, it should gain focus so you can just copy it and use it.

  7. Troy J avatar Troy J

    This script worked perfectly for me. I didn’t expect to find this kind of additional functionality. Thanks

  8. Pavel avatar Pavel

    A great, great post. And thanks a lot for it!

    I’m thinking of implementing even greating convenience but due to lack of exp not sure how it may be done so far.

    The logic is: user places name of uploaded media file in a shortcode inside of, say, widget and code does the rest, meaning:
    1) via $wpdb it gets array of all media (where key is Name and val=URLs). iterates through it searching for same name.
    2) once found, gets that key’s val.
    3) displays it in place of the name, meaning that it outputs the required url.

    Planned to be super convenient im not sure how to implement this – maybe you will have the idea -)

  9. Pavel, first thing, do check out the Codepress Admin Columns. It has an “Upload paths” column for media that isn’t the same as the above code, but is similar. And the rest of the plugin is so useful, it’s a must.

    Regarding selecting images in widgets, my Developer’s Custom Fields plugin comes with a function that will place a “Select file” button – which invokes the media library pop-up, allowing easy selection. I’m not sure if it will work in a widget – but if it doesn’t, I think it’s probably best to Google for a similar solution for widgets. It’s possibly a little trickier, but it makes things MUCH easier for clients using the system!

  10. Pavel avatar Pavel

    Hi Steve. Actually that thing turned out to be pretty easy -)
    i declared global post in slt_mediaURLValue print_r’ed it and figured out that $post->post_name and $post->guid actually hold those values needed.

    What’s currently left is when array ABC with key=post_name and value=url is ready i just need to run through it inside widget code and change all corresponding post_names to urls there.

    This second paragraph sounds pretty easy though i can’t pass array ABC in other functions for some reason. Didn’t yet have time to play with that.

    Anyway thanks for the reply i’ll check that func for sure it seems to be what i need or veery close to it ;) Cheers)

  11. Pavel avatar Pavel

    urgh sorry for repeated comment – not the widget* code, but shortcode* code -))

Leave a comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>