The next thing we’re going to do in this WordPress 3.9 Media Library seminar is edit images in the media library. I’m here in the media library and I’m going to select edit here for this image. Now we’re in the image and by edit what I mean is click down here below the image on “edit image” and that brings up the screen editor.
If you are a Thesis user you may find it best just to turn off all of the Thesis related boxes on the media screen here so that you only see WordPress ones.
Cropping Images
There are a bunch of things you can do when editing in the media library. The first thing you can do is crop. You can crop the image by simply placing the mouse in and dragging it around. If you know what size you want it to be, so say you want it to be 600×300 then you can just type those values in the Image Crop dialog and then move that size around.
You can also choose aspect ratio in this Image Crop dialog. Say you know that you want it to be a 4-3 aspect ratio. Enter those numbers here and then it ignores this sizing you added and changes the aspect ratio of the crop selection.
If you push your shift key, it will resize maintaining that aspect ratio. So you can resize the image to maintain that aspect ratio and then in order to make this actually work, all you have to do is click the crop button again and now you have a cropped down image.
You can save that cropped down image and when we come back over here and edit the image again, you can see that it is 768 x 578. It’s been reduced in size from the original 1024.
You can restore the original by clicking in this “Restore Original”. Let’s go ahead and do that so you can see what that looks like. And now the original is restored, You can update it, come back and edit the image again and now you’re back to that original size 768 x 1024.
Revise the Thumbnail Selection
You can see there’s a Thumbnail Settings dialog and you can see the image that it’s using. Well, we can change the thumbnail so that it gets a different part of the image. For example, let’s crop and choose 1 to 1 aspect ratio. You can move the crop selection around until you get what you want for the image. Now rather than choosing All image sizes, we could just choose the Thumbnail size selection, hit crop again and save.
You can see the image hasn’t changed at all. Hit Edit Image again and look at the thumbnail image and you can see the revised version. So this is a way for you to change the position of the thumbnail. WordPress automatically crops the thumbnail but then you can choose to change that automatic cropping to display what you want to display in the thumbnail.
Rotate and Flip Images
Something else that you can do is you can rotate the image. Let’s edit this image, the Right Target. And we can rotate it around like that or maybe better yet like this. Save that and now the image has been turned around. And if we want to change the thumbnail, well actually we did this for all image sizes so the thumbnail did turn.
You can also do things like flip it vertically or flip it horizontally and you can undo those things.
Change the Scale of the Image
You can also simply change the scale. Let’s upload an image that’s way too big. We’ll add new, select the file and I’m going to rename this so that it’s appropriately named before we upload it. This one is 5 megs, it’s half of the maximum upload size.
Click edit and then edit the image. You can change the dimension here in the Scale Image dialog. I’ll type in 1024×432 and hit scale. When we update it, you’ll see now the file size is 206k and it’s dimension is 1024×432. This is going to be the full sized image not any of the other image sizes.
Now, if there was some reason why you wanted to, you could always restore that back. So you do have that available to you but the original is still being stored in the media library and as such, you still have this 3 megabyte image that has to be backed up.
It still doesn’t make any sense to upload an image that’s way too big but if you do and you don’t heed my advice, at least you can scale the image down so that when you’re displaying the full sized image it’s not trying to display a huge over sized image.