WordPress images and thumbnails: learn how to control the crop!

We've added a new WordPress plugin to our tool kit, one that will help a lot of DMA users better manage how the images are being displayed in their website. Read this post for the full details.

WordPress
stock-images-for-wordpress

When developing and releasing new WordPress sites we use, over and over the same set of solid plugins. True there are many thousands of plugins available for WordPress but not all of them are reliable, solid and consistantly updated. So, for example when creating forms for a site we rely exclusively on Gravity Forms. We use it over and over and as a team we get to better understand all of its features.

We’re not stuck in our ways though; we’re always keeping an eye open for new plugins or new problems that our clients face that need a simple solution. Over the past couple of months we’ve had a few people struggling with the controls for images, specifically when WordPress sets a featured image for a page or post.

There is a solution what we have researched, we’ve installed it already for a handful of clients with existing sites.

How does WordPress crop images?

To begin with let’s have a quick look at the problem. We use Featured Images a lot when building sites, it’s the easy way to set one image to be the featured one for a page or post, so that when that page is displayed, in a sidebar, or perhaps a blog archive page the Featured Image is displayed along side the title and except.

A picture tells a thousands words! Here is an example.

This is the blog archive here on TheDMA.com.au. The images on the left side are the featured image for all of the posts. Now you can also see that they all fit as they’re indented, there’s no ‘heads cut off’ so to speak.

WordPress-featured-images

Now here’s another example, one that I found in a few minute looking around at blogs. The first image works because it’s landscape, the second image though – well it cuts the poor girls head off!

WordPress-featured-images-2

So with this you should now understand the problem.

What WordPress is doing is allowing you to upload the image at any size, it then goes about making a number of cropped versions of the image. How many and what size depends on the setup of your WordPress theme and site.

WordPress crops but does not always do it in the best place, as can be seen from this example.

Manual Image Crop – the plugin

This plugin has been around for a while but we’ve only come across it toward the end of last year.

It fixes this problem by allowing you to see each of the various cropped images that have been made of the master image. Then simply allows you to position where the crop goes. Importantly it does not change the actual pixel size but allows you to choose which part of the original image will be displayed.

In the example above, we could have moved it down so the subject was not decapitated!

How it works

When the plugin is installed and activated in your WordPress site, visit the Media Library (click Media Library from the main dashboard) and you’ll see the first page of images in the library.

The plugin adds a new option here “Crop” next to each of the images in your library.

media-library-1

Clicking that will take you into the cropping tool where you’re presented with the various crop sizes that your WordPress site is setup to use. The names of these sizes will vary form site to site.

In this example, I’m working with the thumbnail version and you can see what I’ve been able to do. Mr Pooch (it’s not my dog by the way!) has been moved down a little so we can see him a little better.

Basically it’s a matter of moving the image to the desired location, then clicking the Crop it! button.

media-library-2

Easy!

The final thing to note is that you have to adjust the image for each crop size that WordPress is making; this is done by choosing the next crop size at the top of this interface and again positioning the image.

How to get the plugin?

We won’t be installing this on every site that we manage, simply because not everyone has a need for it. If you’ve come across this problem drop us an email ( support [ at ] thedma.com.au ) and tell us your site, we’ll get it installed for you.

Happy cropping!

Reader Interactions

Leave a Reply

Your email address will not be published. Required fields are marked *