WordPress Magic: Edit Images in WordPress


Wordpress magic header

Use WordPress for Simple Image Editing Tasks

Yeah, I said it. As a devout lover of Adobe PhotoShop, I’m making a suggestion to avoid going back into Photoshop or Gimp, make your correction, delete the image you uploaded to your media library, and re-uploading back to you blog. For simple image editing tasks such as cropping or rotation, use WordPress.

A couple of days ago I was working on an article for Inkscape Experiments, and I noticed that I goofed-up on one of the screen shots I made. I needed to do away with a few pixels about a window I grabbed.

A recreation of a screen shot that needed a bit more cropping.
A recreation of a screen shot that needed a bit more cropping.

The First Steps to Editing Your Image in WordPress

To directly edit an image within WordPress can be a bit cumbersome. You can’t just roll your mouse over an image, click a button, and edit it from there. You’ll need to find the image inside the Media Library, which can be found in your WordPress blog’s sidebar. Media > Library(See image below.)

Where in WordPress to find the link to the media library

Once your inside your media library, you can quickly hunt down your image. If need be, you can filter your media by month uploaded or you can do a search for the image by using the Media Search function in the upper-right hand corner.

Options featured within WordPress's media library.

Rolling over any of the media listed in your library will provide you with a few options. The option we want is Edit. Click Edit to view the Edit Media screen that WordPress offers.

A break-down of the Edit Media screen within WordPress. (Click to enlarge.)
A break-down of the Edit Media screen within WordPress. (Click to enlarge.)

Above is a break-down of what you’ll first see inside the Edit Media page. WordPress is a beast with tons of options and features. Naturally, WordPress will allow you to attach all sorts of meta-data to your image. Two notable features worth mentioning are text fields for Image Caption, Alternative Text (ALT attribute within the IMG tag), and the Description.

Edit Image Screen

A break-down of the image editing options you'll find in WordPress.
A break-down of the image editing options you’ll find in WordPress.

Clicking the Edit Image  button will bring about a couple of basic, yet useful image editing options:

  • Crop
  • Rotate (Clockwise and Counter-clockwise)
  • Flip (horizontally and vertically)
  • Undo and Redo
  • Scale Image
  • Image Crop
  • Thumbnail Settings


Options for cropping media in WordPress

The Crop feature’s pretty much what you’d imagine. You click the crop button, and click and drag your cursor across the area you wish to crop out.  When you create a crop selection, you’ll be provided with handles in both the corners and the sides to adjust the selection. The only thing you can’t do is to rotate the crop selection. To complete your crop, click the Crop button again.

To be more precise with your crop selection, you can use the Image Crop to control the Aspect Ratio and the size of the crop (in pixels) via Selection. Both the Aspect Ratio and the Selection act independently of each other. Adjusting one setting doesn’t automatically change the other. If you adjust the handles on your crop selection, only the setting for Selection will change.

[amazon asin=B0072V4EYS,0615684742,B007KSK0KU,1480245607,B009ZVO3H6,B00AEB5EHE,B007KSK0KU,0470560541&text=&template=carousel&chan=amazon default]


Rotating an image in WordPress is pretty straight forward. Click the Rotate Counter-Clockwise button to rotate counter-clockwise. Click the Rotate Clockwise button to rotate in the other direction.


Undo and Redo

Any good program worth its salt has Undo and Redo options. The Edit Image Screen of WordPress is no different. WordPress provides users with both an Undo and Redo button, which can be used to correct or reapply an edit.


Scale Image

Options for scaling, and undoing your scaling, if need be.
Options for scaling, and undoing your scaling, if need be.

Clicking the Scale Image link will expand the panel, providing some basic options and a friendly tip. The adjustments you make are proportional. It you decide to upscale the image, you’ll see a red exclamation mark to alert you. Of course you should never upscale an image in any program because upscaling an image will only expand or duplicate the pixels that actually exist in the image. This usually causes fussiness or that blocky, pixellated look.

Should you happen to screw-up while scaling your image, WordPress will not let you use the Undo button to correct your mistake. Instead, WordPress will provide you with a Restore Original Image link. As shown in the image above, clicking on the Restore Image link will expand that panel, providing you with a friendly message and a blue Restore Image button.


Thumbnail Settings

This feature may not come off as straight forward to all users. It didn’t for me. That’s why I’ll break-down what Thumbnail Settings can do. Thumbnail Settings’s focus is on which image accepts your edits, the main image, the thumbnail, or both. You may want the crop to be the same or focus on a specific area of the image. Thumbnail Setting gives users three different ways to apply your changes:

  • All image sizes – This means whatever edits you make to your image will be reflected in your thumbnail.
  • Thumbnail – Any edits you make will solely be applied to the thumbnail and not your image.
  • All sizes except thumbnail – This is the opposite of the Thumbnail option. Edits that you make will not be applied to the thumbnail.


When Things Go Horribly Wrong

This is not an offer!
Have you ever went to work and got confronted with this?

It’s also worth noting that whatever edits you apply to your images can be undone by clicking the Edit Image button, and then clicking the Restore Image link and button. I discovered this through my trial and errors as I’ve been writing this article. So feel good that I’m willing to take the hits before you even have to risk your butt or your media.



Enhanced by Zemanta