OpenSourceVarsity

pdf icons

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

Introduction:

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 “cleanwp” is a virtual domain created for WordPress Installation. All the files and folder are under this virtual domain.

diagram1.png
Diagram 1

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

diagram2.png
Diagram 2

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

diagram3.png
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.

diagram4.png
Diagram 4

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

Inserting A Path To An Image In A WordPress Page

To insert an image into a page(s) manually in WordPress 4.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.

diagram5.png
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.

diagram6.png
Diagram 6

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

diagram7.png
Diagram 7

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

diagram8.png
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 page content and insert the cursor wherever you want place the image. Click img in the top menu bar as shown in Diagram 9.

diagram9.png
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.

diagram10.png
Diagram 10

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

diagram11.png
Diagram 11

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

diagram12.png
Diagram 12

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

diagram13.png
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.

diagram14.png
Diagram 14

In the right hand side Publish box, click Update to save the changes made on the page as shown in Diagram 15.

diagram15.png
Diagram 15

In the front end of website, the image have been successfully inserted on the page at the cursor position as shown in Diagram 16.

diagram16.png
Diagram 16

April 28, 2016
Design by Ivan Bayross and Meher Bala © 2017 All Rights Reserved
X