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.

cutting

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.

add-media

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

media-uploader

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.

2nd-edit-button

In the Editing Screen

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

editing-screen

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.

flip

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

flipping-picture

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.)

scale

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.

FREE EBOOK
Your step-by-step roadmap to a profitable web dev business. From landing more clients to scaling like crazy.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

FREE EBOOK
Plan, build, and launch your next WP site without a hitch. Our checklist makes the process easy and repeatable.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

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

scale-700px

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.

restore

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.

click-and-drag

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.

crop

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.

cropped-image

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.

16-9-ratio

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

Tags: