OpenSourceVarsity

pdf icons

Uploading And Inserting Image(s) Into WordPress Post(s)

To insert an image to a post(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.

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

diagram2
Diagram 2

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

diagram3
Diagram 3

Click the Title of the post as shown in Diagram 4 or click Edit to open the post in its editable mode.

diagram4
Diagram 4

Once on the post, insert the cursor where you want place the image, and click the upload media button as shown in Diagram 5.

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

diagram6
Diagram 6

After clicking Select Files, a file navigator window opens. Navigate to the appropriate folder where the image to be uploaded is located, select and open the file as shown in Diagram 7.

diagram7
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 post 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.

diagram8
Diagram 8

In HTML view, the codespec to insert an image is displayed where the cursor was set initially, as shown in Diagram 9.

diagram9
Diagram 9

On the right hand side publish box, click Update to save the changes made on the post as shown in Diagram 10.

diagram10
Diagram 10

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

diagram11
Diagram 11

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