How to Crop an Image Inside of WordPress

How to Crop an Image Inside of WordPress

When people upload images to their WordPress sites, they often blow through the process so quickly that they never realize half the things you can do with images. One of those things is cropping images right inside of the Media Library.

In this post, we’ll go through how to do that.


Getting to the Editing Screen

You can get to the editing screen by one of two ways.

You can go through the Media Uploader as you normally do when you insert an image into your posts.


Just click on the image you want when the Media Library loads up, and then click “Edit” on the right-hand side.


Or you can go directly to the Media Library from your left side menu – Media > Library. In this case, once you find the image you want, hover over it and click “Edit.” And then when the new screen appears, you’ll need to click “Edit” again just under the image on the left.

Here’s the second edit button.


In the Editing Screen

Whichever way you choose, you’ll come to the editing screen, which will look like this.


Flipping Your Image

Right above the picture, you’ll see a number of buttons that will allow you flip the image in a number of different ways.


For example, say I’d like to make the jellyfish in my image flip and go in the other direction. No problem.


Scale Your Image

Another option you’ll have is to scale the image down on the right hand side. (Note: you can only make images smaller, not bigger.)


Let’s say I want to make my 1024px wide image above a 700px wide image. When I enter 700 into the left-hand “width” box, the system will automatically calculate the px in the right-hand “height box” in order to keep the proportions of my original image.

You can see below that when I entered 700px, the system automatically calculated 525px for the height value.


Once you click the “Scale” button, your image will take on your new dimensions. However, a new button will also appear, letting you restore your original image if you like.


Crop by Dragging

In order to crop the image manually however you like, you simply click on the image, and then holding your mouse down, drag the box that appears.


You can move this box around and drag the edges to get it the way you want it. Once you have it the way you want it, click the top left-hand “Crop” button above the image, and this will crop your image.


Here’s my newly cropped image. You’ll notice that a lot of the top and bottom blue have been cropped out. It’s also only 700px wide now.


Setting the Aspect Ratio

Something else you can do is to set the aspect ratio of the manually created cut-out. For example, let’s say you’d like your image to have a 16:9 aspect ratio. Simply put 16 and 9 in the aspect ratio boxes, and then before you click on the image and begin dragging your cut-out box, hold down the Shift key.


When you have it the way you like it, as above, click the “Crop” button in the upper left-hand corner above the picture as demonstrated in the previous step.

That’s It

And that’s it. While you certainly don’t have all the advantages of a full-blown graphics program, if you need a quick edit, doing it right inside of WordPress itself is certainly an option.

Photo credit: Jez Page