Manually Inserting Image(s) Into WordPress Post(s)

Introduction:

In the previous tutorial(s) on this website we have covered how to create a virtual domain for WordPress. Please refer to the following tutorial(s) for your reference:
Prior Wordpress Installation ,
Creating a Wordpress Virtual Domain under Apache ,
Creating The MySQL Database And User For Your Wordpress Installation and Wordpress Installation.

NOTE: If WordPress is installed on some server, please use an FTP client like FileZilla or Cute FTP to navigate to the folders and files and folder.

In this tutorial, WordPress CMS has been installed on the local computer. We are using Windows file explorer to navigate to the Folders and files on the local computer.

Creating An Images Folder In WordPress:

Navigate to the WordPress set of folders belonging to your website as shown in Diagram 1.

NOTE: The “wordpress” is a virtual domain created for WordPress Installation. All the files and folder are under this virtual domain.

Diagram 1

NOTE: If images folder is already created as a sub-directory then skip the following step.

Create a new folder in the root of WordPress folder framework. Right Click -> New -> Folder as shown in Diagram 2.

Diagram 2

Rename the New Folder to images (or as required) as shown in Diagram 3.

Diagram 3

Navigate to the images folder and copy / paste all the image(s) required by your website in this folder as shown in Diagram 4.

Diagram 4

Once done, you can insert these images within any WordPress Blog post( or Pages). The technique for doing this is covered in the following material.

Inserting A Path To An Image In A WordPress Post

To insert an image into a post(s) manually 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 5.

Diagram 5

After logging in as WordPress Admin, a Dashboard page opens as shown in Diagram 6.
The Dashboard provides access to different WordPress functions and features.

Diagram 6

In the left menu, locate the link Posts. Click Posts. From the drop down menu that appears click on Posts as shown in Diagram 7.

Diagram 7

Click the Title of the post as shown in Diagram 8 or click Edit to open the post in editable mode within the WordPress Editor.

Diagram 8

Ensure that the WordPress editor is in HTML mode. Click on the HTML tab as shown in Diagram 9. Next navigate to the post content and insert the cursor wherever you want place the image. Click img in the top menu bar as shown in Diagram 9.

Diagram 9

A dialog box is displayed. Place the cursor within the text box displayed and enter the relative path of the URL for this image within the dialog boxas shown in Diagram 10 and Diagram 11.

Diagram 10

Click OK to save the data entered as shown in Diagram 11.

Diagram 11

A second dialog box opens us. Enter a description for the image as shown in Diagram 12 and 13.

Diagram 12

Click OK to save the data provided as shown in Diagram 13.

Diagram 13

The HTML codespec to insert an image is displayed as shown in Diagram 14. The two values entered in each of the dialog boxes are set as values for the HTML src and alt tags.

NOTE: You can now easily modify the codespec (if required) such as adding specific styling to an image or setting the image height and width proportionately within this codespec.

Diagram 14