Adding Images To Your Page/Post

One of the really nice features about working with WordPress is the way it handles adding images to your pages or posts. Unlike other CMS website setups, WordPress has a specific area within its structure to store all of your media files. To access your media files from the Administrator Dashboard, you can mouse-over on “Media” in the left-hand column, and choose “Library” to see all of your image files.

Step 1.

Okay, you have your body copy added to your page/post and you want to add an image to the text. Since HTML formatting works differently than, say, a word processing program like MicroSoft Word, you have some limited formatting options. Basically, you can add an image that can be flush left or right within a paragraph, or centered above or below a paragraph. So, within your body copy, plan where you would like to add an image by clicking a at the beginning of a paragraph so that your “I-Beam” cursor is placed. This will indicate which paragraph you want to add your image.

page-01

 Step 2.

add-media

Next, you can either drag and drop your image onto the text editing area to add an image, OR you can click on the “Add Media” button, located at the upper left-hand corner of your TinyMCE editor. If you are not seeing this button, please make certain that you are viewing your page as “Visual”, and not “Text”. You will find those tabs at the upper right-hand corner of your text editing box.

 

Step 3.

If you decided to click on the “Add Media” button, the “Insert Media” box will pop up. This box will display the images currently available in your Media Library. You may choose a previously-uploaded image or add a new one by dragging and dropping it into the “Insert Media” Box.

insert-media

 

When you drag an image over the “Insert Media” box, it will turn blue… indicating that it recognizes you are adding a file. You can add images one at a time using this method, or you can add several at once if you wish.

dragdrop

 

Once your image file has successfully uploaded, it will be automatically selected by the system, indicated by the blue check-mark in the upper right-hand corner of your image thumbnail. If you are satisfied with the image selection, click on the blue “Insert Into Page” button, located at the lower right-hand corner of the “Insert Media” box.

Screen Shot 2015-08-03 at 8.32.06 AM

 

Step 4.

photo-edit-barOkay, so now you’ve added your image but discover that it is the wrong size! Oh no! Don’t worry, TinyMCE has a nifty little photo editing system that will allow you to make some changes to the way your image is displayed. To activate this little editor, click on your image file within your text area to highlight it. At the top of the image, you will see a little editing bar like the one shown to the right. You will note that you can change the placement formatting of your image to left, center, right, or none by clicking on any of the first four icons. The pencil icon will allow you to make further image edits via a pop-up box. The “X” icon allows you to remove the image. Let’s look at the image editing pop-up box.

image-deatils

This editor will allow you to do several nifty things with your uploaded image. As you can see by the image above, you can add a caption to your image; you can change your display settings; you can change your image size; you can add a link to an image; and Advanced Options will give you a couple of other options if you wish. Since we’re trying to resize our image so that it fits into our page more appropriately, let’s look at that area.

image-size-01

In the Display Settings area, you will have the ability to change the alignment of your image but, more importantly, you can change the display size of your image. In this example, we see the image I selected is 1231 x 1290 pixels in size. Way too big for a web page. However, I do have some other pre-set options available to me. Since I know that a majority of website with themes that include a left or right column containing widgets, that an image should be around 670 to 700 pixels wide maximum. The options I have available to me are not going to help me, so I will have to select “Custom Size” in order to size my image appropriately.

Screen Shot 2015-08-03 at 10.02.14 AM

With “Custom Size” selected, I can now type in the value I want for the width of the image. The system will automatically scale the height accordingly, maintaining your image’s aspect ratio. Since, as mentioned, I wish the image to be 670 pixels wide, I will type in 670 in the Width box.

Screen Shot 2015-08-03 at 10.02.21 AM

After I have typed in my width, I can now click on the blue “Update” button, located at the lower right-hand corner of the Image Details box.

Screen Shot 2015-08-03 at 1.34.38 PM

 

If everything works out fine, your image should now appear at the size you indicated in the Image Details box. Click on the blue “Update” button in the right-hand column to save your changes.

Product Categories

  • No product categories exist.
View Desktop Site