Build Your Own Business Website header image

Using the Media Library to Edit Images

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Now that you have seen how the WordPress 4.7 media settings work and how to insert images into pages I want to show so how to use the editing tools. That way you can edit images to be just right for your site.

Editing Options

Let’s start with the image we just worked with. You can come along here and edit this and again, during that edit you can add alternative text to this for SEO . You could change whether or not you want the image to link to something.

Linking to an Attachment Page

You could use this as a link to another page, you can use it as a link to a media file or you could use it as a link to its own attachment page. If we choose attachment page here for example, and hit update, when you click on this it now takes you to what is called its attachment page.

And you actually can edit the attachment page. You can click edit media here. You could come down and add some descriptive text. You could also change the name, for example, we’re going to call this Neanderthal Beautician.

Now if you view the attachment page you’ve got a changed name and you’ve got some descriptive text. If you click on it, it opens up to its full size. So that’s what happens with attachments.

Link to a Custom URL

Let’s edit this again but instead of linking to an attachment page we could put a custom URL there and link off to another page or another website even. We could put a download file here and clicking on that will download another media file. Of course, if the image is just there for looks we can say none.

Advanced Options

Then in the advanced options we can specify the image title attribute. If there’s a reason to we could add an image class to this. If we want to specify what kind of link relationship it is we can. If it’s linking then you can open up a new tab and the same class. Those are the kinds of things you can do with the options.

Edit the Original Image

In addition to that, you can actually edit images in the media library. You could edit the image here by clicking edit original which brings you to the image editor or you can click on the edit image button and now there are things you can do with it.

Flipping the Image

You could flip it sideways if it’s wrong. You can turn it upside down or flip back and forth. This here flips it for when you want it facing the other direction. This is an undo.

Scale the Image

You can scale it. For example, let’s say we want to make it only 300 pixels wide. So then it automatically scales down to 371, you can hit scale and say okay. And now she’s reduced in size. If we close it and reload this page…oh it’s not going to give us because we said we wanted the bigger image earlier. In any case, there is a smaller version of her available.

Crop the Image

We can also crop. What you do to crop is just click and drag your mouse like that and you can move it around like this. Then once you’ve got the part that you want to be there hit crop. You can also set that cropping selection over here. Say what we really wanted was 225 and we wanted 150. You can set those numbers over here and then come along like this put it where you want it. Hit the crop button and hit save.

I forgot to mention that with cropping you should specify whether it should it apply to all image sizes, just the thumbnail or if it should apply to all sizes except the thumbnail. We’re going to go ahead and apply it to all sizes.

Usually, what you see here is cropped. When we come back over here to edit image now we get to see the choice of restoring the original image. We can just discard all the changes that we made to this and bring it all the way back to its original and that’s it.

So those are some of the edits that you can do inside of this editor in the media library to edit images.

0 Comments… add one
0 comments… add one

Leave a Comment