Good morning everybody and welcome to this special seminar entitled “Everything You Want to Know About the WordPress Media Library But Were Afraid to Ask“. Today we’re going to talk about the new WordPress 3.9 media library. WordPress 3.9 has introduced a whole bunch of new functions, improvements and changes to the media library and we’ll be talking about all those things today.
Applies to Any WordPress Theme
We’re going to start off right away by simply inserting images into a page. I’m using Thesis to demonstrate this but I want you to know that it doesn’t really matter what theme you’re using. We’re working with the WordPress media library and it’s not dependent upon Thesis or Genesis or any other theme.
2 Kinds of Images in WordPress
WordPress has two different kinds of images that we’ll be talking about today and those are attachment images and featured images. We’re going to start out by talking about attachment images and later on we’ll get to featured images.
Attachment Images
An attachment image is an image that you actually insert into the post. Let’s edit this page and let’s add an image below this introductory sentence. Click the Add Media button and it brings up the media library showing me all the images that I already have in there. But let’s assume for the moment that I don’t have any in there yet so I can show you how to upload a file.
I’m just going to select upload files and then I’ll select the file that I want, I’ll pick this file right here. So I’ve selected the image and now I’m going to take a look at the attachment details. That tells me the name of the image, the date that I uploaded it and the full size of the image. There’s an image link too which we’ll get to later and a delete permanently link then it gives us the title.
Attachment Details
The title takes the name of the image but I’m just going to say “Title” so that you can see where that is. Caption is going to be “Caption” and then “Forbidden, in the North Cascades” for Alt Text. I’m going to use exactly the same except that I’m going to change it to “alt”. And I’ll use the same thing in Description except I’m going to change this to “Description” because we’re going to use this so you can see where each of these settings actually shows up as it relates to the image. So we’ve got Title, Caption, Alt Text and Description.
The title is the thing that shows up when you hover over the image, the caption is going to show up below the image, the alt text is alternative text for people who are sight impaired and so it describes what the image is and then the description shows up inside the media library but no place else.
Attachment Display Settings
In the attachment display settings, you have a choice of alignment.
Alignment
It can be left which will shift the media to the left and allows text wrap, it can be center which does not allow any text wrapping. It can be right which allows text wrapping on the right and it can be none which doesn’t have any alignment at all and also doesn’t allow any text wrapping.
Linking
You can link to none which is generally what you’re going to do if you’re inserting the image into the page but you can also link it to its own media file if you want someone to be able to download the image.
You can link it to an attachment page which is often the WordPress default and it’ll just show the image all by itself. And then you can link it to a custom URL if you want to use it as an image link to link to some place else. We’re going to pick none here.
Sizing
Then you have the choice of image sizes. You can choose from the following.
- Thumbnail size
- Medium size
- Large size
- Full size
The full size is the size that we uploaded here. I’m going to choose medium, I’m going to make it left aligned and I’m going to insert it into the page.
Insert Image Into a Page
Then we will update this, view the page and view the change. Oh, that’s kind of interesting, there’s a little extra padding there. But if we hover over it with our mouse nothing happens unless it’s a link but this is the caption.
Let’s view the page source and you can see that inside the image tag itself it has the alt tag, that’s what the alt is and it actually should be showing us the title tag in there as well. Well, maybe it doesn’t do that when there’s a caption assigned to it.
Editing the Image
So that’s how you insert an attachment image into a post or a page. Let’s come back over here to edit the page.
Changing the Size
We can edit this image by clicking on it and take it down to its thumbnail image or we can go back to that medium size image. Just update after each change.
We can use these little things to resize the image. It never works to resize the image so that it’s bigger because it will distort it but you can always resize it to be smaller if there’s a reason why that’s useful to you. I’ll resize it and show you. Now it’s smaller.
Change Settings
We can edit the page again and get rid of the caption if we like. Hit update, view the page again and there it is without a caption. Let’s see if the title is there now. No, I must have failed to save the title. Then if we edit the page again, we can change this so that instead of being left aligned it’s right aligned. View the page and now it’s aligned to the right.
We can also edit this just to choose a different image size. It’s set at a custom size right now, let’s just go ahead and choose the medium size. Update it, view the page and the image is inserted into the post.
So that’s how you add an attachment image to the post or a page. This is called an attachment image.