x
Bookmark

WordPress – Adding Media

Video Tutorial

Script & Screenshots

In this video I’m going to show you how to add images to your posts and pages.

The first step is to click on the location you want to add the image.  By placing your cursor within your text, you can add images in line with your content. You can also place your cursor on a blank line if you want the image to appear by itself instead.  I’m going to add an image at the top of the page and the start of the first paragraph so that my image will be in line with my content.  It’s a good idea to place your cursor on the left margin of your text, even if you want the image to appear on the right. That’s because there is a special setting called Alignment that allows you to control whether the image appears on the right or the left side of the text. It even controls how text flows around the image automatically.

To add an image, click on the Add Media button.

If your image isn’t already uploaded to your media folder, click on Upload Files to upload your image from your computer.

 Click on the Select Files button.

Browse to the image on your computer and select it.

Click on the Open button.

Make sure the image you want to add is highlighted in blue and has a check mark on it.  You can also see at the bottom it says, 1 selected and shows a thumbnail of the image.

Next you’ll want to select the Attachment Display Settings.  The Attachment Display Settings pane controls how the image is displayed when viewed on the site.

The first setting is alignment.  This sets the alignment of the image.  For this image, I’m going to choose Right.   This aligns the image on the right hand margin, and any text that is on the page wraps (or flows) around the image to the available space on the left.

Next is the ‘Link To’ setting.  For this image I’m going to select Media File.  This links your inserted image directly to the original, full-size version of the file.

Below the Media File box, it will display the URL to the image files.

The last setting, is Size.  For this image I have 2 options, Full Size and Thumbnail.  I’m going to select Thumbnail.  This displays a small thumbnail-sized version of your image on the page/post. Note, by default the Thumbnail size is a square, so some cropping of your original image may occur.

Once you’ve finished changing the settings, click on Insert into page.

As you can see, the photo is on the right with all the text wrapped around it.

Now if we go to the published version and you click on the image.

It opens up the full size image in the window.

I’m now going to add another image a little lower on the page.  I’m going to put my cursor at the start of the paragraph again.

I’m going to choose an image that is already uploaded in my media library.

This image I’m going to align on the left margin of the page which will have the text wrap around the image on the right.

For the ‘Link To’, I’m going to select none.  This setting will remove the link completely, rendering the image “un-clickable”.

For the size, I’m going to choose Medium.

Click on Insert into Page.

You can see the image is on the left margin and the text is to the right.

At any time, you can edit an image by clicking on the image.  After you click on it, it will open up a box above the image.  Here you can change the alignment, edit it, or delete it.

The first four buttons will change the alignment.

If I change the alignment to None, it will remove the text wrapping.

Now only one line of text will run next to the image.  This setting doesn’t look good here, so I will change it back to left aligned.

If you’d like to move an image, you have the option to delete the photo and re-add it.  Or you can drag it to another spot.  Dragging it can be a little tricky to get it in the exact spot you want.  Sometimes it will be easier to delete and re-add.  If you do drag it, I’ve found if you can get the cursor to appear in the line where you’d like the new image to be.

For my next image, I’m going to add it in between two paragraphs.

Click on Add Media.

I’m going to upload another image from my computer.

Click on Select Files.

Browse to your file and select your image.

Click on Open.

For this image I’d like it to be Center aligned.  This setting aligns the image to the center of the page, with no text displayed around it.

I’m going to select Custom URL.  This Allows you to set a custom URL for your image to link to when clicked.

I’m going to have it link to another website.  This is where you’d type in the URL, starting with http://

For the size, I’m going to select Full Size and see what it looks like.

Click on the Insert into page button.

As you can see it’s center aligned and no text wrapping around it.

To edit an image, click on the image.  Then click on the Pencil button.

I can change the Size.  I’m going to change it to a Custom Size.

I’m going to change the width to be a little smaller.

Click on the Update button to save any changes.

I’m not thrilled with the size, so I’m going to edit the file again.

I could use the custom size option again or I can change the original size of the image.  Here I’ll show you how to Edit the Original image file.  You can do this by clicking on the Edit Original button.  This option comes in handy when your image is quite large.  Shrinking the image can help with loading times.

I’m going to change the dimensions.  I’m going to type in a new width.

Type in the new dimensions for your image.  Keep in mind, these dimensions must be smaller than the original dimensions.

Click on the Scale button after you’ve entered the new size.

