Build Your Own Business Website header image

How to Use the WordPress Image Editor – Part 8 – Scale the Image Using the Inline Editor

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.

This is the eighth part of a series on using the WordPress Image Editor and Media Library. In this part we discuss how to use the inline editor to scale an image we’ve inserted into a post or page. We discuss the difference between this method and using the Media Library image editor.

Video Transcript

Now what we’re going to do is we’re going to look at using the Inline Editor for this kind of stuff. And what we’ll do is we will come back over to these pages and we’ll delete these. That was not the wrong way… that was not the right way to delete them. If you’re going to delete them, use the delete button.

Okay, the images are deleted. Now I’m going to install or reinsert the original image, the one that was too big and we’ll edit it using the Inline Image Editor. So again, let’s see, let’s look at the gallery this time since we’ve got them. Yeah, let’s go ahead and show that one and we’ll do it left. We’ll insert it in the post. We’re not going to use the caption at this moment but we will go ahead and say Insert Into Post. Okay so there we go. I guess I did it twice, didn’t I? Let’s delete this one.

Okay so I’ve inserted it into the post here. We’ll go ahead and say update. We’ll take a look at the page. Now we’ve got our monster image back in there and with the monster image now, we’re going to right click on this and we’re going to select that. We’re going to select this edit image and use our Inline Image Editor.

Okay so the Inline Image Editor has 2 different screens. The first screen is the Edit Image screen and it gives you this slider of sizes. So you could in fact, change the size of this image using these. So for example, instead of its 100% size, we go to 60% and we could leave it left and we could update it. And now, you can see the image is changed in size. If we update this and we refresh our screen, there it is. It is now a much smaller size although… and it’s 60% of its original size.

Now, when we did that, this change had absolutely no effect on the image inside the Media Library. What this change did was it used the HTML image tag right here, it took this HTML image tag and it added a height and a width to the image. So for example, I’m just going to show you here… it added this width there and this height and that’s… and so, what’s happening is your browser now uses that information to scale the image itself. And so the scaling is not done on the website, it’s done inside of your browser. Okay so that’s what I meant by it only changes the link. It does not actually change the image.

If we come back over here… so that was the scaling thing.

0 Comments… add one
0 comments… add one

Leave a Comment