Adding Images and Video

Multimedia content is an important part of any successful website. It adds a visual aid to a page that can grab a reader’s attention and keep them interested in your content. It can also provide valuable support to an argument or article you are writing. WordPress allows you to build a media library for your site by uploading images directly to your site.

Adding an Image

To upload and insert an image into your content page, click the plus (+) button and navigate to the “Image” block.

Screenshot of Image block

 

Once you have added the Image block, you have the option to upload an image from your computer, your media library, or from a URL. Let’s add an image from the Media Library.

Screenshot of Image upload options

This is your Media Library. Any photos, documents, and other types of media will be located in this library. As you can see, I already have a file uploaded that can be selected here. If you want to upload a new image, navigate to the “Upload Files” tab and click “Select Files”.

Screenshot of Media Library

Once you have uploaded your images, you can click “Select” in the bottom right hand corner.

Screenshot of new image in media library

Once you have inserted your image into the page, you can perform a number of important functions such as:

  • Adjusting any settings, such as the image’s alignment on the page or the size of the image, or linking the image to another site
  • Adding Alt Text (Alternative Text). Please add alt text to each image you upload to WordPress. Alt text describes an image to those who cannot see it. Type in a short description of the image so those with screen readers are able to enjoy your content too.
  • Adding captions to the image. Captions appear underneath your image whereas alt text will not.

Screenshot of Image block settings

Once you have adjusted the settings to the way you want, click “Update” or “Publish” to save the changes. Let’s take a look at our image below:

Screenshot previewing "Page 1"

Embedding Video

Do you have an instructional video you want to display on your site? To embed a video from YouTube, you will need to get the embed code from the video. Do this by going to the YouTube video you would like to incorporate in your page then click “Share” button located under the video.

Screenshot of YouTube video

A window will pop up, then click on the “Embed” button. You will see something that looks like this. Copy the embed code then navigate to the WordPress page where you want the video. I am going to embed this video on the homepage.

Screenshot of a YouTube iframe embed code

On your WordPress page, click the plus (+) button and find the “Custom HTML” block. Paste the embed code you copied from YouTube into this box.

Screenshot of Custom HTML block in WordPress

Your page will look something like this. Do not worry, the video will auto-generate when you or another user views your page. There is one more step, we have to do to complete the process. That step is adding a title to the video. This step is similar to adding alt text to a photo. We must add a title to the video, so people with screen readers know what the video is about. This allows for more users to enjoy your content!

Screenshot of HTML embed code in WordPress

To add a title to your video, type the information as shown in the image below. After “iframe” at the beginning of the embed code, type the following: title=“add a brief description of your video here Replace add a brief description of your video with a brief written description of what the video is about.

Screenshot of adding a title to a video

Click “Publish” or “Update” at the top right-hand corner of the screen to save your changes. Now you are done! Let’s see how the video looks on our tutorial site. As you can see, the video is now embedded and it can be played directly from your site!

Screenshot of WordPress site without a menu

As always, properly cite all images and videos you use that is not your own work, or get permission to use a video before embedding it. Plagiarism at Bridgewater is an Honor Code Violation and can be easily avoided by taking the time to properly cite any materials you use.

Next Session: Creating Menus

Last Page<<<|>>> Next Page of Tutorial