Quick Tip: A Workaround for Hard Cropping Featured Images

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

---

Recently, I found myself needing to start using featured images instead of timthumb.php for the first time. Everything was great except that I found it really annoying that I was unable to specify exactly what size an image should be (hard-crop).

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!