How To Upload A Photo To A WordPress Blog

In previous articles, I’ve explained how to download a photo from Flickr and how to prepare a photo or image for the Web. Now, I shall describe how to upload a web-ready photo to a WordPress blog. Assuming you have properly prepared a photograph for your site, here are the steps for performing the uploading:

1. From the WordPress dashboard, open in the HTML Editor the blog post into which you would like to insert an image or photo.
 
 
An image of the WordPress Edit Post screen with "Add-an-Image" icon and cursor placement highlighted to show the first step for uploading a photo or image to a WordPress blog or website2. In the Edit-Post screen, place the cursor before the first character of the paragraph near which you want the image to appear. Then click on the “Add an Image” icon that appears to the right of the words “Upload/Insert.” A dialog box called “Add an Image” will come up.
 
 
An image of the WordPress Add-an-Image dialog box with "From Computer" tab and "Browser-uploader" options highlighted to show another step for uploading an image or photo to a WordPress blog or website.3. In the “Add an Image” dialog box, click on the “From Computer” tab at the top of the dialog box. You can choose to use the Flash or the Browser uploader, but I recommend using the Browser uploader.
 
 
An image of the "Add-an-Image" dialog box using the "Browser-uploader" option as a further step for uploading a photo or image to a WordPress blog or website.4. Using the Browser uploader, browse for the photo you want to upload to your blog, click on that photo, and then click “upload.”
 
 
 
 
Image of the top half of the Add-an-Image dialog box with thumbnail of photo to show the next step in uploading a photo or image to a WordPress blog or website.5. A thumbnail image of your photo will appear with file name, file type, upload date, and dimensions. Below the thumbnail are some blank spaces (title, alternate text, etc.) that you will need to fill in:
 
 
 
a. “Title” is the rollover text that appears when the viewer’s mouse-pointer passes over the image or photo. You’ll want to strike a balance between drafting a purely descriptive title and embedding keywords for SEO purposes. The decision is an important one, because the title should be informative while at the same time attracting organic traffic through the search engines.

An image of the bottom half of Add-an-Image dialog box with title, alt text, etc., to show the next step in uploading an image or photo to a WordPress blog or website.

b. “Alternate text” is wording that appears in lieu of a photo that fails to load onto the visitor’s computer screen. The text should describe the photo and the context in which it is used in the article and should include any keywords that you want to emphasize.

c. “Caption” is for any text that you want to appear below the photo. If you’ve downloaded the image from a photo-sharing site, this is a convenient place to credit its author, but you can use it for any caption you desire. Most experts say that the caption has no SEO value.

d. “Description” is optional. It won’t appear in your article and is for your records only. It could be used to document information about the photo and author. Some bloggers believe that the search engines read the description and that it has SEO value. Others say it’s not a factor.

e. “Link url” is for linking the photo to a url of your choice. A visitor who clicks on the photo is taken to another location. This is another way of giving credit to the author and directing folks to that source. If you don’t want to link the photo to anything, click “none.”

f. “Alignment” is for placing the photo to the left, center, or right of the text. By default, the text wraps around right- or left-aligned photos. The size of a center-aligned photo may determine whether the text will wrap around it, but unless the photo is quite small, wrapping the text around both sides would make the article hard to read.

g. “Size” is limited by the size of the photo you prepare for uploading, and “Full Size” is that size. WordPress gives you several smaller size options, and later, you can adjust the size of the image further. You’ll want to examine the column width to decide how wide you want your photo to be.

The center column on this blog is 550 pixels wide, so in order to leave room for the text to wrap around an image in a readable and esthetic way, I limit the width of most images to around 280 pixels. I anticipate that result by cropping and sizing the photo in advance, so all I have to do is choose “Full Size.”

h. Click on “Insert into Post,” and the photo should appear in the HTML Editor where you placed the cursor, and then click “preview post” to check the size, quality, and placement of the photo on your site.

Even though the post is not live on your blog at this time, setting the date of publication for sometime in the future is a good idea. This avoids accidently publishing your article before you’ve had an opportunity to finish the editing. All of us have inadvertently published articles before they were ready, and it’s not the end of the world, but your subscribers who receive notification when you push the “Update” button may find it inconvenient.

If you want to change something about the photo itself, click on “Visual Editor,” and the photo will appear instead of the image code. Click on the photo, and two icons will appear in its upper-left corner. The icon on the right is for deleting the photo, and the one on the left takes you back to the dialog box for adjustments to the title, alternate text, caption, etc.

One word of caution. While you’re in the Visual-Editor mode, if you do anything to the photo and then click on “update,” any special formatting in your post may disappear. It’s easier to prepare your photos correctly the first time, so you avoid having to reformat each time you change a photo and update.

That’s all there is to it! Now you can insert photos and images into your WordPress-blog articles to your heart’s desire.

 
How To Prepare A Photo For The Web In Photoshop CS5

0 comments… add one

Leave a Comment

CommentLuv badge