FREELessons: 17Length: 2.3 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.3 Uploading and Organizing Media

In this lesson, we’ll talk about media files. That means images, videos, audio tracks, icons, PDF documents, and so on, which are stored in WordPress media folders. WordPress allows you to upload pretty much any kind of file you want. There are a few exceptions but, in general, all the common file extensions are accepted.

In this lesson, you’ll learn how to upload a new media file, how to organize these files in the WordPress media library, and also how to use them in posts and pages. Let’s begin.

Related Links

3.3 Uploading and Organizing Media

Welcome to lesson number seven, where we'll talk about media files. And that means images, videos, audio tracks, icons, PDF documents, and so on. WordPress allows you to upload pretty much any kind of file. There are certain exceptions, but overall, all the common extensions are accepted. In this lesson, you'll learn how to upload a new media file, how to organize these files in the media library, and also how to use them in posts and pages. Let's begin. Now to upload a file, you would go to Media, and this will open up the media library. As you can see, we have no files uploaded just yet. But to do that, you would either click this Add New link or this button. And this will open the upload screen. And from here, you can either drop the files with drag and drop from your browser, or you can hit Select Files and select them from your computer this way. So let's do it like this, Open. Please notice that there is a maximum upload file size of 8 MB. And currently, two of my files here exceed that limit. As you can see the audio track and the movie, or the video file exceed that 8 MB limit. So I'm unable to upload those big images. Right, I have three JPG images that I got from Unsplash. And by the way, you can find links to this in the lesson notes. These were uploaded with no problems whatsoever. So now, if we go back to our Library we'll find our three JPG images that we just uploaded. And from this point, we can do a number of things. We can filter these by their type, so here we have images, audio, video, unattached. Currently I just have images, so I'm gonna just leave it on all media items. You can filter by dates, all right, so when were these uploaded. And also you can do a bulk select, which basically allows you to select multiple items. And once you select them, you have the option to delete them, let's click Cancel there. You can also search media items. So if, for example, I'm searching for dog, or let's actually find the title here, it's Derek, it's actually the photographer's name. So if we search for Derek, it's gonna find that picture right there. Now when you open one of these pictures, you'll get to the Attachment Details page, or modal window. Basically, it shows you the image itself and a couple of different information here, the file name, the type, the date on which it was uploaded, the file size, and also the dimensions in pixels. Here, you can add an alt text. So if the image goes missing, the alt text will be displayed instead. This is actually very important, I recommend you always do this when you upload images in WordPress. Or, in fact, just when you're using images in your websites, they should all have an alternative text. The title, the caption, this is something that can be displayed in the front end, later on. You can add the description. Here it tells you, the author or the person who uploaded it. And you can also get a direct link to that image so you can reference it later. And here further down, you can delete it, you can edit some more details about it, and this takes to you a more complex edit page. And I can also see it in its own separate page, just like this. Now, when it comes to editing the actual image and not its information, you can do that by clicking this Edit Image button here under the image. Now you have additional editing options for the image here, you can do an image rotation, for example, using these controls. You can scale the image to near dimension by using this section right here. You can do a crop, an image crop. So if you just wanna save a portion of the image, you can do that, no problem. Either by entering values manually here or by using the mouse just like I showed you. And then you also have some settings for the thumbnails. Now, a thumbnail is actually a smaller version of the big image that's used usually in the blog index. So the blog index is a page where you see a list of your blog posts, okay? And instead of displaying the whole image for each individual post, you can usually display a single thumbnail, which is a smaller, resized version of the featured image in that post. Well, this is what these settings refer to. So that's how you can edit the images that you uploaded. Now, how can you use this in a post or a page? Well, images that are uploaded to the media library are available everywhere in WordPress. So if you go to Posts, and when we go to the Hello World post, you'll see that I can add the new block here. I can search for image, and I can choose an image from the media library. And just like that, this image is now inserted into my post. Let's do a quick refresh, and there it is. Now, you can also use an image as a featured image for the post. So while we're in here in Gutenberg, I can go to the right side bar, I can click Set featured image. And I can choose, An image from my media library. So now this has been set as my featured image, I can replace it or I can remove it altogether. But if I save it, and I go back, You'll see that our post now has two images. So this is the featured image, which is like a descriptive image for the post. While this one is just an image inside the post, it's inside the content of the post. And this is how it looks like on this theme that we're using. But if you're using a different theme, the image may be displayed differently. If we open the post in its own page, you will see that the image is now part of this large background that fills up the entire screen. While this image remained the same, this is, as I was saying, part of the content. So, that's how you work with images and posts. It works exactly the same way in pages. So we have the sample page. And if we wanna add an image to it, we can do that through right here in the content. And if we want to add a featured image, it's the exact same process. Go to the right side here, set featured image, choose from media library, or you can upload an image then and there directly. And just choose the image that you want, select update, so now our page looks like that. You'll notice that this image that is displayed here has a filter apply to it, probably, it has this blue overlay, very cool, all right? And that's a closer look at working with media files in a WordPress. Now, let's move onto comments. These represent another content type in WordPress, alongside posts, users, and links. So, in the next lesson you'll learn what comments are all about, and how to manage them. See you there.

Back to the top