In this part of my series of articles on featured images, I'll show you how to edit and crop the WordPress featured image. Being able to select the image section yourself is often very helpful because WordPress often crops the images unfavorably.
I will briefly introduce the WordPress core feature for editing images and then go into more detail about the Crop Thumbnails plugin, with which you can individually select an image section for each specified image size and crop the contribution image.
In addition to the options for adjusting images directly in WordPress, photos can of course also be edited with a graphics program and brought to the right size before uploading. As a blog with a focus on WordPress, I won't go into any more detail about external programs.
Scenario: Twenty Fifteen with a panorama picture
To try out the image processing, I chose a beautiful panorama picture of Florence, which is available as a public domain image at Pixabay .
This time I used Twenty Fifteen as the theme. Twenty Fifteen sets a size of 825 x 510 pixels for featured images.
If we now upload our original image of Florence with the size of 1920 x 814 pixels, WordPress cuts the image to the defined size in the theme. The image is cropped from the center, ie evenly from left and right.
As a result, we get our contribution picture:
This is where the problem becomes apparent.
Florence Cathedral - on the right in the picture - was simply cut off. Therefore we want to edit the WordPress post image and choose the image section ourselves.
In addition to the actual contribution, the contribution image is also used in a widget, which displays the image as a thumbnail in the size 150 x 150 pixels:
Again, we would like to be able to choose the cathedral as the central point.
Crop WordPress post image with core feature
WordPress Core offers the ability to edit any uploaded image in the media library. When selecting a featured image in the media library popup, you will find the link Edit image in the sidebar on the right:
We can now use the buttons to rotate the image as desired and mirror it horizontally and vertically. With the scaling function on the right, the image can also be reduced.
In addition, by clicking on the image and dragging the desired section, the image can also be cropped and another image section selected.
The WordPress featured images can also be adjusted completely without a plugin.
Personally, I'm not a fan of the core image editing feature. I don't know if it's up to me, but I can't handle the tool very well and I think the usability could be improved. Entering the image format didn't really work and WordPress cut the image 1 pixel smaller than desired.
When adapting the featured images for different image sizes, you come up against limits when editing the core - only all image sizes or the thumbnail can be edited, but not each image individually for all specified sizes.
As always, there are suitable plugins that we can use.
Alternative: Crop Thumbnails Plugin
After Post Thumbnail Editor is no longer maintained, my recommended plugin is now Crop Thumbnails.
"Crop Thumbnails" made it easy to get exactly that specific image-detail you want to show in your featured image or gallery image.
The plugin is being actively developed, is installed on 10,000+ websites and worked smoothly in my tests with WordPress 4.8.3.
Edit and crop WordPress post image
The plugin adds a new button for cropping the article image directly in the metabox for the article image.
The plugin then shows all defined image sizes in the right column. These can be selected one after the other in order to select an image section individually for each image size.
At the top left, a section of the original image can be selected for the selected image size and the article image is cut individually.
Result: Individual cutout for WordPress featured images
As a result, we have now received a featured image in the required size of 825 x 510 pixels for TwentyFifteen, which shows the entire cathedral. Due to the selected image section on the right edge, the original image was only cut off on the left.
For the second, specified image size of 150 x 150 pixels for the preview image (thumbnail), we have also selected an image section that has the cathedral in focus:
This means that the small preview image is also more meaningful.
Under Settings → Crop-Thumbnails in the WordPress backend, you can configure the image sizes and post types for which the feature should be available.
If the theme or plugins define too many image sizes, the feature for cropping for certain image sizes can be hidden here.
Attention: If the featured images are subsequently regenerated with the plugins already presented , the individually selected image sections will be lost, because all image sizes will be recreated again. Many thanks to Ralph Stenzel for pointing out this problem.