Open source training & tutorials from experienced, passionate people
By A Web Design
To insert an image to a page(s) in WordPress 3.X.X login to WordPress as administrator, by simply entering the url_of_your_website/wp-admin in your Browser. Enter the appropriate username and password {which was provided while installing Wordpress} and then click on Log In as shown in Diagram 1.
Diagram 1
After logging in as WordPress Admin, a Dashboard page opens as shown in Diagram 2.
The Dashboard provides access to different WordPress functions and features.
Diagram 2
In the left menu, locate the link Pages. Click Pages. From the drop down menu that appears click on Pages as shown in Diagram 3.
Diagram 3
Click the Title of the page as shown in Diagram 4 or click Edit to open the page in its editable mode.
Diagram 4
Once on the page, insert the cursor where you want place the image, and click the upload media button as shown in Diagram 5.
Diagram 5
A dialog box Add an Image is displayed. Here, you can add media files from your computer, or from a URL through the WordPress Media Library.
The From Computer will provide the option to upload an image from your computer.
The From URL will provide the option to upload an image which belongs to another website, to display in your page.
The Media Library will display images that have already been uploaded and ready for use.
In this tutorial, we will upload an image from our computer. Click Select Files as shown in Diagram 6.
Diagram 6
After clicking Select Files, a file navigator window opens. Navigate to the appropriate folder where the imageto be uploaded is located, select and open the file as shown in Diagram 7.
Diagram 7
WordPress will process the image and upload it to media library (url_of_ur_website/wp-content/uploads/{year}/{numerical_named_folder}/{all_images}).
A dialog box is displayed with image details as shown in Diagram 8.
Enter the following details as required.
Title: WordPress will put the image name in this field. It’s very useful to insert keywords of your page in this title.
Alternate Text: Enter a small meaningful text of your image. It’s an optional.
Caption: If you want to wrap the image with the text, leave it empty. The caption should be as small as possible.
Description: It is optional to type in, but in case your image won’t show up, this description will show.
Link URL: This is the path to the image. By default it takes absolute path to image. You can set relative path to image(s).
Alignment: Position set for the image.
Size: It is set to Full size.
Once you’re done, click Insert into Post as shown in Diagram 8.
Diagram 8
In HTML view, the codespec to insert an image is displayed where the cursor was set initially, as shown in Diagram 9.
Diagram 9
On the right hand side publish box, click Update to save the changes made on the page as shown in Diagram 10.
Diagram 10
In the front end of website, the image has been successfully inserted on the page at the cursor position as shown in Diagram 11.
Diagram 11
Please wait...