Have you ever had a WordPress theme cropping a thumbnail image the “wrong way”? Your friends group image had everybody’s heads cut off or a photography or artwork was cropped at random chopping off the sides or the top and bottom, just leaving the middle of an image that does not represent what you want?
Here is an example of the problem.
This is the original image (courtesy of Naomi Jacobson).
This is the thumbnail automatically generated by WordPress:
In this specific case, thumbnails are set to crop the image proportional to 400 x 250 pixels and use the center part of the image.
To comply with the requirement of the 400 x 250 proportion (for this specific image gallery) we will need to manually crop the image, or just move the visible part to another area of the image.
Note that the instructions in this post can apply to any other proportion required.
Here is the result we want to achieve:
To solve this issue I used Post Thumbnail Editor (PTE), a free plugin available at the WordPress Plugin Repository.
Here is the plugin description: “To meet the needs of themes where the post-thumbnails have random and capricious sizes (which causes wordpress to crop images simply from the middle (either chopping off the top and bottom or chopping off the sides), this plugin attempts to give the users an interface to manually fix those thumbnail and random images.”
After you download and activate the plugin, fixing a thumbnail becomes very quick and easy. Here are the steps:
STEP 1 – Open the image in the PTE plugin
- Go to Media Library
- Make sure you are in List View (red circle image below) not in Grid Vew.
- Hover you mouse on the image to show the hidden commands: Edit | Delete Permanently | View | Thumbnails
- Click on Thumbnails (this option only shows if you have the Post Thumbnail Editor plugin installed and activated).
STEP 2 – Crop the Thumbnail
- Select the thumbnail size you will fix. In this case the 400 x 250 pixels.
- Select the area to be cropped in (red arrow).
- Click and hold at the top left corner of the area you want to highlight.
- Drag it down to the lower bottom corner of the area you want to highlight.
- The red tinted area is the area that will be cropped out.
- You can drag the whole area up or down to position the visible area.
- Click on the CROP button.
STEP 3 – Save the Cropped the Thumbnail
Click on the disk icon (red circle) to save the cropped thumbnail.
The next page will show you the other thumbnails (if any) that were not re-sized (because we just re-sized the 400 x 250 pixels ratio).
If you have more thumbnails to re-crop, go back to STEP1.