Using the WordPress Media Library

 

Video:

Transcript:

In this video, we're gonna talk about the media library that is built into WordPress. The media library allows you to store images, music, video and be able to use them just about anywhere you want, posts pages, whatever.
We're looking here at the dashboard and, on the left, there's a media link and here's the library. Right now, we all have one thing in it and it's the image from our home page that you saw in an earlier video.
Now, right here in the library, you can search your items. You can filter them by type, by date uploaded and you can make them look a little different. You can also add new, you can select from your home machine, you can see your photos in your finder and simply upload them. Let's upload this one and there we are, it's done. Now we can click on it, you can see the image nice and large and you can see information about this image. There's the file and the type, when it was uploaded, the file size and the dimensions. You can see the URL of the picture itself right here and then there's a title. I recommend always putting in alt text. This makes it easier for people with screen readers to be able to know what's going on with your images. Here we could view the attachment page, edit more details or delete permanently. I'm going to click Edit more details. This allows us to give the image a title, a caption, there's the alternate text and the description can actually have HTML in it.
So now I'm going to hit update without actually changing anything but then I want to go back to here and down in the lower left there's a button that says edit image. This allows you to do some very rudimentary image editing: you can rotate it and you can flip it and, depending on whether or not your server has the right tools, you can crop. Over here you can actually change the size of the image, you could crop it and then you could choose to apply changes to only some of the sizes, which brings me to a cool thing. When you upload an image, WordPress actually makes multiple sizes of it. We're going to take a look at the deep. We're going to take a look at the settings in greater detail later but for now let's take a quick look.
Every time you upload an image, it creates a thumbnail size of 150 by 150 pixels a medium size of 300 by 300 and a large size of 1024 by 1024. Now, these are maximum heights so if you have one that is wider than tall it'll keep the aspect ratio. It won't always give you square images. It also maintains the original one so that you can work with it later if you need to so. That's how you upload and manage images right in the media library, but you can interact with the media library in other places. For example, under posts here are our news items here's the classic rock concert in the park I'm going to click right here at the beginning of our text and click add media, I'm going to upload, and this is very much like the uploader in the media library, and now I can choose alignment left, center or right. When you choose left and you can choose to link to nothing linked directly to the image link to a page showing the image or a custom URL so you could link to anything. You could link to Google if you wanted to. I'm gonna leave it at media file and then you can choose a size. The full size would be ridiculously large. That would be really painful for people to download and view but we can choose large medium and thumbnail. I'm going to choose me and click insert into post and there you see it.
So now I'll click update and on the front end you can see our image. But now, what if we want to move it to the right? If you click it, there's some options here for alignment and now it's on the right. If you click it again and click the pencil, you can edit the caption, the alternate text. You could change the alignment, the size, how it links and there's even an Advanced section where you can put in some custom CSS items. You can also edit which is just like the Edit we saw before, or you can replace it. You can actually put up a different image in place of this one. You can also grab the corners of the image and resize it. Now it doesn't actually resize the image it stretches it which made me fine in this case it looks just fine but some images don't stretch well so you should experiment with that. Let's do one more. I'm going to click here at the top again, click add media and now I'm simply going to select an image that's already there and our alt text is already there so I can simply insert into post. Except I forgot that I want the large one centered so now I click update and it looks like that and that's actually a little bit too big, so I go back and I say large is too large so we'll make it medium and float:left which is far more readable for our visitors. However, I still left it to click to original. The original is actually very very large so people can zoom in if they want to.
The media library can hold more things than just images. Can also hold audio and video, and we'll take a look at that in a future video.

Tags: WordPress

OSTraining

Support

OSTraining teaches people how to build great websites, focusing on PHP platforms such as WordPress, Joomla, Magento and Drupal. You can learn more about there service by visiting OSTraining.com or by subscribing to their Youtube channel.