Course: Adding Images and Video

In this course we’ll show you how to add images and video to your pages and posts. We’ll cover the following topics:

  1. Understanding the Media Library
  2. Adding images to pages and posts
  3. Adding video to pages and posts

Understanding the Media Library

In this lesson, we’re going to show you how to use the Media Library on your WordPress websites. We’ll cover the following topics:

  • The Media Library interface
  • Selecting and editing images

We’ll cover these topics in two ways:

  • With text and screenshots
  • With video

Let’s get started!


Understanding the Media Library: Text and screenshots

The Media Library interface

The Media Library includes any and all media that you’ve uploaded to your website. This would include images, videos, audio, and any documents you’ve uploaded.

You can access the Media Library from the WordPress Dashboard by clicking on the ‘Media’ panel:

The Media panel in the WordPress Dashboard

The Media panel in the WordPress Dashboard

This will take you to a list of the media you’ve uploaded. The functionality on this page is identical to the functionality on the Pages and Posts list pages. There are a few options on this page that you’ll want to be familiar with:

Options in the Media Library

Options in the Media Library

The first is the Add New button, which allows you to add new media directly to the library. You can also add media within pages and posts, which we’ll cover in the next lesson. Any media added via pages and posts is automatically added to the Media Library.

The next is the Bulk Actions drop-down menu. You can use this to delete multiple images from the library.

Next is the Show all dates filter. This filter can be used to create a view of media uploaded within a specific month.

Finally, there’s the Search Media field. Once you have a lot of media uploaded to your site, this will make it easy to find the media you’re looking for.

Much as with pages and posts, you can select a specific image by clicking on it’s title:

Selecting a media item to edit

Selecting a media item to edit

This will take you to the media item’s page, where there are a few additional options:

An individual item in the Media Library

An individual item in the Media Library

First is the Edit Image button, which will take you to a page where you can edit your image’s attributes.

Next is the Caption field. Whatever you type into this field will appear as a caption below your image. The caption of the screenshot above is ‘An individual item in the Media Library’.

Below the Caption field is the Alternative Text field. This field will display text in place of the image, and is used for those who can’t see or don’t display images.

Finally, the File URL field provides the URL of the image. We used this URL when we added this image to a footer widget in the Adding widgets to the sidebar and footer lesson.

You can then click on the ‘Edit Image’ button, and this will take you to a page with even more editing options:

Edit options on the Edit Media page

Edit options on the Edit Media page

The row of Editing Tools above the image will allow you to crop, rotate, and flip the image. Also included are undo and redo buttons.

The Scale Image panel allows you to scale the image to a smaller size. Note that you cannot increase the size of an image; only image reduction is allowed.

The Image Crop is another means of cropping the image. Whereas the editing tool allows you to crop the image visually, this panel allows you to crop the image by changing its numeric values.

Finally, the Save button is used to save your changes once they’re completed.


Understanding the Media Library: Video

Watch this video to see the options available in the Media Library:


Congratulations on completing Lesson 1! You should now understand:

  1. The Media Library interface
  2. How to select and edit images

Adding images to pages and posts

In this lesson, we’re going to show you how to add images to your pages and posts. We’ll cover this in two ways:

  • With text and screenshots
  • With video

Let’s get started!


Adding images to pages and posts: Text and screenshots

Update: Client Review and Approval

In our Client review and approval lesson, we described the important factors in submitting your website to your client for review. We’ve now heard back from Stover Tree Service, and they’ve requested the following changes:

  1. Add an image of trees to the Home page
  2. Upload their new logo
  3. Change the color of the H1 headings to green

In this lesson, we’ll add the image of trees to their Home page. We’ll make the remaining changes in future lessons.

The process for adding images to posts is identical to that of adding them to pages. So for this lesson, we’ll use our Stover Tree Service example site and add an image to the Home page.

We can start by opening the Home page in the Page Editor, placing our cursor where we want to insert the image, and then clicking on the ‘Add Media’ button:

The Add Media button in the Page Editor

The Add Media button in the Page Editor

This opens the Insert Media dialog box, which defaults to ‘Upload Files’. We can then click on the ‘Select Files’ button to select the image we want to upload:

The Insert Media dialog box

The Insert Media dialog box

Notice that there’s also a tab next to ‘Upload Files’ named ‘Media Library’. If we wanted to insert an image that has already been uploaded to the Media Library, we could click on this tab and select it.

We can then navigate to and select the image we want to insert, and then click on the ‘Open’ button:

Selecting an image to insert on the Home page

Selecting an image to insert on the Home page

This adds the image to the Media Library, and opens a new dialog box where we can edit the image settings:

Editing the image settings

Editing the image settings

We don’t want a caption for this image, so we’ve left that field blank. We do want to include alt text, so we’ve entered some text into that field.

For the final settings, we want the image to be right-aligned, we don’t want it to link to anything else, and we want the Full Size to be displayed. We’ll provide more details on the settings options here in the video that concludes this lesson.

Finally, we want to click on the ‘Insert into page’ button to insert the image into our Home page:

Image of trees inserted into Home page

Image of trees inserted into Home page

We can then click on the ‘Update’ button to save the change, and then view our Home page with the new image:

Image of trees added to Home page

Image of trees added to Home page


Adding images to pages and posts: Video

Watch this video to see the steps we’ve outlined above:


Congratulations on completing Lesson 2! You should now understand how to add images to your pages and posts.


Adding video to pages and posts

In this lesson, we’re going to show you how to add video to your pages and posts. We’ll cover this in two ways:

  • With text and screenshots
  • With video

Let’s get started!


Adding images to pages and posts: Text and screenshots

Stover Tree Service has uploaded a video to YouTube, and they’ve asked us to add it to their Services page. We’ll be using the Embed Code that YouTube provides to add this video to their page. As with images, the process for adding video to posts is identical.

Tip: Embedding Videos in WordPress

We recommend using embedded videos whenever you need to add video to your pages. This is the simplest and most effective method, and all of the major video sites include an embed-code option.

If you’ve never uploaded a video to YouTube, here are a couple of tutorials to help you get started:

Uploading a video to YouTube

Embedding a YouTube video

We’ll start by navigating to the Services page in the Page Editor. Because we’re adding HTML code, we can’t add it in the ‘Visual’ view we’ve been using to this point. We’ll need to click on the ‘Text’ tab to view our code:

Switching to Text View in the Page Editor

Switching to Text View in the Page Editor

Once in the text view, we can see some differences in the display; namely, we can now see HTML tags around our headings:

HTML tags in Text View

HTML tags in Text View

We’re going to place our embedded video right below the numbered list. So we can place our cursor there, paste the embed code we got from YouTube, and click on the ‘Update’ button:

Adding the embed code in Text View

Adding the embed code in Text View

We can then view the Services page to confirm that the video has been added:

Video added to page

Video added to page


Adding images to pages and posts: Video

Watch this video to see how you can add a video to your WordPress page:


Congratulations on completing Lesson 3! You should now understand how to add video to your pages and posts.

This concludes the Adding Images and Video course. In our next course, we’ll show you how to wrap up any loose ends and complete your site.

Go to next Course: Completing the Site