Build Your Own Business Website header image

How to Use the WordPress Image Editor – Part 7 – Understanding Image Versions

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 seventh part of a series on using the WordPress Image Editor and Media Library. In this part we discuss the various versions of an image created when using the Medial Library image editor.

Video Transcript

This is that image and if we go take a look at our page that we were working on, let’s see..yeah, that’s not it. If we go look at our page… pardon me. If we look at our page, you can see that that didn’t actually change the size of the image. And in fact, if we look at the name of this image, let’s just inspect this element for a second. Drag my inspect the element over here, if you look at this image, the name of this image… it is… or the address, it is http: such and such 2010 05 6 7 2011 such and such .png.

Now if we go take a look at it in the Media Library and look at its address, you can see that it has a different address, right? It’s got this stuff in front of it but then it also has this dash e such and such, right? That’s because this editing actually changed the name…it created a new image with a different name. And so, when you do that, that doesn’t actually change the image here because the original image with its original name still stays here. So if you wanted this to get smaller, what you really needed to do was delete that image and insert the new smaller image.

And so for example, we’ll just go ahead and delete that image and sitting here, we will insert the image. We’re going to add the image from our Media Library and we’re going to show that one and we’re going to insert the full size, left aligned with no link URL. We’re going to insert into the post and if we hit update, let’s look at the page, view the page. Now we have the image at the reduced size that we wanted.

Now unfortunately, I didn’t accommodate the width of the caption border when I set the size of this image. And this caption border is about 20 pixels so what I really should have done was not make this 600 but I should have made it 560. And so, if we come back over to the Media Library and we edit this image again and we scale the image and instead of 600, we make it 560. Hit scale, hit save, hit update Media, refresh this page… you’re going to see it doesn’t change in size. Refresh this page, it doesn’t change in size because it’s still the other image with the… so now we have 3 versions of the same image in our database. We have the great, big version, we have the version that was 600 pixels wide and we have the version that’s 560 which is not… we don’t see yet.

And so, what we do here then is to delete that image and yeah, once again, insert it from my Media Library… show. Now you can see the full size is 560 by 210. We insert it into the post, we update the post, refresh the page and now it’s going to be its smaller size. Okay so that’s how that stuff works together.

Now I will say that WordPress is not really the best… I mean, this didn’t do the best job possible of scaling the image down and we might actually have you know, a nicer, clearer image had we done this in Photoshop rather than doing this in WordPress. But nevertheless, we do have this feature in WordPress. It gives us a chance to do that.

Somebody just asked where the Media Library is. Well, from your dashboard, you can see that Media Library is right here. Generally speaking, it’s under Posts and it’s almost always under Posts. Your dashboard might look slightly different than this because I’m using the WordPress 3.2 release candidate 1 and you’re probably using WordPress 3.1 and there’s been a stylistic change here. But nevertheless, Media Library is right here. Actually, you might be used to just seeing this Media but if you click that down, you’ll see Media Library.

0 Comments… add one
0 comments… add one

Leave a Comment