WordPress Basics: Uploading and Displaying Images
This article continues a series of tutorials covering the very basics of using WordPress. In this part 5 of the series, you will learn how to upload and display images (and other media) with your WordPress-powered site. Estimated time required: 15 minutes.
Upload & display images
To upload and display images (and/or any supported file type), follow these seven simple steps:
- 1. Login and go to the Write Post panel
- If you haven’t already, log in to the WordPress Admin Area. 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.
- 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, check out Publishing Posts. That’s all there is to it! Don’t forget to check your new post to verify everything looks as expected.
That concludes our WordPress Basics series. Thank you for following along, may you have much success with WordPress.
More Information
About the Author
Jeff Starr = Web Developer. Security Specialist. WordPress Buff.
