About the WordPress “Media” Section

Originally Posted on February 3, 2012 Last Updated on March 20, 2013

This is a post intended for clients of ClickNathan.com. While you may find the information below useful, as it generally applies to WordPress, there may be information involving customized aspects of WordPress that aren’t out-of-the-box features. It was written for WordPress v. 3.3.1.

WordPress comes with a variety of ways to add images and other media to your site. In this post we’ll cover both the Media navigation link as well as the Upload/Insert functionality present on all Editor screens (ie, Posts > Add New, Pages > Add New, etc.).

The WordPress Media Section

This is a one stop shop for viewing everything every uploaded to your site via the Upload/Insert functionality in WordPress. From this section you can view anything you’ve ever uploaded, as well as add new media.

Note: New media uploaded via this interface is not associated with any particular piece of content on the site (ie, a Post, Page, etc.). It’s functionality is therefore most useful, in my opinion, for uploading content that might be used in a Widget or when editing your own HTML via the Editor. In most cases, you’ll probably just want to use the Upload/Insert functionality.

Defining “Media” in WordPress

Media: Any file uploaded via WordPress upload/insert functionality in the post editor, or via the Media > Add New navigation. It includes, but is not necessarily limited to, jpegs, gifs, pngs, and other image files, as well as PDFs, Word documents, Excel spreadsheets and other documents, even video and audio*.

Note: Video and audio are not fully supported right out of the box with WordPress. Video can be handled most easily via a 3rd party service like YouTube or Vimeo. More on adding Video and Audio to your site.

Media > Library

screenshot of the WordPress Media table — An example of the Media Library listing in WordPress as of v. 3.3.1

As noted above, visiting this area will simply show you a list of all media ever uploaded via WordPress. You can browse through the list or use the search functionality at the top right of the page to find a particular piece of media. Once you’ve found what you’re looking for, you can hover over the name of that piece of media to get a few additional options, such as Deleting or Viewing the item, or Editing it. Editing basically allows you to attach additional pieces of information to the file, such as adding a Title, Alternate Text or a Caption to an image. We’ll cover these in more detail here later on down the page. Additionally, if you’ve uploaded a file via the Media > Add New section of the site, you’ll see an option to “Attach” the file. This allows you to associate this particular file with a Post, Page or other piece of content on the site. For example, you might upload a picture of a baseball via Media > Add New and then a few weeks later write a post on baseball. You could go into the Media > Library section of WordPress, find the file, click the Attach link, and then associate that with your new post about baseball.

Media > Add New

This section essentially mirrors the functionality described in the next section, with the exception that the file will not be Attached to any particular piece of content.

How to Use the Upload/Insert Functionality in the WordPress Editor

This is actually one of the most complicated parts of WordPress to use, but once you figure it out, it’s a powerful piece of the publishing puzzle. We’ll go step by step through the entire process of uploading an image and adding it to your site, even creating an image gallery on your site. Once you understand how images work, you can apply that to just about any other type of content WordPress will allow you to upload.

