This quick tip explains how to add a Custom Column in the Manage Screens of your WordPress blog.

After looking around for a while, I found that most people's solution was to use a plugin which ended up having an excessive amount of code in it.

Additionally, I wanted to be able to serve a responsive layout using the Skeleton grid system class of "scale-with-grid" - the original reason for using featured images which doesn't require a front end width and height attribute.

Here's the workaround that I came up with given the requirements of the project.

Step 1 Apply an Arbitrary Class to Your Featured Post Images

We need to be able to have control over the image using our stylesheet so we need to apply a class that only affects the image itself. I chose just to wrap my image in a figure/div called 'headline'. That was in addition to a custom post thumbnail size that I had already set in the functions.php file called 'huge' - this thumbnail size had a maximum width of 940 while the height was 900.

That's fine assuming you want an image with a height of 900px - but let's face it: you probably don't because it looks like this:

Here's the code I wrote for the template:

	<figure id="headline">
		<?php the_post_thumbnail('huge', array('class' => 'scale-with-grid')); ?>
	</figure>

Step 2 A Little Bit of CSS Hackery

	#headline {
		max-height: 400px;
		overflow: hidden;
	}

And after we've added that code we get the following result which is much more manageable:

Why It Works

This works because we only set a maximum-height and not a maximum-width. WordPress defaults to the maximum width which we set via our function:

	add_action( 'init', 'my_register_image_sizes' );

	function my_register_image_sizes() {
		add_image_size( 'huge', 940,900, true );
	}

The image is technically still all there in its full size but we caused the browser to hide anything over the height of 400px by using the overflow: hidden attribute.

It works!

Just One Problem Though...

While it looks good, we're actually hacking wildly at our browser here. Remember that the image only looks as if it has resized - as we've already said the image is still there in full.

That means that despite it looking great all the way down to mobile, it's actually taking up kind of a lot of space.

Does anyone have a better solution? Leave your ideas in the comments below!