Steve Taylor photo

WordPress hacks and tips: Media

First off, hi to anyone who’s been reading my occasional posts here. I’ve just redesigned my site and I’m hoping to blog here a little more regularly. I’ve opened up the comments, so please say hello; I’m especially interested in anyone else working on similar things in WordPress who has ideas to add to my own.

I’m going to post a series of collections of code snippets and tips from my recent work with WP. I’ll try and group them together logically, though I’ll certainly end up with a “bits and bobs” post. I’ll also try and keep each post updated as I learn new stuff.

Many of the tips come from my current habit, when developing custom WP themes for clients, of minimizing plugins. If I can add a bit of code to functions.php rather than install a plugin, I’ll often do the former. Plugins are of course fantastic for more complex modifications, or for offering specific hacks to people who aren’t comfortable editing their theme’s PHP. But if neither of these apply, and the modification is very simple, it seems that it’s worth just slipping the code into your custom theme. Many of these snippets are just included in my default theme “skeleton”, which I edit as necessary for each project.

I should also stress that not all of these are results of my own ingenuity. I’ll credit people where possible, but often I’ve forgotten the source of the code.

OK, without further ado, here’s some media-related stuff.

Disabling image captions

A recent version of WP—2.6 I believe—introduced automatic image captions. Kind of a nice idea, but badly implemented. It offers fields for the title and alt attributes of any image you upload and insert. Contrary to the W3C specs, it requires the former, but not the latter. If you do enter alt text, it’s used to insert a caption—when the alt text is specifically for what you see when you can’t see the image. More suited to a caption is title.

Hopefully this’ll be addressed in a future WP version. Meantime, to completely disable the captioning system, add this line to functions.php in your theme:

add_filter( 'disable_captions', create_function( '$a','return true;' ) );

No Flash uploader

I don’t see the real advantage of the Flash-based file uploader in WP. Conversely, it often causes problems, e.g. when I have a dev site behind .htaccess password protection. Here’s a line for functions.php to disable it:

add_filter( 'flash_uploader', create_function( '$a','return false;' ), 5 );

Media Library URL column

NOTE: Please see this post for a much-improved version of this code.

It’s odd that the WP Media Library doesn’t offer the full URL of each original file. I’ve found a few situations where it’s useful for clients to have easy access to this. Here’s some functions.php code to add a column to the library list that outputs this URL:

function muc_column( $cols ) {
	$cols["media_url"] = "URL";
	return $cols;
}
function muc_value( $column_name, $id ) {
	if ( $column_name == "media_url" ) echo wp_get_attachment_url( $id );
}
add_filter( 'manage_media_columns', 'muc_column' );
add_action( 'manage_media_custom_column', 'muc_value', 10, 2 );

Get image for post or page

Here’s a function I developed for grabbing any version of the first image uploaded into a post or page. I usually use it for outputting a list of featured posts, say, with a thumbnail for each, but it can have many other uses.

Bear in mind that images are associated with a post or page when they’re uploaded through that post’s edit screen. You can drop images in anywhere that are already associated with another post, but they’ll keep their association with the original one.

This function will take a post ID, and an image size keyword, and return the URL of the first image associated with that post. Possible values for the size are: thumbnail (default), medium, large or full. It returns an empty string if there’s nothing to return.

function getImage( $postID, $size = "thumbnail" ) {
	$images = get_children( "post_parent=$postID&post_type=attachment&post_mime_type=image" );
	if ( $images ) {
		foreach( $images as $image_id => $image_infos ) {
			$the_image = wp_get_attachment_image_src( $image_id, $size );
			if ( $the_image ) {
				return $the_image[0];
				break;
			}
		}
	}
	return "";
}

