Web Productivity, WordPress & Broken Images Tip in Week #7

Productivity

I authored another Chrome Extension last week, mainly to deal with my own frustrations over web forms that have super tiny text entry fields! The extension will maintain the size of textarea elements after you resize them.

The extension is more of a web productivity tool, so I launched it under Automate Plus, another little project I’m a part of. I call the extension Textbox Tamer.

WordPress

Custom Image Thumbnail Sizes

For a long time, I’ve been using the default WordPress thumbnail sizes. I’d modify the thumbnail size to fit the most used size in my layout and call it a day.
Today, I realized that WordPress offers a hook to provide custom sizes.

Drop this code in your functions.php and you’ll notice the new custom size shows up in the “Add Media” dialog.

add_image_size('home-page-thumbnail', 290, 200, true );
add_filter( 'image_size_names_choose', 'mysite_custom_sizes' );
function mysite_custom_sizes( $mysite_sizes ) {
    return array_merge( $mysite_sizes, array(
        'home-page-thumbnail' => __('Home Page Thumbnail'),
    ) );
}

Now, so you don’t get too frustrated, I’ll drop this little hint. The new custom image size will not show up for images that have already been uploaded. It will be shown only for images that have been uploaded after you’ve registered the new custom image size filter.

JavaScript

Removing broken images

Today I discovered the absolute best way to remove broken images from your pages. When I say “best way”, what I really mean is the simplest way. It’s a one-liner and doesn’t require any knowledge of what events have occurred (whether the document has loaded, etc).

The bad news is, it breaks every rule of keeping script and HTML separate and takes us right back to the 90s where inline JavaScript was commonplace and accepted.

So my advice is to only use where your content isn’t trusted, such as user- or feed-generated content.

<img ... onerror="this.parentNode.removeChild(this);">

CSS

Weird browser inconsistency with option element styling

Nothing groundbreaking here, I just noticed a strange inconsistency in the way Webkit and Firefox handle option element styling, as opposed to how IE does.

IE will recognize styles applied to the option element. Whereas other browsers will not. It’s not a real big deal, as you can simply use the parent select element to apply the styling.

Works only in IE

option { text-transform: capitalize; }

Works in all browsers

select { text-transform: capitalize; }