• Home
  • About Mitch
  • Speaking
  • Articles
  • Contact
  • Home
  • About Mitch
  • Speaking
  • Articles
  • Contact

Digital Strategist

WordPress Developer

Content Creator

Unapologetic Punk

Mitch Canter

  • X
  • Bluesky
  • GitHub
  • Twitch
  • YouTube
  • LinkedIn
WordPress

WPThumb: Bringing Back The “Hard Crop”

CMDR Mitchcraft

Reading time: 2 minutes

One of the most useful features WordPress has is the ability to create custom image sizes from uploads.  This takes the guesswork out of design, as it allows me to specify exactly the dimensions I need for my image.  For a long time, WordPress had the ability to switch between a “soft crop”, which basically resizes the images without any actual editing, and “hard crop”, which physically cut photos down to the size you requested.  Turns out, WordPress 3.0+ got rid of the hard crop, which allowed me to set the specific sizes, instead of just specifying a width and hoping for the best.

WPThumb brings it back to the way it was.  Installing WPThumb will allow you utilize their built-in cropping library to get pixel-perfect thumbnail sizes.

WPThumb Instructions

Download and activate the plugin, either through your own site or from the WPThumb plugin page.  There’s no settings to mess with; once WPThumb is installed, it’s activated.

Now, set a custom image size (this code goes in your functions.php file)…

add_image_size( 'homepage-thumb', 220, 180, true ); // 220 pixels wide by 180 pixels tall, hard crop mode

…and then call the image as needed (in your template – make sure it’s in the loop!)…

<?php the_post_thumbnail( 'homepage-thumb' ); ?>

And that’s all there is to it.  WPThumb will start hard-cropping images automatically.

How does the cropping work?

Say you have an image that’s 600px by 400px.  You set a crop size of 200 px by 200px.  WordPress will:

  1. Shrink the image down proportionately to 300px by 200px (to the smallest size)
  2. Remove an even amount of pixels from the largest size to resize it.  Since there’s 100px of extra image to get rid of, 50px will be removed from both the left and right sides.

More info:
http://codex.wordpress.org/Function_Reference/add_image_size
http://codex.wordpress.org/Function_Reference/the_post_thumbnail

Export
  • Thursday Conversations: HTML5

    Thursday Conversations: HTML5

    Reading time: 2 minutes

    One of the best new features of 3.1 – this brings Internal Linking to the forefront, allowing you to quickly link to old posts, pages, or other content types. Admin Bar Also super important – this adds a bar to any logged in user that has commonly used functions or actions within easy reach –…

    WordPress
  • Favorite Plugins–Yours, Mine, and Everyone’s

    Favorite Plugins–Yours, Mine, and Everyone’s

    Reading time: 1 minute

    OK – so I’ve tallied up the results from Tuesday and came up with some really interesting results.  So, I’m going to do something a little fun.  Here are your favorite plugins as determined by the comments, my favorite plugins, and the top 5 plugins from the WordPress repository; let’s see how they match up…

    WordPress