9 comments

  1. Timothy avatar Timothy

    Steve, I’ve been looking everywhere for a way to output the URL for the full size and thumbnail images in the media library. So you’ve gotten me halfway there! Is there a way to add the thumbnail URL? It might also look nicer to have the URL linked to a line of text like “Full image URL” instead of outputting the whole URL.

  2. Steve Taylor avatar Steve Taylor

    Tim, good question. I guess wp_get_attachment_thumb_url could help you out in adapting the above code snippet to your purposes. Though wp_get_attachment_image_src might be more flexible if you’re just concerned with images and need to output the URL to various sizes of the original.

    As to your second point, adapting the muc_value function above should easily allow this.

  3. Timothy avatar Timothy

    Well I figured out what I wanted to do, but I’m getting an annoying URL: /wp-content/uploads/2009/08/timothy.jpg%22
    How do I remove the “%22” at the end??
    // Media Library URL column
    function muc_column( $cols ) {
    $cols["media_url"] = "URL";
    return $cols;
    }
    function muc_value( $column_name, $id ) {
    if ( $column_name == "media_url" )
    echo 'Fullsize LinkThumbnail Link';
    }
    add_filter( 'manage_media_columns', 'muc_column' );
    add_action( 'manage_media_custom_column', 'muc_value', 10, 2 );

  4. Steve Taylor avatar Steve Taylor

    %22 seems to be the URL escape code for a quote mark. I’m not sure how it’s getting into your URL output. What code are you actually using to output the links? (Remember to escape angle brackets in HTML posted!)

  5. lex avatar lex

    Great post! Very handy…however, I was on the search for something similar: how get the media library NOT to store the original file? Any suggestions?

    Cheers!

  6. Steve Taylor avatar Steve Taylor

    Lex, not had the need for that before. To keep the resized versions but not the original? I guess I can see the use if you don’t want to store anything larger than the largest size you set. But I imagine ditching the original might be tricky. Maybe look for a plugin to control the max size of uploads, if storage space is the concern? Still, it’d be nice to allow the upload to get the smaller versions AND not use up loads of space. Well, good luck!

  7. Lewis avatar Lewis

    Not sure if this helps Timothy nor how clean it is but this displays links to the image sizes and just the links for documents:
    function muc_column( $cols ) {
    $cols["media_url"] = "View";
    return $cols;
    }
    function muc_value( $column_name, $id ) {
    if ( $column_name == "media_url" ) {
    $full = wp_get_attachment_image_src( $id, 'full', '' );
    if (is_array($full)) {
    $medium = wp_get_attachment_image_src( $id, 'medium', '' );
    $thumb = wp_get_attachment_image_src( $id );
    echo "<a href='".$full[0]."' title='Large'>Large</a> | ";
    echo "<a href='".$medium[0]."' title='Medium'>Medium</a> | ";
    echo "<a href='".$thumb[0]."' title='Thumbnail'>Thumbnail</a>";
    } else {
    echo "<a href='".wp_get_attachment_url( $id )."' title='Large'>".wp_get_attachment_url( $id )."</a> ";
    }
    }
    }
    add_filter( 'manage_media_columns', 'muc_column' );
    add_action( 'manage_media_custom_column', 'muc_value', 10, 2 );

  8. Jim avatar Jim

    Hi Steve, nice post. On the image alt text though, I think you might want to reconsider. Though I understand reasoning and logic behind your criticism you also have to consider that the alt text is an important function for web browsing for the visually impaired. It’s a small minority of users, true, but they are out there and they rely on alt tags when reading web pages.

  9. Hi Jim, thanks for the comment but I’m not sure I follow your point. If you’re talking about the bit on disabling image captions, what I’m saying here is the WP (on 2.6 at least – a while back! Maybe it’s changed?) uses the alt text for captions, which is illogical. As you say, alt text is mainly for accessibility issues such as visual impairment; title seems more suited as a value to contain a caption that is displayed next to the image. Disabling image captions has no effect on alt text. Furthermore, I’m implicitly arguing here for better support of alt – WP’s system of requiring a title but not an alt is contrary to W3C specs.

Comments are closed.