Part 1 – Add an Image to a Post or Page
This is the first part of a series on using the WordPress Image Editor and Media Library. In this series we discuss all aspects of inserting images into posts or pages as well as editing all aspects of those images. In this first part we discuss how to insert an image into a post or page using the Media Library.
How to use the WordPress Image Editor and that’s what we’re going to spend probably the rest of our time today. There are other things that I want to do today too but we’re just going to work on the WordPress Image Editor. And Brian, I’ve not forgotten about your request for the conversation about the portfolio image stuff. Unfortunately, I ended up spending so much time trying to resolve the hardware issue that I just didn’t have time to prepare for that. So we’re just going to have to take that on another time.
But having said that, we’re going to go over to Internet Explorer now for this and this is a page that I created for purpose of demonstrating how to use the WordPress Image Editor. And so, we’re just going to go ahead and edit this page. And right now, what we’re working in is WordPress 3.2 Beta 2 so you know, sometime in the next month or so, this is going to become the official you know, version of WordPress. So I just wanted you to see what it looks like in this new context especially because it’s got this totally terrific editor or edit ability.
You can see right now of course, you’ve got this little narrow space here within which to edit and typically, if you needed more space, what you would do is you know, expand that. Grab that corner and expand down so that you can get in there or you can use a setting to always keep it large. You know, there’s a setting under Writing Settings here where you can say size of post box and you can make it 20 lines or 50 lines or you know, however many lines you want and that does in fact, increase the size of that box.
So if we go back to pages and where did that page go? Oh there it is. I can’t believe I didn’t see that.
Anyway, you go to that page now and now the box is larger, right? But it’s got this new system now where you can just simply hit that full screen editor and now you can see the whole editor. And it does have you know, a bunch of the boxes up here and if you click on HTML, you can see the HTML view. And if you click on the visual, you can see the visual view. You still have the insert image and the link but you don’t have the rest of those cool little parts that you had before.
So anyway, we’ll go back over to visual editor here and what we’re going to do is we’re going to insert an image. When you hit insert an image, you get this add image button or the dialogue, I’m sorry. And the Add Image dialogue gives you generally 3 choices. It gives you this 4th choice if you’ve got NextGen Gallery already installed. So you can choose to select one from your computer, you can choose to select one from another website, or you can choose to select an image that’s already inside of your Media Library. We are going to… or in this case, we’ve got a NextGen Gallery here. You can choose to select one from a gallery and if you’re going to do that, you would select the gallery that you want to select from and then pick it that way and then so on and so forth.
But we’re going to pick one from the computer here and you have 2 different uploader choices available to you. You’ve got the Flash uploader which we’re doing here and you’ve got the browser uploader which you can switch to. Now the browser uploader only allows you to upload one image at a time. Although unfortunately, Flash and Chrome on my computer working so poorly together that I have to use this version and it’s also why we’re doing this in Internet Explorer rather than in Chrome which is what I usually use.
So anyway, you simply select a file and then upload it. And once it’s there, what you have is a bunch of pieces to look at. The first is the meta associated with the image itself. So when you look at this, you can see that the dimensions for example, it’s 1177 pixels wide by 445 pixels tall. It’s probably too big actually to be used effectively in the site. You can see what kind of an image it is, it’s a PNG image rather than a GIF or a JPG and then you can see its file name. Next, you have this Edit Image button which we’re going to talk about in a few minutes but not right off the bat. Then you have the places for you to change the text associated with the image. So for example, you could give it a title and let’s see, this is going to be… I’m going to say, “Display the Excerpt Box.”
Now alt text is text that’s important both for search engine optimization of your images as well as for accessibility of your site. Somebody who is essentially using a screen reader to read your site, they can’t see the image, generally speaking, so this alt text describes the image. It’s the perfect place for you to put you know, descriptive information and I would just say, “This image shows how to display the excerpt box.”
And then if you want a caption, you can add a caption to this and grab the title for that purpose, for the caption. You could also put a description in here, some sort of description. Now, this description is only going to show up in this place. It doesn’t show up anywhere else but if you need some help remembering what an image might happen to be about, you can put a description there for that purpose.
Then you have this link URL. Now by default, what it’s linking to is it’s linking to the file itself so that if you click on that image, it takes you to a page that displays only that image. Now, as a general rule, I think that’s significantly less than useful so I myself wouldn’t bother with that. If that’s all you’re going to do then I would just simply select none so that the image doesn’t link to anything.
You could choose though to link to the file that you’re inserting it into and if you do that, that’s going to put the page address of the file that you’re working on there. Oh pardon me, I’m sorry. That’s not file URL. File URL is the thing we just deleted which is the address of the image. But you could put post URL which is the address of the post or page that you are inserting it into.
You could also put none in here and put any external link to it. So for example, if we wanted it linked to my website, https://www.byobwebsite.com and now, this will be an image link that will link off to my website. So that’s the link URL.
The next thing you have is your alignment. Now you can position it so that once it’s positioned, all the text is below it and in that case, you would select none. If the image is smaller than the space it’s going in to, it’ll be centered in the space and text won’t wrap around it. The rest of them are text wraps so you could set it to… so that the text would wrap off the left of it, text would wrap around both sides of it or text will wrap to the right of it.
And then as it turns out, WordPress creates 4 different sizes of image for you that you could choose from. Now these image sizes are actually created or these image sizes are set back in the Settings menu. And so, for example, if we come back over to the other website we were looking at and go down to the Settings menu, even though this is not WordPress 3.2, if you go down to your Settings menu and you look at Media, here is where you set the maximum thumbnail size. These are WordPress thumbnails, not Thesis thumbnails where you set the thumbnail size, where you can set the maximum height and width of your medium and where you can set the maximum height and width to a large size.
So if you know that for example, any place you’re going to put this in, the biggest size you ever want is 560 pixels. You could easily you know, put that in there as your maximum width and then for the large size, and then the large size would limit the size to 560 pixels. You wouldn’t have this 1024 as a choice. And then you have the full size, the whole size of the image. You have this range of choices for this.
I am going to insert the medium size for a moment here just because it wouldn’t fit into full size. I’ll show you what it looks like in full size and we’ll save all changes. Actually, what I was supposed to do is hit Insert Into Post. So if we go back to show for a second and we hit Insert Into Post, you’ll see that the image actually is way bigger than will actually fit inside this post area. And if we update the post and then exit full screen and view the page… oh, isn’t that interesting? What I did was I cut off… you know, I think that’s new in WordPress 3.2. I think in regular WordPress, it would have just blown the site up by being way too big. But, maybe not.
Anyway, we’re going to go back to… we’re going to close this. We’re going to go back and edit this image.