WordPress Magic: Edit Images in WordPress

How to Edit Images in WordPress

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 in your media library, and uploading the corrected image to your website. For simple adjustments, I’m recommending that you edit images in WordPress.

Back when I was working on one of my many articles for Inkscape Experiments, I noticed that I goofed up on one of the screenshots I made. I needed to do away with a few pixels above a window I grabbed via a screenshot.

Edit Images within WordPress

A few years ago, editting images within WordPress was a needless pain. Lucky you, tweaking an image is much easier now.

What Happens When Clicking on an Image

Edit images in WordPress layout now provides you with some options that you no longer need to dig around for. As of writing, you have a set of buttons for all of your most basic image editing needs.

1. Block Type: If you have enough experience using WordPress, you’ll be familiar with this button. (Columns, SlideShow, etc.)
2. Up & Down: If your layout is in a Block Format, this will allow you to shift your image block up or down.
3. Change Alignment: In case you need a specific alignment for your image.
4. Insert Link: For turning your image into a clickable link.
5. Crop: For clipping a few pixels off or in case you need to focus on a specific portion of an image.
6. Add Text: This option converts your image block into a Cover Block. A Cover Block allows you to add text on top of the image, overlay a color, change the opacity of the color overlay,
7. Apply Duotone: This allows you to quickly apply a duotone to your image.
8. Replace Image: In case you need to swap images.

Image Options in the Sidebar

Just as if you didn’t have enough going on, WordPress provides you with a sidebar with even more options. If this sidebar doesn’t appear after clicking on your image, you can bring it up by clicking on the sprocket icon in the upper-right corner of your browser window and selecting the Block tab.

For the sake of this article, there are three big features that we’ll focus on, Styles, Image Size, and Image Demensions. All three are non-destructive and quick and dirty ways to edit images in WordPress.

Edit Images in WordPress Using Styles

Styles in WordPress allows you to choose what type of corners you want for your images, Default (squared) or Rounded. You can also set the default style for your images in this setting.

Adjusting the Image Size and Demesions in WordPress

Under Image Size is a dropdown menu with four presets that will quickly adjust the size of your image within your WordPress layout, Thumbnail, Medium, Full Size, and Post Thumbnail. All of these options are non-destructive.

The Image Demensions has a different sets of settings. One to manually enter the image size in pixels. The other is a set of buttons that allow you to scale your image based upon pre-determinded percentages. For screw-ups, there’s an extremely useful Reset button.

Cropping an Image in WordPress

Clicking on the Crop button allows you to directly crop your image inside your WordPress layout. You can very quickly adjust the Zoom, Aspect Ratio, and Rotation as you edit images in WordPress.

Adjusting the Zoom

Zoom is represented by a magnifying glass. Clicking on it provides a slidder. It allows you to zoom up to 300%. The enlargement will be constrained within the bounds of the current image dimensions. Zooming will also massively pixelate your image.

Aspect Ratio

Adjusting the Aspect Ratio of an image will provide you with a set of various crops based upon the most commonly use ratios. You can also drag around the image to get the right focal area. Unfortunaetly, you can’t customize your crop using this feature.

Rotate

Rotate will rotate your image in a clock-wise fashion.

Applying a Duotone

Applying a duotone in WordPress is now pretty easy. You can choose from one of the presets provided or create your own.

The Original Way to Edit Your Image in WordPress

A few years ago, you couldn’t just edit an image within WordPress. And it was a bit cumbersome. First 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.)

Once you’re 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.

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.

Above is a breakdown of what you’ll first see on 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 Description.

Edit Image Screen 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

Cropping

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

Rotation

Rotating an image in WordPress is pretty straightforward. 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 buttons, which can be used to correct or reapply an edit.

Scale Image

Clicking the Scale Image link will expand the panel, providing some basic options and a friendly tip. The adjustments you make are proportional. If 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.

Edit Images in WordPress Using Thumbnail Settings

This feature may not come off as straightforward to all users. It didn’t for me. That’s why I’ll break down what Thumbnail Settings can do when you edit images in WordPress. 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

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 trial and error 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.