OpenSourceVarsity

pdf icons

Inserting Image(s) Into WordPress Page(s) Using FTP

Introduction:

After WordPress is installed on your Web server, please use an FTP client like FileZilla or Cute FTP to navigate to the WordPress folders and files and folder.

Creating An Images Folder In WordPress Using FTP:

After you have downloaded and installed the FileZilla FTP client software on your local computer, it’s time to configure FileZilla to be able to locate and connect to your Web server on which your WordPress CMS has been installed. To configure FileZilla it has to be running on your local computer. To do this, go to your desktop and locate the FileZilla icon as shown in Diagram 1 and click it.

This will invoke the FileZilla program you installed earlier and get it running on your computer’s memory ready to be configured.

diagram1 Diagram 1

When the FileZilla program loads in your computer memory it displays its Graphic User Interface ( GUI ) as shown in diagram 2.

diagram2 Diagram 2

Click the textual menu item File. In the sticky menu that opens up select the link Site Manager, as shown in Diagram 3.

diagram3 Diagram 3

Under the label MySites, Select your website. Click Connect as shown in Diagram 4.

diagram4 Diagram 4

Scan though the list of folders in the right hand window of FileZilla and locate the folder public_html as shown in Diagram 5.

diagram5 Diagram 5

Double click the small yellow folder icon to enter that folder. FileZilla next displays all the folders and files that are within the public_html folder as shown in Diagram 6.

diagram6 Diagram 6

If not already available, create a new directory named images inside the root folder. Right-click anywhere inside the right hand side window,
click Create directory as shown in Diagram 7.

diagram7 Diagram 7

A small dialog box appears which prompts to enter the name of the directory which should be created as shown in Diagram 8.

diagram8 Diagram 8

Rename the New directory to images ( or as required ) as shown in Diagram 9.

diagram9 Diagram 9

The images directory is successfully created as shown in Diagram 10.

diagram10 Diagram 10

In the left hand section of FileZilla, the directory tree of your local hard disk is exposed. Navigate to where you have saved the images that you want upload to your WordPress website as shown in Diagram 11.

When the directory is created and you have entered into the directory in the right hand section of FileZilla, simply select, drag and drop them from the left hand side to the right hand side OR right click the file and select Upload from the options provided.

This informs FileZilla that you want to copy and upload files selected in the local hard disk to the distant WordPress website in its folder named images as shown in Diagram 11.

diagram11 Diagram 11

FileZilla will upload image file into the folder images on the WordPress website. The status of the image file transfers can be seen in the bottom most section of FileZilla.

Once image have been uploaded from the left hand side of FileZilla FTP client to its right hand side,

Congratulations !!!! – You’ve successfully uploaded the image from your local hard disk to your WordPress website as shown in Diagram 12.

diagram12 Diagram 12

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 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 13.

diagram13 Diagram 13

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

diagram14 Diagram 14

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

diagram15 Diagram 15

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

diagram16 Diagram 16

Ensure that the WordPress editor is in HTML mode. Click on the HTML tab as shown in Diagram 17. 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 17.

diagram17 Diagram 17

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 box as shown in Diagram 18 and Diagram 19.

diagram18 Diagram 18

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

diagram19 Diagram 19

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

diagram20 Diagram 20

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

diagram21 Diagram 21

The HTML codespec to insert an image is displayed as shown in Diagram 22. 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.

diagram22 Diagram 22

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

diagram23 Diagram 23

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

diagram24 Diagram 24

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