To get started, in WordPress go to Pages > Add New, or edit an existing Page or Post in WordPress.
Click the Add Media button above the content editor
A modal box, sometimes called a popover, will appear on the screen. This is the interface for uploading your files.
There are three ways of adding content to the post:
- From Computer is the default method, and it allows you to drag files from a folder or the desktop of your computer directly into WordPress, or click Select Files to open a window that will let you browse your hard drive and find the image you want.
- From URL allows you to enter the URL of an image or other file from somewhere else on the web and have it inserted into your site. This does not import the image to your website or upload it to your server. Basically, you’re just linking to the image from it’s original source (ie, website). So if the original site that was hosting the file ever takes it down, or blocks access to it, the image will appear broken on your website. For this reason, I don’t recommend using the From Computer functionality. If you want to use an image from another website, you should first make sure you have permission to use it, and once you do, download it to your hard drive and upload it via the From Computer functionality.
- Media Library allows you to grab an existing file from your Media Library and insert it into the post.
For the purposes of this tutorial, use the From Computer method to upload an image to your site. Try and upload a large image (ie, 1000px wide or bigger) so we can fully explore all of the options available.
After uploading the image (or more precisely, durring), you’ll see a progress bar indicating how far along the upload is. When that is completed, it will expand to show you more information about the file, if available. Let’s look at what all of those fields do.
Descriptive Information. You’ll see a thumbnail of the image (cropped to a square), the filename, what type of file it is, when it was uploaded and the dimensions.
Edit Image is a fairly powerful piece of functionality that allows you to rotate, crop and scale the image, if it’s not quite the way you wanted it on upload. Note that with scaling, WordPress automatically creates a few sizes of the image for you when you upload it, so while you can create additional (smaller) sizes of an image, you don’t always need to. More on that below.
Title. This is the name of the image. It is used in the Media Library to help you find the image, but also as the HTML Title attribute of the <img> tag itself. This attribute will populate the little yellow box that appears when you hover over the image on the front end of the site.
Alternate Text. This is an optional field, but you really should complete it for every image. It populates the HTML Alt attribute of the <img> tag, and is used by screen readers to help people with visual impairments understand what the image is. It should be brief, but descriptive of what the image is. If you have a picture of a black cat on a fence looking cute, this field might be populated with “cute black cat on fence”. If the point of an image is to convey an idea, such as a lightbulb above a man’s head, you could even enter in “man with a great idea” or just “lightbulb floating over a man’s head, as though he’s thought of an idea”.
Caption. This is optional. Not adding it will have no ill effects. If you enter something here though, it will appear below the image on the front end of the site.
Description. I do not implement this functionality on most of my client’s sites, as in my opinion it pretty much mirrors the Caption functionality in most situations.
Link URL. You can copy/paste or manually enter a URL here, if you want the image to link somewhere. There are also three buttons you can use to make your life easier:
- None which means the image will not be a link.
- File URL which will make the image link directly to it’s original file. The user will be taken to a screen that has nothing but the image on it, and they’ll need to click their browser’s back button to return to your site.
- Attachment Post URL will link them to a page on your website with all of the usual header (ie, logo, navigation, etc), content and design aspects, but the page’s content will be your image.
Alignment allows you to determine how the image will be presented on the front end. Choosing None will give your image no styling (including any default borders or other effects images might naturally get on your site). Left and Right aligned images will do as you’d imagine, and any text or other content will flow around them. Center will center the image, and no content will be on either the left or right side of the image.
Size. When you upload an image to WordPress, it automatically resizes it three times to certain sizes, as set in Settings > Media. Some specific notes on resizing:
- The three sizes are determined via the Settings > Media area and these can be changed therein. However, I typically set these three sizes up to be the optimal ones for your site’s particular layout. Changing these could result in images that are too large for your site’s content area and therefore break the site or make it look bad. Also, changing these settings does not retroactively update all files on the site. Anything uploaded with the previous sizes will still be at those sizes, and only new uploads will be resized to the new settings.
- Each size will have the dimensions of the image listed beside it in parenthesis.
- Thumbnail is a set size. It will always be a certain width x a certain height, no matter what the original size of the image was. WordPress looks at the settings for the size thumbnails should be (say 150px x 150px) and then looks at the image. If the image, in our example, is not a square, it will draw the biggest square it can in the center of the image, and then crop off any excess top/bottom or left/right, leaving you with a consistently sized thumbnail for every image ever uploaded.
- Medium. I typically set this to a little less than half the width of your site’s content area, so you can choose this size if you want to add an image in that will allow text to flow around it (when using the Align options.
- Large. I typically set this to be the full width of your site’s content area, so you can use this for larger, full column width images.
- Full Size is as it says, whatever the full size of the image was when you uploaded it. Too large of images can break your site, so check the results after using this image size, you may need to scale it down.
- WordPress will only scale images down. For this reason, uploading a large image is the best way to ensure you get all three sizes. WordPress does not scale images to larger sizes because doing so typically makes an image look bad, worse as it tries to make it larger and larger. So if you upload the largest size possible, you’ll be more likely to get all three available sizes. Of course, you’ll also use more bandwidth and storage space on your server this way, so if you know you only need an image to be 200px x 200px (or only have it at that size), feel free to upload that size as well.
On some sites, you can click the Use as Featured Image link to assign the image as the primary image for the post or Page. You’ll receive notification if this feature does something particular on your site.
Click Insert into Post to add the image to the Post Editor, and you’re all set!

So that covers how to add a single image. If you want to add a gallery of images…

How to Add a Gallery of Images to WordPress

You’ll need to have gone through the steps above as I won’t cover any of the redundant items here. Once you have, feel free to dive in here:

Click Insert/Upload to get started.
Before, we added one image, but using the From Computer functionality, you can actually upload multiple images at once. Either drag and drop a few images or select them from your hard drive (note, using the Select Files button, hold the Command Key (on a Mac) or Control Key (on a PC) to select multiple files at once).
After the files have uploaded, you can click the Show link next to them to edit their Titles, Captions, etc. This is completely optional for the purposes of this tutorial.
Click Save all Changes.
The modal box will refresh and you’ll now have a new tab across the top: Gallery. Click it.
You’ll now see all of your files listed again, and a new section below them Gallery Settings. Let’s review those settings:
- Link Thumbnails to determines if, when a gallery image is clicked, it links to the file itself (opened in a new window with nothing else on the page) or the Attachment Page (which, as described above, is a page with all of your site’s normal layout displayed, and the image itself as the page content.
- Order Images By allows you to choose a few different options for what order the images will appear in.
- Order: Ascending means first first, Descending means last first. So if you chose Title in the Order Images By field, Descending would list them alphabetically from Z – A, Ascending would list them A – Z.
- Gallery Columns. I typically override this so that galleries simply display as many thumbnails across before dropping to a new line as is appropriate for your site’s design.
Click Insert Gallery to place the gallery in your site. If you’re in Visual mode, you’ll see a large image placeholder for the gallery. If you’re in HMTL mode, you’ll see shortcode that looks something like [gallery file="file"] with slight variations depending on the options you chose. This is referred to as a shortcode in WordPress and tells WordPress to insert the gallery in that position on the front end of the site.

That’s it! View the live page on the front end to see the results, and tweak as necessary!

Adding Video and Audio to Your Site

While WordPress handles images, and even documents like PDFs or Excel Spreadsheets, pretty well, it’s not so great with Audio and Video out of the box. If your particular project includes audio on your site, you’ll receive specific information on how to add that most effectively.

For video, it’s much easier though, thanks to YouTube and Vimeo. If you want to add a piece of video to your site, the best way to do it is to create a YouTube account, upload your video there, and then do one of the following:

Copy the Embed Code that YouTube provides via it’s Share functionality (usually below any post on YouTube.com or via a menu item in the player on other sites) directly into the HTML view where you want the video to display. This method is the most customizable, but you need to make certain you don’t embed the video any larger than the content area of your front end site.
Just copy and paste the URL link to the video on YouTube. WordPress can often use this to get all the info it needs to simply add the video to your site. This isn’t foolproof though, so sometimes you’ll have no choice other than to use the Embed Code.

Vimeo is an alternative to YouTube. It’s not as popular, but I sometimes use it because you can customize the colors of the player, which at times makes it fit into your site’s design a little better.

Up Next? Adding Forms to Your Website
← Back to the WordPress Walk Thru

Up Next: About the WordPress "Pages" Section