How to Insert Images into WordPress Posts and Pages
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.
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.
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.
Hello! I just wish to give you a big thumbs up for your great information you’ve got right here on this post. I’ll be coming back to your blog for more soon.
Very helpful tutorial. WordPress changed up a bit so you might want to revise the post. I wanted to send someone here instead of having to explain how to align images.
sir i want to make the header image and upper text .how we make editable in dashboard .please tell me .
Thank you very much, Michael, for this info.
However, I’m looking for some advice/direction.
I can insert images easy enough. But, I am having troubles getting the text to flow around the images.
My webpage has four sections. Each section will start with a header using H3 tag. Each section will have its own picture. And, each section will have some prose, but not much prose.
In two of the four sections, the images I insert are larger than the amount of text for each of those sections. So, the header for the section #3 appears up beside (to the right) of the picture for section #2.
How can I force each of my H3 tagged lines to start on their own, new row?
Make sense? (I’m trying to get my beta-site onto a web server. At present, I can’t send you a link to view my problem.)
Any response would be appreciated.