WordPress Basics: Uploading and Displaying Images

Note: This article continues a series of tutorials covering the very basics of using WordPress.

This brief tutorial outlines the process of uploading images and displaying them in your posts. This tutorial applies specifically to WordPress version 2.0+, but may be extrapolated to other versions.

1. Login and go to the Write Post panel
If you have not done so already, login to the WordPress Admin area (for help with this, go here). After you are logged in, go to the "Write Post" panel by clicking the "Write" tab and then the "Write Post" sub-tab (see example). The text fields displayed in the Write Post panel will be blank unless you are editing an existing post (for help with this, go here).
2. Scroll down to locate the Upload subpanel
The "Upload" subpanel is located immediately below the post text field. Scroll down a bit — it is the same width as the post text field and is colored light blue (see example). Initially, the only tab you will see is the "Upload" tab. However, after you upload your first file, two additional tabs will appear: the "Browse" and "Browse All" tabs. As you may have guessed, the "Upload" tab opens the file upload feature, while the "Browse" tabs open a thumbnail gallery of your uploaded files.
3. Upload a file
Under the Upload tab, click the "Browse" button. This will open into a folder on your local machine. Navigate to and select the image which you would like to use in your post and click the "Open" button (see example). The path to the image should now appear in the text field next to the Browse button. Next, add a title to your image file in the "Title" text field. Also if you wish, you may add a file description in the "Description" text field, although it is not required.
4. Click Upload
With all of the information in place, click on the "Upload" button located in the lower-right corner of the Upload File subpanel (see example). To cancel your order, click the cancel button. After your file is uploaded (this may take some time — be patient!), a thumbnail version of the file is automatically created and should appear under a new tab called "Browse". Additionally, a thumbnail should appear in the other tab, "Browse All".
5. Additional Uploads
You may wish to upload more than one file. If so, repeat steps 3 and 4 for each additional file. Notice that there are two different tabs available for viewing thumbnails of uploaded images, "Browse" and "Browse All". To view only thumbnails for images uploaded during the current session, click on the "Browse" tab. To view all uploaded files available, click on the "Browse All" tab. Once you have several files uploaded, you will notice navigational tabs to the right of the Browse tabs (see example). These enable you to navigate through the uploaded files in incremental fashion. Also, note that multimedia files will not display a thumbnail, but rather will display an options link.
6. Setting the Options
Each uploaded file is represented under the browse tabs with either a thumbnail (for images) or a text link (for multimedia files). Each item also provides a set of options when it is clicked. Click on a thumbnail, for example, and you will be presented with five overlayed menu options (see example). The first of these options tells WordPress whether you want to work with the original image or its automatically created thumbnail. The next option tells WordPress whether you would like to display the thumbnail or image (depending on your previous choice) as-is, linked to its corresponding image, or linked to a page. After making that decision, use the next menu item to automatically insert the required code into the post-editor text-field (directly above). Once the code has been inserted, you may change anything you wish, but make sure you know what you are doing first. The next option enables you to delete the uploaded file and last option simply closes the menu box.
7. Publish the Post
After you have uploaded and inserted your image(s) or file(s), complete the post and publish it to the internet (for help with this, go here). That’s all there is to it! Don’t forget to check your new post to verify everything looks as expected.

More Information