Managing Media

Description

This lesson plan discusses the various ways that WordPress Media Manager handles media. In this lesson plan, you will learn how to upload and insert image files, document files, audio files and video files.  You will also learn how to re-size, format, link and include these media files into your posts and pages.

Prerequisite Skills

• A basic knowledge of file types
• A basic knowledge of WordPress

Assets

• Twenty Sixteen Theme
• Sample Image file
• Sample Document File
• Sample Sound File
• Sample Video File
• lipsum.com

Screening Questions

• Are you familiar with the WordPress Dashboard?
• Do you have at least a basic knowledge of image file types (.jpg .png .gif)?
• Do you have at least a basic knowledge of document file types (.doc .xls .pps .pdf)?
• Do you have at least a basic knowledge of audio file types (.mp3 .m4a .ogg .wav)?
• Do you have at least a basic knowledge of video file types (.mp4, .m4v MPEG-4 .mov .wmv .avi .mpg .ogv .3gp .3g2)?
• Do you know where to find them on your computer?

Teacher Notes

• Performing a live demo while teaching the steps of this lesson is crucial to having the material “click” with the students.
• It is easier for students to work on a locally installed copy of WordPress. Set some time aside before class to assist students with installing WordPress locally if they need it. For more information on how to install WordPress locally, please visit our Teacher Resources page.
• While we would like participants to understand the different file types, it's not critical. As long as they are uploading one of the accepted file types they will learn from this module.

Hands-on Walkthrough

We're going to get started by having everyone log into their local WordPress install.  Now, let's each create a sample post or page with text (lorem ipsum is fine). We'll also each need to have a sample image, document, audio file and/or video file on our computers and  ready to upload. We are going to embed the media files into a post or page.

Images

[caption id="attachment_1755" align="alignright" width="177"] Adding media[/caption] We will start with both inserting an image from a URL and giving it a title or by uploading an image and adding a title, caption, alternative text, and description. First, pick an initial image alignment (Left, Center, Right or None). Next, pick a link option (None, Media File, Attachment Page, or Custom URL) and insert it into the post or the page. While still in the visual editor, now change the size of the image by dragging a corner. Let's see how that looks by clicking "preview changes". Next we want to go back to the visual editor, click on the image once, click on the pencil edit and modify the image caption, alternative text, alignment, size and link to something else.  Do this with several options, giving each an "update" and then "preview" to see the changes.

Documents

[caption id="attachment_1833" align="alignright" width="180"] Uploading a document[/caption] For documents, let's start with a body of text. Next, decide where to place the document link within the body of text. Once you have chosen a place for the linked document, upload a .pdf or similar type of document. Now change the following pieces of metadata:

• Title
• Caption
• Description of the link

Next, let's change the "Link To" to media file or attachment file. Now let's upload another document but use the other "Link To" option. Once we have both documents added to the page, let's change the anchor text of each document to something easier to read. By highlighting the link you'll be able to edit the link to open in a new tab and have an alt title. Your published page with the uploaded document should look similar to this: [caption id="attachment_1836" align="aligncenter" width="244"] uploaded documents with anchor text[/caption] Notice how the two links will look the same but act differently when clicked by a reader?

---

Sound File

[caption id="attachment_2294" align="alignright" width="150"] Sound file embed options[/caption] For a sound file, let's start with a body of text. Decide where you want to place the sound file within the body of text. Once you have chosen a place for the sound file, upload a ".wav" or similar type of file. Now change the following pieces of metadata:

• Title
• Artist
• Album
• Caption
• Description

We're going to use the same sound file but display it with all three options. Embed all three different variations using "Embed Media Player", "Link to Media File", and "Link to Attachment Page" within your page or post. The three links will look the same but act differently when clicked by a reader. Highlight each link, edit the link to open in a new tab and have an alt title. The published page with the uploaded file should look similar to this: [caption id="attachment_2293" align="aligncenter" width="463"] Sample sound file embed variations[/caption] Notice how the embed option works and the two links below will look the same but act differently when clicked by a reader?

---

Video File

For the video file let's start with a new post. We will not need sample text for this one. Once we have the new post, let's upload the sample video file and then change the "Title", "Caption", and "Description" for the file. [caption id="attachment_2661" align="aligncenter" width="274"] Changing the title, caption, and description[/caption] Now we can insert the video file into the post using the Embed Media Player option. Next, we'll once again use the same video file and insert it into your post using the "Link to Media File" option. Finally, insert the same video file into your post using the "Link to Attachment Page" option. [caption id="attachment_2662" align="aligncenter" width="285"] available attach display settings[/caption] Once all three options are on the same page, publish the post.  The resulting post should look something like this. [caption id="attachment_2663" align="aligncenter" width="380"] Published post with the same video inserted with all three display options[/caption] Now click on each of the links to see how each video behaves for the reader.

Exercises

Images

• Insert an image into a body of text.
• Add a title, caption, alternative text, and description.
• Change the image placement from "None" to "Center" to "Right" to "Left".
• Change the image size by dragging a corner or by clicking the pencil edit.
• Change what the image links to (media file, attachment page, custom URL, or none).

Documents

• Insert a document into a post or page.
• Add a title, caption, alternative text, and description.
• Choose between "Link to Media File" or "Link to Attachment Page".

Audio

• Insert an audio file into a post or a page.
• Add a title, artist, album, caption, and description.
• Choose between "Embed Media Player", "Link to Media File" or "Link to Attachment Page".

Video

• Insert a video file into a post or a page.
• Add a title, caption, and description.
• Choose between "Embed Media Player", "Link to Media File" or "Link to Attachment Page".

Quiz

You can upload anything into your media folders that you like.

1. True
2. False

Answer: 1. True

You should size your images to the exact size you want before you upload them to the Media Manager.

1. True
2. False

Answer: 2. False

Which of the following are not available labels for sound files?

1. Title
2. Artist
3. Album
4. Caption
5. Genre
6. Description

Answer: 5. Genre

Which of the following formats CAN NOT be uploaded?

1. .jpg
2. .png
3. .gif
4. .tiff
5. .bmp

Answer: 4. .tiff and 5. .bmp  

Additional resources

Managing Media in WordPress