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')); ?>

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!

Related Posts
  • Code
    Theme Development
    The Beginner's Guide to Icon Fonts in WordPressIcon fonts
    I like social icons, I'll admit it. I have literally dozens of social icon sets I've collected over the last few years, and have even created a few sets of my own to try to achieve that perfect fit for a particular project. But lately, I've discovered icon fonts, and I haven't been using those old image icons in a while.Read More…
  • Web Design
    HTML & CSS
    Build a Dribbble Portfolio Grid With Flexboxgrid and JribbbleFlexboxgrid dribbble
    Flexboxgrid is a new framework which allows you to combine the predictability and common language structure of a grid system with the flexibility and simplicity of flexbox. Today, we will walk through the basics of using Flexboxgrid, and use it to build a simple Dribbble feed. Let's get started!Read More…
  • Web Design
    Complete Websites
    Building the Responsive Timeline Portfolio PagePortfolio thumb
    During this tutorial we will be building the fantastic Timeline Portfolio as seen in an earlier tutorial by Tomas Laurinavicius. We will be using some responsive techniques as well as CSS3 animations, Sass and a little bit of jQuery.Read More…
  • Web Design
    Case Studies
    How They Did It: Typekit's New HomepageTypekit retina
    Typekit recently redesigned their homepage with some new services in mind. When Typekit joined Adobe, they set out to bring us a new way to handle fonts on the web. Not only did they create a fairly simple way to embed fonts on the web, but they have now officially launched a desktop sync option, which allows Creative Cloud subscribers to sync fonts to their computer directly from Typekit. This has been in a beta form for a while now, and provides a much easier route to local fonts than finding them elsewhere!Read More…
  • Web Design
    Creating a Simple Responsive HTML EmailEmail new rwd thumb
    In this tutorial I will show you how to create a simple responsive HTML email which will work in every email client, including all the new smartphone mail clients and apps. It uses minimal media queries and a fluid width approach to ensure maximum compatibility.Read More…
  • Code
    Theme Development
    Moving Away From TimThumb to BFIThumbBfithumb 400
    TimThumb has been a long time favorite image resize script for WordPress theme authors. But, with the new WordPress Theme Submission Requirements on ThemeForest, we have to say goodbye to TimThumb. This article will teach you how to transition your themes away from TimThumb, and into a new image resize script called BFIThumb.Read More…