WordPress.org
Get WordPress

Managing Media

This lesson plan discusses the various ways that WordPress Media Manager handles media.

Objectives

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

Materials Needed

Readiness 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 .mov .wmv .avi .mpg .ogv .3gp .3g2)?

  • Do you know where to find them on your computer?

Notes for the Presenter

  • 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.

  • 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.

Lesson Outline

  • Demonstrate how to add media like videos, images, documents into a post or page.

  • Show how to retrieve the URL/link for any media in the Media Library.

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

A screenshot of the "Image block" from the Edit Post page. The description test says "Upload an image file, pick one from your media library, or add one with a URL." Three buttons - Upload, Media Library and Insert from URL are also visible.
Image block for uploading images.

Images can be uploaded to a WordPress page, using the image block. You can choose the image block from among the listed options upon clicking the + button on the editor. Alternatively, you can type the / character on the editor to directly search and find the image block.

Once the block is added to your page, you can choose to upload an image from the computer, choose an image from the media library, or embed an external image using its URL. Once the image is added, you will see a host of options populated on the right sidebar of the editor under the “Block” section.

Image block after uploading an image.

Like any other block, the image block you have uploaded, can be placed anywhere in the site. Clicking on the image will enable a few options in the top right corner, which allow you to align the image to left, right, or center. You can also hyperlink the uploaded image, or crop the image. The uploaded image can also be changed.

The block options section (on the right sidebar) presents a host of options as well. You can choose to make the image rounded, add alt text to the image, and change the image dimensions.

Documents

File block for uploading files.

You can insert documents by using the File block. Click on the plus icon on the editor or use the / button to search for the file block. Then, click on the upload file to choose the document that you would like to upload. The uploaded file will now appear, along with a download button. You can now edit the name of the file to any name you choose. Like any other block, the file block can be moved and placed anywhere in the page editor.

Your published page with the uploaded document should look similar to this:

File block after uploading a file (PDF Document).

Sound File

Sound file embed options.

You can insert audio file by using the Audio block. Click on the plus icon or use the / button to search for the audio block. Use the upload button in the block to upload an audio file from your computer, choose an existing file from the media library, or insert an existing audio file from the URL. The audio block supports all popular audio formats such as, .wav .ogg .mp3, among others. Like any other block, the audio block can be moved and placed anywhere in the page editor.

Once the file has finished uploading, you will now see an audio player on the page, which allows you to stream the audio files. On the right sidebar, in the block settings, you will find options to enable autoplay, loop, along with options for preloading.

Sound file embed variations.

Video File

Video block for uploading videos.

Video files can be inserted using the video block. Click on the plus icon on the editor or use the / button to search for the video block. Once the block has been added to the page, click on the Upload button to upload the video from your computer. Alternatively, you can insert a video from the media library or embed an existing video with its URL. Like any other block, the video block can be moved and placed anywhere in the page editor.

Once the file has finished uploading, you will now see a video player on the page, which allows you to stream the video file. On the right sidebar, in the block settings, you will find options to enable autoplay, loop, mute, enable playback controls (which is enabled by default), and play inline. You will also find options for preloading – where you can choose “auto”, preload the metadata, or choose not to preload at all. This section also has an option to embed a poster image.

Video file embed variations.

Get the URL for Media Files

The Media Library is where you can find all the Image, Video and other files that you upload to the site. There are two ways that you can get the link/URL of a media file that’s already uploaded to the Media Library.

1. If you are using the Media Library ‘List’ view, hover over the media file to view the edit menu and then select the “Copy URL to clipboard” link.

Copy URL to clipboard option in List view

2. If you are using the Media Library ‘Grid’ view, click on the media file thumbnail/icon to display the ‘Attachment details’ dialog, and then click the “Copy URL to clipboard” button.

Copy URL to clipboard button on Attachment details page

Excercises

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”.

Assessment

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  

Lesson wrap-up

Tip: 💡 Follow with the Exercises and Assessment outlined above.