The behaviour is common practice now, not only for single-field forms like search inputs, but entire ten-plus field information gathering forms. This is where the problem arrises. If you’re like me and tab between inputs (‘fill in field, hit tab, fill in next field, hit tab, etc), it’s very easy to forget that you need to read the value (acting as a label) in the next field before tabbing into it – as soon as it has focus, you can no longer tell what you’re supposed to be inputting.

The placeholder attribute should not be used as an alternative to a label. –HTML5 Draft Spec

Even more recently, the HTML5 spec introduced the placeholder element for inputs. Though the HTML5 spec advises against using a placeholder in place of a label element, it seems common practice to do so, and it tempting even for myself. This would be fine and dandy if it weren’t for the specific implementation of placeholder‘s behaviour in all major browsers: Exactly the same as we saw above, clear on focus. It leads to precisely the same problem as before, but this time natively instead of using a bit of JavaScript.

I’ve created what I believe is the ideal alternate behaviour multiple times in the past with a tiny bit of JavaScript and CSS:

• Position the label for an input directly below it with the same borders/padding so that the text lines up perfectly with what is typed in the input
• Using JavaScript, bind a function on change for the input that checks to see what the value of the input is (after each keystroke), and if it’s anything other than blank, hide the label. If the label is hidden and the input is blank on change (you’ve deleted the contents of the input), show the label.

I’m not completely sure whether the necessary change here is in the behaviour/intended use case of the placeholder attribute or in the code developers are writing in conjunction with their forms. Since it’s highly unlikely the HTML5 spec will dictate such a change at this point, I think the onus is on developers to be more careful with the aesthetics/usability line. If you implement the above properly and with care, you’ll have an accessible form that saves clutter and uses no additional markup.

Well, not really, but every time I need to plug something into that 3.5mm jack on the back of my iMac at the office, I can’t help but think about why it’s so difficult. I’ve pondered putting that port on the side, on the bottom, anything that helps access – but really, repositioning offers no ideal or substantially improved alternative.

While the same issue is present with the USB ports in the same area, they’re much more defined and can be felt out with relative ease. the issue with the 3.5mm port is that it’s so small, so challenging to accurately locate with your index finger, blindly. So I propose a simple solution (the best kind!). Recess it in a small (approx 1cm in diameter) dimple . Around the size of the tip of an average finger. This does two things: Makes the port easier to find blindly, and provides a very small targeting assist – the plug would slide in with relative ease even if aimed a little bit off.

How’s that, Steve?

All that’s required is the use of the gettext hook. The below code, in your theme’s functions.php, will change both ‘Featured Image’ to ‘Album Cover’ and ‘Set a featured image’ to ‘Select an image’.

function album_featured_image_alttext($translation, $text, $domain) {
	global $post;
	if ($post->post_type == 'album') {
	        $translations = &get_translations_for_domain( $domain);
	        if ( $text == 'Featured Image')
	            return $translations->translate( 'Album Cover' );
		if ( $text == 'Set featured image')
	            return $translations->translate( 'Select an image' );
	}
	return $translation;
}
add_filter('gettext', 'album_featured_image_alttext', 10, 4);

It’s that simple. To take it one step further, depending on how many custom post types you’re using, you could expedit this change and apply it to all of your post types in one function using a switch:

function swap_featured_image_metabox($translation, $text, $domain) {
	global $post;
	$translations = &get_translations_for_domain( $domain);
	switch( $post->post_type ){
		case 'album':
			if ( $text == 'Featured Image')
	            return $translations->translate( 'Album Cover' );
			break;
		case: 'banner':
			if ( $text == 'Featured Image')
	            return $translations->translate( 'Banner Image' );
			break;
	}
	if ( $text == 'Set featured image')
		return $translations->translate( 'Select an image' );
 
	return $translation;
}
add_filter('gettext', 'swap_featured_image_metabox', 10, 4);

Enjoy!

1. Theme My Login, a plugin, handles this among many other things Its placement in the permalink structure of the page is not ideal, however, but it’s worth a shot.
2. On the WordPress.org forums, I eventually encountered this post by jimzqui. Using a custom template and a lot of additional CSS, this code is the shit to get a front-end settings page going. You’ll probably encounter an error – make sure you remove the ‘Resume’ field in his code, as chances are you don’t have one.

This is the code you probably have:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 94, 144, true );

At this point, all instances of the_post_thumbnail will output the image at 94×144. There are two main ways to output a different size: using predefined image sizes, or by specifying your own. Using the_post_thumbnail('thumbnail'), for instance, will display the thumbnail using your install’s thumbnail settings, in Settings > Media. This too, however, can only be set globally, and isn’t ideal since the thumbnail size is likely used elsewhere on your site.

You can also output a thumbnail using an array – the_post_thumbnail( array( 100,150) ). This is less than ideal as well because the resizing is done on the fly – either by specifying a size in the HTML or by regenerating it server-side, but either way is unnecessary load on the server.

The best way to approach the problem to create new custom image sizes, essentially in addition to the default ‘thumbnail’, ‘medium’, and ‘large’.

add_image_size( 'author-thumbnail', 60, 60, true );

This will add the extra work to the media manager – when you upload an image, it will resize one additional time to these specifications and that new image will be at the ready using its name, in this case ‘author-thumbnail’. Now, we can simply do this in our template file to output the properly sized thumbnail for the content type:

the_post_thumbnail( 'author-thumbnail' )