Build Your Own Business Website header image

How to Use the WordPress Image Editor – Part 9 – Inline Editor Advanced Image Settings

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 ninth part of a series on using the WordPress Image Editor and Media Library. In this part we discuss how to use the Advanced Image Settings of the Inline Editor to restore the original image size, manually set height and width, change CSS classes and add inline styles.

Video Transcript

We can enter some alternate text here. You could reenter a caption if you wanted. You could enter a link URL. Right now this links to the image. This would link… this would put the link to the current page and this would give you none. You’re already familiar with this stuff. And those are the kinds of things you can do – set the alignment and that sort of thing. That’s what you can do here in the Advanced Settings… I mean, in the regular Edit Image Settings.

Now, in your Advanced Settings, you have some other things you can do. The first thing you can do, you still have this sliding scale image sizer but what you can do now is, you could take it back to its original size by selecting this button. Now that pops it out to height and width. And so you can use… jump it back out to its original size. You can apply a CSS class to the image. So if there was some reason why you wanted to… for example, not use align left size equals fold wp image.225, you know, you could actually delete this CSS class and add your own CSS class to it.

You can also manually add styles to it if you wanted to. When you manually add a style, this is actually called an inline style. You could add an inline style here. For example… well, let’s start off by doing it with these. These are 3 different inline styles that you might use. One of them is the border.

So let’s say you put a 2 pixel border in. Now you can see it gives you the style border width 2 pixels border color black border style solid. You could choose… oh I don’t want black. I want red so border color black, you just change to red. And if you want to change the size here, let’s say we take it down to 600 pixels. Notice how this does not automatically go down because this isn’t smart. It doesn’t know what the aspect ratio ought to be. So you could actually just tell it whatever you want it to be here. I’m going to leave it at 600 by 445 so you can see what happens. But we hit update here and then we hit update again and we go to the site. Now you can see what happened. The whole thing is distorted but it did get its red image.

So if you’re going to use this system… pardon me. If you’re going to use the inline system to give you sizes or to adjust the size, you need to know you know, what the right size would have been. And obviously, we’re going to take it back to its original size and if you wanted to figure out what that size should have been, you would essentially take 600, which is the width that we want it to be, divide it with the width that it actually is, 1177. Now you’ve got a ratio of the new width that you want it to be to the existing width and you multiply that ratio by the height of 445 pixels and it tells you that it should be 226 pixels. So now you can say 600 by 226 and it will be the right size, maintain the right aspect ratio. We’ll go ahead and say update to that just for grins. Say update again and then we’ll come back over here and refresh this. And now you can see it’s the right size, it’s the right aspect ratio, it’s got the red border around it.

Okay we’ll come back over Inline Edit, back to Advanced Settings. Let’s just say you don’t want the border. So we’re just going to delete border, now the border is gone. Let’s say you want vertical space. That is you want to make sure that… yeah, let’s give it 50 pixels of vertical space. What it’s going to do now then is put a margin top and a margin bottom to that image of 50 pixels. And so if we say update now and update and refresh it, it’s made more space here between the images, right? You can see that and I’ve used this at times in order to align images with text. A good example of that is actually my antiquated Tailoring the Website. This is the site I use for you know, Web Design. And if we go to… this right here…. In order to get my little images so they lined up with these paragraphs, each one of those images has a top and bottom alignment assigned to them so that the paragraph wouldn’t you know, float around it. That’s how I made that happen.

There are you know, lots of potential instances in which you might use a top or bottom alignment and let’s edit this again. The same thing can be true with horizontal. You could in fact, give it a horizontal space of 50 pixels. And now what it did is give you a margin everywhere.

Let’s say that you wanted a 20 pixel vertical space and a 50 pixel horizontal space but you didn’t want anything on the left. So you could just delete the margin left here. So now you just have a margin right space, a margin top and bottom space. You could decide that you want the margin top to be 120 and the margin bottom to be a 20. You know, so you have a lot of control over this once you’ve started doing something.

0 Comments… add one
0 comments… add one

Leave a Comment