Click on the Update button to update the image.

Now that I’ve updated the original image size, I’d like to change this image to use the new full size instead of the Custom Size.  I’ll click on the Edit button again.

I’m going to change it from Custom Size to Full Size.

Click on Update to save your changes.

I have a few more settings to show you.  Click on Edit again.

Under Image Details is the Caption and Alternative text boxes.

The first option is the Caption for the image. The text you enter here will be displayed below the image.

Please note, if an image has a caption added to it, you cannot drag the image in the editor to a different location.  This is because WordPress will add short code around the image for the caption.  If you move the image, the image will move, but the caption will stay in its original location.  You’ll need to either remove the caption and move it, or delete the image and re-add the image.

I’m going to add a Caption on my photo by typing it into the box.

Click the Update button to save your changes.

Click on the Page Update button to save your page changes.

Now I’ll show you what the caption looks like on my theme.

You can see how it added my caption right below my image.  Depending on what theme you’re using, your caption could look differently than mine.

The other option is the Alternative Text.  Alt text or alternate text is an attribute added to an image tag in HTML. This text appears inside the image container when the image cannot be displayed.  It helps search engines understand what an image is about.  Alternate text is also very helpful in case images on a page cannot be found.

For my image, I’m going to add spaces between the words so that it’s “Official Merchandise Logo”.

Click the Update button to save the changes.

words so that it’s “Official Merchandise Logo”.

There’s one more set of options for your images under the Edit option.  It’s the Advanced Options.  If they aren’t expanded, click on the arrow to expand them.

The Image title is another attribute that can be added to the image tag in HTML. It is used to provide a title for your image.  This title is displayed in a popup when a user moves their mouse over to an image.

The image CSS Class is more for advanced users.  This is where you could change the styling of how your images display.  Different themes might also display your images differently.  I’ll go over how to use this feature in another video.

You can choose if your link opens in a new tab.  This is especially useful if you’re linking to another website.  This helps keep visitors from exiting your website when they close that link.  Instead it takes them back to your website.

You can also set a link relation and a Link CSS Class.

The Link Rel sets the link relationship or link type.  The Link CSS Class adds a CSS class to the link HTML that can then be used to style the link via a custom CSS plugin or a child theme.  This is another more advanced feature.

Click on the Update button once you’re all done making changes.

And be sure to click on the Update button to save your changes on your page.  Or you can click on Preview Changes to verify your changes before publishing them.

If you would like to delete an image, click on the image you’d like to delete.

Click on the ‘X’ button to remove the image from your page.

That’s it for this video.  I’ll see you in the next one.

WordPress Basics
Pre Website
Buy a Domain   (5:20)
Buy Hosting   (7:44)
Create a Sitemap   (7:14)
Introduction To WordPress
WordPress vs WordPress.org vs WordPress.com   (3:32)
Installing WordPress on your own hosting   (7:56)
Logging into the admin dashboard   (2:22)
Admin Dashboard Overview   (9:22)
Dashboard Screen Options   (3:37)
Changing WordPress Settings
General Settings   (4:34)
Writing Settings   (3:53)
Reading Settings   (1:55)
Discussion Settings   (6:46)
Media Settings   (2:19)
Permalinks Settings   (4:37)
Setting up your site
Change Themes   (2:49)
Customize Themes   (7:50)
Menu Screen Options   (3:50)
Add A Menu   (4:07)
Edit Your Menus   (5:13)
Sidebar Widgets   (7:50)
Footer Widgets   (9:18)
Adding Users   (4:47)
Edit Users   (5:00)
Adding Content
Pages vs. Posts   (2:47)
Post & Page Screen Options   (8:15)
Visual Editor Menu   (11:44)
Post Formats   (4:18)
Publishing a Post   (11:13)
Publishing a Page   (8:42)
Adding Images   (11:48)
Adding a PDF as a Link   (2:35)
Linking Text to a URL   (3:15)
Pasting Text From Word or Other Editor   (7:26)
Categories & Tags   (7:35)
Custom Fields
Scheduling a Post   (1:32)
Updating WordPress
Updating WordPress   (1:50)
Updating Plugins   (1:50)
Plugins
Plugins Overview   (7:15)
Plugin Screen Options   (1:14)
X

Forgot Password?

Join Us

Password Reset
Please enter your e-mail address. You will receive a new password via e-mail.