This tutorial covers media in WordPress, specifically focusing on the WP Media Library and the ideal types of media to use and store in WP.
COPLACDigital's WordPress sites restrict the types of media that you can upload to your site. The types of media you can upload to and store on your site are:
- Print media — PDF
- Images — JPG, JPEG, PNG, and GIF
- Audio — MP3, MIDI, and MID*
- Video — MOV, WMV, and AVI*
*Although you can upload certain audio and video files to your site, we highly recommend that you do not permanently keep them on your site. Instead, audio should be hosted on a platform such as SoundCloud, which is designed to host and serve audio. Likewise, videos should be hosted on a platform such as YouTube or Vimeo, both of which are designed to host and serve video. WordPress was not made to host and serve complex media like audio and video, so the only types of media you should really keep on your site are print media and images.
The WordPress Media Library is where all of the files you've uploaded to your site are stored. To access your Media Library, you must be logged in to your site. From the Dashboard, choose "Media" from the main navigation menu on the left.
If your Media Library has any files in it, by default they will all display on the main "Media" screen. Your Media Library is not machine-dependent, so if you upload an image to your site from one computer, it will always be in your library (even if you log on from a different computer later).
You can toggle your library view between tiles or a list by clicking on either of these icons: 
From the media library, there are several things you can do:
- Add media files, either in bulk or one at a time
- Edit media files (basic editing actions only)
- Edit/Update file attributes and details
- Delete files
Method 1
One way to add media is through the Media Library. You can upload files one at a time or in bulk.
Method 2
Another common way of adding media to your site is doing it as you create each post/page by clicking the "Add Media" button above the editing interface when you want to add something.
Using this method allows you to upload media from your computer (label #1 below), choose media that's already in your Media Library (label #2), or bring in media that already exists online somewhere (label #3).
Inserting media that's already online just requires a media file URL, so it's a convenient way to add images without having to download and then upload them yourself. (Just make sure you aren't breaking copyright!) However, your site will have to pull from this URL each time the page/post with it loads. This means that if the URL for the image changes, the image will no longer work on your COPLACDigital site—so, use this method with caution!
For the rest of this tutorial, we'll cover the "Add Media" process for an image. After selecting the image you want to add, the interface will bring up details about it, along with settings that allow you to customize how it appears. When you upload an image, make sure it has a title, caption, and alt text. Captions and alt text are particularly important for accessibility. You can also add a lengthier description if you want to.
The most important options as far as customizing how your image appears are the "Attachment Display Settings" at the bottom:
- Alignment controls the position of the image in relation to the text on your page. The options are Left, Center, Right, and None.
- Link To controls what happens if a visitor clicks on the image. The options are:
- None — Nothing happens.
- Media File — This option brings up the media file on an otherwise blank screen.
- Attachment Page — This option brings up a new page (in the template of your website) that includes the media file.
- Custom URL — This option allows you to have the media link to any URL of their choosing. It's useful in situations where you want, for example, an image to link to a specific webpage, whether or not that page is on your site.
- Size controls the size of your image. These size options are automatically generated by WordPress and are dependent upon the original size of your image. You'll see options like Thumbnail, Medium, Large, and Full Size. (You can also customize the size of the image, which we'll cover in Step 4 of this tutorial.)
DON'T FORGET! You MUST include citations for all of the images on your site. For more about image citation, see our Copyright and Citation Guide.
WordPress offers basic editing actions for media items. In this step, we'll continue to look at images to see how the editing functionality works.
Editing in the Media Library
If you open an image file in the Media Library, you should see a button below the image that says "Edit Image." Clicking this button will bring you to an interface where you can make very simple edits to your images. The editing actions available to you are (in order of appearance below): Crop, Rotate Counter-Clockwise, Rotate Clockwise, Flip Vertically, Flip Horizontally, Undo, and Redo.
On the right side of the editing interface, you'll also see options to Scale the image, which changes it to a different size while maintaining proper proportions. For best results, we recommend scaling the image before any cropping, flipping, or rotating. Additionally, images can only be scaled down (made smaller), not up (made bigger). If you try to scale up an image, it will become very blurry.
Below the scaling options is and Image Crop section, which can be used in conjunction with the Crop button. To crop an image, first click on it and drag to make a selection. You'll then see the Crop button become a darker gray, which means you can Crop the image. If desired, you can use the Image Crop options on the right-hand side of the screen to adjust the aspect ratio or the selection.
The edits you make to an image are reversible—you can restore the image to its originally uploaded form at any time. If you've made and saved changes to an image, you will see the "Restore Original Image" option between the scaling and cropping options on the right-hand side of the screen.
Restoring an image brings it back to the original form in which it was uploaded, getting rid of any changes you may have made in the editing interface. Previously edited copies of the image will not be deleted.
You can also add/edit the title, caption, alt text, and description for an image in the editing interface. However, you cannot edit the media file URL.
Editing in a Post/Page
You don't have to be in the Media Library to edit your images—you can also edit them directly from a post's or page's editing interface. (This method works only if you've already inserted the image into the post/page.) The process works exactly the same as it does in a post as it does in a page, so for the purposes of this tutorial, we'll just be saying "page."
To edit an image directly from a page, make sure you're in edit mode for that particular page. Find the image you want to edit, and click on it to bring up a few options:
Choose the pencil icon, which is the "Edit" action. From here, a screen displaying "Image Details" will appear. Here, you can add/change the image caption and alt text, as well as change the alignment, size, and linking. Changing the image size from this interface allows you to choose a custom size, so you can pick something other than the predetermined options that WordPress generates. Additionally, from here you can also bring up the editing interface from the Media Library by clicking on "Edit Original" below the image, and you can also change the image by clicking "Replace."
You aren't limited to the media in your library for your site—it's easy to bring in many other media types, including maps, timelines, image sliders, video, audio, and more. The best way to bring this media into your site is through embedding. Learn more about embedding from the Embedding Content tutorial.