Monday, June 16, 2014

How to Insert Images into WordPress Posts and Pages

Inserting images into WordPress posts and pages can usually trip up new users–we get asked about this a lot. Once you do it a few times succesfully, though, you’ll feel like a master. What follows is a quick and dirty overview of how to do it.

1. Open a New Post or Page, or Edit and Existing Post or Page

The first thing you need to do is to open a document to work on. In WordPress you can choose from posts or pages, and they both work the same way. Go to your WordPress dashboard and click on the left navigation for either posts or pages. When that navigation button expands either select “edit” or “add new’.

2. Upload Your Image

Next, you want to upload your image. When you have the Post/Page edit window open, place the cursor where you want your image to appear in the document. Then click the icon that appears at the top of the edit window, indicated by a red circle in the following image (it looks like a grey rectangle with a thin grey border around it):
Next, you will see that once you click the graphic icon for image uploads indicated in the picture above, the “add an image” dialogue box pops up, as shown in the picture below. You’ll note that in this picture the “from computer” tab is highlighted– but you can also upload from a URL. Today we will learn how to upload from computer. Keep in mind that once images are uploaded, resizing them or editing them is difficult or impossible, so you want to make sure your images are sized right before you upload.
Hit the “choose file” button and browse to where the picture is on your computer– just like you do with e-mail. Once you have the file selected, hit the “upload” button. Don’t close this window yet–you will enter parameters in the next step.

3. Choose Your Parameters

Once you have hit the “upload” button your image will upload (your image is now stored on your web server/web hosting), the “add an image” dialog window changes dynamically to show you a range of parameters. You can see a picture of the dialog window below:

I have highlighted the common parameters that are most important when uploading an image.

Link URL

First is the “Link URL”–this selection box fills automatically with the link location of the image file. If this box contains a URL (as shown in the picture, it is filled with a long URL), then the image will be a clickable link in your post. If this box is empty (you can empty it by clicking the “none” button just under the box) then your image will not be a clickable link. In most cases, you do not want your images to be clickable links, so I almost always hit that “none” button to empty that box.

Alignment: Left, Right, Center

The next parameter is “alignment”– you simply select the radio button for left, center, or right. Left and Right alignment will make your text wrap around the image; “none” means that your text will not wrap around the image.

Size

The last parameter is “size”– here you simply select the size, in pixels, for which you want the image to appear. As you can see in this example, I have selected a full-size image that is 560 pixels wide, and 492 pixels high.

Insert Into Post

The last step, once your parameters are set, is simply to hit the “insert into post” button–your image will be inserted into the post in the position where your cursor was when you upload your image.
If you have made a mistake, simply highlight the image, hit the delete key on your keyboard to remove it and start over.

4. Making Changes Later

Of course, this tutorial would not be complete if we did not at least brush on how to make changes later– and WordPress is pretty well set up to make edits to the way your image displays. See the screenshot below:

When you wave your cursor over the image in the document edit window, you will see two small icons appear–the icon of an image will bring up the edit window from step three–from there you can change parameters, like size and orientation left, center, or right. The second icon is the familiar “do not enter” symbol– clicking this will remove the image.
Good Luck!

No comments: