Uploading images

14 October 2007

Many times, you will want to include one or more images with an article. This is fairly straightforward to accomplish, though it sometimes involves a few steps, depending on how many images you want to include and whether you are using thumbnails. Here is a step-by-step explanation of the process.

The two main tasks are:

  1. Uploading the image(s), and
  2. Inserting the images into your article.

I will look at the first task in this article. Two subsequent articles,
Including a single article image, and Including multiple article images, will examine the second task. You can also view the screencasts:

How to upload your image(s)

First, you need to go to the Images page. Do this by clicking on the Images tab at the top of the page, or by selecting Images from the pulldown menu in the upper right corner. When you first get there, you’ll see something like this, followed by your list of current images if there are any:

The upload image field

Click the Browse button. This will open a window where you can choose an image file from your computer.

Once you have selected the image you want to upload, click Okay to close the window, then click the Upload button.

The next screen you should see displays the uploaded image, along with several more new fields:

Thumbnail

The first of these fields allows you to use a thumbnail, which is a smaller (and thus quicker-loading) version of your image. It may be simply resized to be smaller, or it may be just a cropped portion of the original.

You can also automatically create a thumbnail, which is very convenient. To create a thumbnail that is simply a smaller (resized) version of your original, enter a value for only the width of the thumbnail. This is very important. If you enter both the width and height, your thumbnail may end up the wrong proportions. To create a cropped thumbnail, enter the width and height you want it, and check the "crop" box.

Upload or create a thumbnail.

Textpattern allows you to upload or create an image thumbnail.

Alternative Text

Alternative text is something that is inserted into the html code that users of screen readers (blind or hard-of-seeing users) will hear. In most browsers, it also appears as a "tooltip" when the user hovers over the image with the mouse. It should be brief, and describe the content of the picture.

Caption

The caption is something that, depending on how your site is set up, may appear below the image, as in a newspaper or magazine layout. Thus, it can be factual or witty or really anything you like.

tags: , ,

  

Recent Posts

RSS and Sharing

Search

Newsletter






Tags

articles basics blog tips bold bookmarking browsers browsing categories cms comments e-newsletter edits email events focus formatting google how-to images interface italics links lists mac marketing promotion rss screencast screenshot self promotion seo software stats tables tags terms textile textpattern write page

Screencasts