OpenSourceVarsity

pdf icons

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

Media consists of the images, videos, voice recordings (podcasts), i.e. media rich files that you upload and use within your Blog post content. Such media is typically uploaded and inserted appropriately into the Blog site content when crafting a Post or a Page.

NOTE: When you do need to upload such Media files to your WordPress driven Blogsite, you must use the Media Add New Screen.

Prior Adding An Image To A Page

Before adding an image(s) to a web page these images must exist in the WordPress Media Library. Upload images to the WordPress Media library using the WordPress upload tool.

The Media library folder in which WordPress stores images used in Pages or Blog posts is:
/wp-content/uploads/[year]/[month]/[image_name]

Once all the images you want to embed in pages or Blog posts have been stored within the WordPress Media library then it’s really a piece of cake to insert these images into any Page or Blog post.

Uploading Images To The WordPress Media Library

To upload images to the WordPress Media library, login to WordPress Admin Dashboard.

Click on the Media menu item in the left hand side of the WordPress Admin Dashboard as shown in diagram 1.

diagram1.png
Diagram 1

On click of Media menu, the Media library UI is displayed in the Browser window as shown in diagram 2.

diagram2.png
Diagram 2

Click Add New adjacent to the Media library title right at the top of the page.

The Upload New Media UI opens up in the Browser window as shown in diagram 3.

diagram3.png
Diagram 3

This UI allows you to simply drag and drop a single or multiple images from your computer’s hard drive which will then be uploaded via this tool to the WordPress Media library for use whenever needed as shown in diagram 4.

diagram4.png
Diagram 4

I just dragged and dropped two images into the area marked as shown in diagram 4 which were immediately uploaded to the WordPress Media library. The two images were woman.png and man.png. It’s these images that will be inserted into page content appropriately.

Adding Images To A Page In WordPress

To insert the images uploaded to the WordPress Media library, hover the mouse cursor on the Pages menu item in the left hand side of the Admin Dashboard. In the pop out menu click All Pages as shown in diagram 5.

diagram5.png
Diagram 5

The Pages UI will be displayed in the Browser. All pages created will be displayed within this UI.

NOTE: We have created only one page HOME as shown in diagram 6.

diagram6.png
Diagram 6

Hover the mouse cursor on the HOME page and a set of links will be displayed immediately below. Click Edit.

The WordPress page editor will be displayed in the Browser window and the HOME page content will be displayed within its editing area as shown in diagram 7.

diagram7.png
Diagram 7

Place the WordPress editor’s cursor anywhere in the page where you want to insert an image.

Click the Add Media button located at the top left hand side of the WordPress editor’s UI as shown in diagram 7.

On click of Add Media the Insert Media UI will be displayed in the Browser.

Ensure that its Media library tab is active as shown in diagram 8.

diagram8.png
Diagram 8

Click on the image in the media library that you want to insert into the page at the place where you left WordPress editing cursor. Then image displays a blue border indicating that it is selected.

Add the following image attribute information on the right hand side of the Insert Media UI.

  • The Title of the image
  • The Image caption
  • The Alt Text for the image
  • The image Description
  • The Alignment of the image
  • Next you can link the image to internal or external website resource
  • Finally, decide on the size of the image, i.e. a thumbnail or full-size

Once done, click Insert Into Page at the bottom right hand side of the Insert Media UI.

diagram9.png
Diagram 9

Once done, the image, with all its attributes set as indicated, will be inserted into the page opened in the WordPress editor as shown in diagram 10.

diagram10.png
Diagram 10

Click Update to update the page within the WordPress CMS.

Click Preview see the image inserted in the page as shown in diagram 11.

diagram11.png
Diagram 11

To Conclude

You have successfully inserted an image into a WordPress page.

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