Most people don’t know that WordPress has a great image editor built right into the WordPress admin. The image editor allows you to crop, rotate, flip and scale any images that you uploaded to your Media Library. With this tutorial, we’ll walk you through how to edit images in the WordPress 3.8 Admin.
Step 1: Select an Image
First, we need an image to edit. I’ve chosen a lovely image that I took in Downtown Richmond, VA on top of the Flood Wall. To add an image to the Media Library, all you have to do is go to Media > Add New. Either browse to the folder that your image is in by selecting “Select Files”, or drag and drop the image into the dotted line area that says “Drop files here.”
Once you have the image you’d like to edit, click on it to open the file.
Step 2: Open the Image Editor
Opening the image editor is easy. Once you’ve opened the image you’ve chosen, click on the “Edit Image” button located at the bottom left hand corner of the image.
Step 3: Edit Your Image
We’ll go through each editing option that the WordPress editor has to offer.
To crop an image, just put your cursor on top of the image preview, click and drag a selection. When you do this, you’ll see that your crop icon is no longer light gray. It is now dark gray indicating that the crop tool is now active. You can grab any of the edges and drag the selection until you have the selection you want. Once you’re satisfied, click the crop icon to crop the image.
To rotate an image, there are 2 different icons. The first rotate icon will rotate the image 90 degrees counter-clockwise to the left with each click. The second rotate icon rotates the image 90 degrees clockwise to the right with each click.
To flip an image, there are 2 different icons. The first flip icon will flip the image vertically, where the bottom of the image will now be at the top and vice versa. The second flip icon will flip the image horizontally, where the right side of the image will now be on the left and vice versa.
If you ever make a mistake while editing, you can click the “Undo Edit” icon to undo one change at a time with each click.
To redo a change you’ve undone, you can simply click the “Redo Edit” button. Each click will redo one change at a time.
To proportionately scale an image, just click the “Scale Image” link. If you like the image just the way it is, but need it to be smaller in height or width, you can just type in the pixels you want for either, and the tool will scale the image for you so the dimensions are not distorted. Once you have the dimensions you want, just click the blue “Scale” button.
If you don’t want to use the drag and drop cropping tool, but would like to to crop your image to a specific dimension, you can use the “Image Crop” tool box to enter in a cropping ratio. Once you enter in a width and height (in pixels), hold down the SHIFT key and click and drag a cropping selection in the image preview. This will allow you to keep the specific ratio you entered in earlier. As you drag your selection box, the selection size will be shown underneath the cropping ratio you entered.
In “Thumbnail Settings,” the thumbnail image can be cropped differently from the other image sizes. As WordPress explains, “For example it can be square or contain only a portion of the original image to showcase it better. Here you can select whether to apply changes to all image sizes or make the thumbnail different.”
Step 4: Save Your Changes
Once you’re happy with the edits you’ve made to your image, don’t forget to save your changes! You need to do this in 2 spots. First click the blue “Save” button underneath the preview of your edited image. Once you do, a bigger preview of your edited image will be shown. Once completely satisfied, click the blue “Update” button on the right side of the screen. This will save and apply all of your edits
Restore Original Image
If you’ve edited and saved an image, but decide that you actually like the original image, WordPress has a “Restore Original Image” option.
Choose and open the image you’d like to restore from your Media Library. Click the “Edit Image” button underneath the image preview. On the right, underneath “Scale Image,” you should see the “Restore Original Image” link. Click that, and then click the “Restore Image” button. This will restore the original unedited image.