Adding Images to a Post or Page

Adding images to your posts or pages is easy. Simply follow these steps:

Place your cursor in the text where you want the image to appear. It is a recommended to place your cursor on the left margin on your text, even if you want it to appear on the center or right. The “alignment” settings will help you to control where the image appears on the post. Add_Image1

Click on ‘Add Media‘ button, which is just above your post editor. A media up-loader interface will popup once you clicked this button.
Add_Image2

You may add an image to your post or page. ‘Upload Files‘ enables image to be uploaded from the computer into the media library. Therefore, the ‘Media Library‘ will display images that was uploaded previously. Now, you can select the image that you’d like to add. Once you have made your selection, a tick icon will appear on the top right corner of the image thumbnail, and the attachment details of the image will appear on the right side of the window.

addimage3

 

You will have to specify the attachment details of the image. The attachment details pane will show the thumbnail of your image, date uploaded, resolution in pixels, and options to edit or permanently delete the image. In addition, you may edit other information such as title, caption, alternate text, and description of the image.

addimage4

Attachment Display Settings‘ controls the display of the images on your blog. You may specify the alignment, link and size of the image. There are four different alignments available.

  • Left: Aligns the image to the left hand margin, and any text that is in the page will wrap around the image on the right.
  • Right: Aligns the image to the right hand margin, and any text that is in the page will wrap around the image on the left.
  • Center: Aligns the image to the center of the page, with no text displayed around it.
  • None: No alignment adjustment will be made to the image.

(Clockwise from top left – Center, None, Right, Left)

Clockwise from top left: Center, None, Left, Right alignment

 

Link To‘ will bring the visitor to the specified URL when he/she clicks on the image in your blog. The following options are available for ‘Link To’:

  • Attachment Page: Visitor will be directed to the WordPress media attachment page.
  • Media File: Visitor will be directed to the original full-sized image.
  • Custom URL: Visitor will be directed to the custom link URL specified by you.
  • None: The link will be removed completely and renders the image as ‘Un-clickable’.

 

Size‘ adjusts the size of the image that is added.

  • Thumbnail: Displays your image as a thumbnail on the page or post. (Note: By default, the size of a thumbnail is a square. Hence, cropping of your original image may be necessary.)
  • Medium: Displays your image in medium-size on the page or post. This is the recommended size to use with Left or Right alignments, as it leaves sufficient space for legible text to either side.
  • Full Size: Displays your image in full-size on the page or post. (Note: WordPress will determine the width of the content column of your theme, and display the largest allowable size for the image. If your original image width exceeds the width of the column of the theme, the full-sized image may not be displayed.)

(L to R – Thumbnail, Medium, Full Size)

L to R: Thumbnail, Medium, Full Size

Click on ‘Insert into Post‘ button on the bottom right corner after confirming the settings. The system will add some HTML codes (in Text editor mode) or the image itself (in Visual editor mode) automatically. You may edit the settings of the image, by clicking on ‘Edit Image‘ button on the top left corner of the image, in Visual editor mode.You may also remove the image, by clicking ‘Remove Image‘ button.

addimage-editdelete

Skip to toolbar