How To Add Media To Your Content

How To Add Media To Your Content

About This Lesson

In this lesson I’ll walk you through how to add images, audio and video to your content. (Although I recommend against adding videos directly into your content and I’ll explain why in this lesson. I’ll also show you a much better alternative.)

As with most things in WordPress, once you know how to do it, it’s all pretty easy!

Prerequisites

Before starting this lesson, I recommend that you,

1) Understand the difference between WordPress posts and pages

2) Learn all about WordPress posts

3) Learn all about WordPress pages

It’s also worth noting, this is a part of a series of lessons which show you how to create the content for your website. You can see the other lessons in this series by visiting the links below.

Action Steps

Once again in this lesson there are no action steps, instead this lesson is more about making sure you understand all of the following,

1) How To Insert An Image

1.1) Inserting An Image From Your Computer

1.2) Inserting An Image You’ve Already Uploaded

2) Understand What The “Image Attachment Details” Are

2.1) Attachment Details

2.2) Attachment Display Settings

3) How To Edit Images

4) Inserting Audio And Video Directly Into Your Content

Course Navigation

How To Create A Website Course

This is Step 4 Part 2b – See the full course here!

How To Use WordPress Course

This is Step 4 Part 2b – See the full course here!

Read All About It

How To Insert An Image

To begin with, you obviously need to be within the page or post that you want to add your image to.

Inserting An Image From Your Computer

To insert an image from your computer, simply put the cursor where you want the image to go, then click and drag the image from your computer, into WordPress.

Upload The Image To Your Site

This will then begin to upload the image for you. (Like in the image below).

Image Uploading

When it’s finished uploading,

Insert Into Page

  1. Set how you want the image to look in your content, by going through the “Attachment Details”, which we’ll cover in a moment
  2. Then click “Insert Into Page”

This will then insert the image into your page. And that’s it.

Inserted Image

Inserting An Image You’ve Already Uploaded

If you’ve already uploaded an image to WordPress and you want to use the same image on another page, rather then uploading it twice, you can simply insert the same image into your new page.

To do this, put the cursor where you want the image to go and this time click “Add Media”.

Add Media

You can then scroll through all the previous images you’ve uploaded, by looking through the “Media Library”.

When you find the image you want to insert, simply click it and a tick will appear in the top right hand corner. (Like in the image below). The tick lets you know what image you’re about to insert.

Inserted An Uploaded Image

Then like before,

  1. Set how you want the image to show in your content, by going through the “Attachment Details”, which we’ll cover in a moment
  2. Then click “Insert Into Page”

Which will then insert the image into your page.

Understand What The “Image Attachment Details” Are

When you add an image to your content you’ll have a number of different options to choose from, which let you set how your image looks and how it acts. So let me quickly explain what these are.

Image Attachment Details

Attachment Details

Attachment DetailsTo begin with, let me walk you through what the attachment details are.

  1. Title: – The text you put in here will show if a visitor hovers over your image
  2. Caption: – This lets you add a caption just below the image
  3. Alt Text: – If for any reason your image doesn’t load, the text you put in here will be displayed instead. I normally just put a small description of what the image is about
  4. Description: – This lets you give a description for this particular image

Attachment Display Settings

Attachment Display SettingsYou also have the following set of options,

1) Alignment: – The alignment setting lets you choose where you want the image to be in your content and where the text should go in relation to the image.

  • Alignment left: – aligns the image to the left of the page, with the text to the right
  • Alignment right: – aligns the image to the right of the page, with the text to the left
  • Alignment center: – aligns the image to the center of the page, with no text around it
  • Alignment none: – Has no alignment

2) Link To: – This lets you choose if you want to make the image a link and if you do, where you want the link to point to. The options you have with this are,

  • Media File: – This links directly to the full size version of the image
  • Attachment Page: – This links to a page that WordPress automatically creates for the image
  • Custom URL: – This gives you the option to link to any page on your site or any other website. Simply choose this option, then type out the address
  • None: – You can also make it so the image isn’t a link

3) Size: – Then finally you have the option to choose what size image you want to insert. So choose from this list.

These sizes will be from the additional images that WordPress automatically adds to your site. Don’t know what this is? See the media settings lesson.

How To Edit Images

If you want to edit or resize the image, simply select the image by clicking it.

Edit Or Resize The Image

Then,

  1. If you want to resize the image, click and drag the little squares and make the image the size you want
  2. If you want to change the alignment of the image, use these four icons
  3. If you want to edit some of the details about the image, click the edit image button (which looks like a pencil)

When you click the edit image button, you’ll be taken to the main image editing screen.

The Main Image Editing Screen

  1. Where you can change the image details, such as the “Attachment Details” and the “Attachment Display Settings“.
  2. Or you can resize the image.

Inserting Audio And Video Directly Into Your Content

You can also insert audio and video directly into your content. It’s the exact same process as uploading an image from your computer.

However, when it comes to videos, I would STRONGLY recommend against this.

Videos are generally pretty big files and adding them into your site will take up disk space and bandwidth (traffic to and from your site).

Even if your host say you get unlimited disk space/bandwidth, there is an upper limit. 99% of people will probably never reach this. I’ve never reached it myself and I have over 20 websites on one hosting plan. But if you start adding lots of audio or videos into your site, then you will run into problems.

YouTube

Personally I recommend using YouTube to host all your videos and then embed them into your content. Much like I do when I embed videos on this site.

This has the benefit of not only saving you disk space and bandwidth, not only is it free to use, but it can also bring in traffic to your site, from people who find your video on YouTube. (Did you know that YouTube is the second biggest search engine in the world, after Google?)

I’ve put together a separate lesson which shows you exactly how to embed YouTube videos.

However, like I said a moment ago, if you still want to insert videos directly into your content, then it’s the exact same process as uploading an image from your computer!

And that’s it for this lesson!

Next Steps

I’ve created a number of lessons for you, so you can see exactly how to create the content for your website,

Then when you’ve gone through those, the next step in creating your website and using WordPress, will be Step 5 – Install and setup your WordPress theme.

I actually recommend doing step 4 and step 5 together. As I talked about in a previous lesson in step 4, how your content looks, will depend on the theme you’re using.

So rather then creating all your content now, with a theme that’s going to be styled one way, and then changing your theme, to a theme that’s going to be styled completely different, I recommend picking your theme first and then start creating your content.