Most of your pages and posts will be better if they have some sort of multi-media content. That can be a photo, a screenshot or some other kind of graphic. Adding these items is not as easy as I would like it to be so you might need some instructions. Let’s go through the steps.

Upload your image

Your graphic needs to be a file on your computer. It also should be smaller than 2MB in size and for best results it should be less than about 700 pixels wide. It is possible to have larger images, but you should really try not to go over that limit. If you have difficulty meeting this requirement, talk to your webmaster about options.

Once you have your file, log in to the site and click the “Media” link on the left. You will see a screen that looks like the image below.

You can click the “Select Files” button in the middle there to select your file(s). You can also drag and drop the files directly from your computer if you would rather do it that way. Once you have selected a file, it will be uploaded automatically. You’ll be able to see a small version of the image with an Edit link next to it. You can click that Edit link and give it a title and caption and fill out other descriptive fields for your file.

Add image to your Post

At the top of every Post, while it is in edit mode has a small button labeled “Add Media.” Here is what it looks like:

Place your cursor at the location where you want the image to appear and click that button. It will bring you to a screen that shows all the images available for you to place in your Post. When you select an image, a form will appear on the right that gives you options for how the image will be displayed. In all cases, the default will show a smaller version of your file which can be clicked to bring up a full-sized version. You can also change the alignment to left, right or centered. Click the “Insert into Post” button when you are ready. When you do, you’ll see some text appear in your post that looks something like this:

<a href="http://develop.pseconline.org/wp-content/uploads/2014/09/DraftsList.png"><img src="http://develop.pseconline.org/wp-content/uploads/2014/09/DraftsList.png" alt="My Caption" width="1014" height="535" class="size-full wp-image-189" /></a>

That is HTML code. You can leave it as is, or if you know how to write HTML, you can alter it as you want. One thing I often do is remove the “http://server-name” from the href and src attributes. If you don’t know what that means, you should probably just leave it. As always, let me know if you are having problems.

You should now be able to Preview your post and see your image appear. If it doesn’t work, you can remove the HTML code from the post and try again.

Alternate Method

If you don’t want your image to be hyperlinked to a full-sized image, you can make use of the “img” button from the row of buttons at the top of each Post in edit mode. It will ask for a URL. You can get the URL from the Media page. When you select your image from the list of Media files, the URL for that image will appear on the right side of the page. Copy that URL and paste it into the text box. It will place some more HTML code in your post as before.