Uploading an Image from Your Computer

The media uploader comes in two forms. By default, if you have Flash installed, you'll see the Flash-based uploader. This allows you to upload multiple files at once. However, if you don't have Flash installed, or if the Flash uploader doesn't work correctly, you can switch to the browser uploader. This gives you a basic Browse button that allows you to upload one file at a time.

Using either version of the uploader, go ahead and choose an image to add to your post. Once WordPress has processed the image, you'll see a dialog (Figure 4-30) where you can fill in details about the image: a title, a caption, a description, a link URL, and some alignment and size options.

Title: This is for internal use only. When you're browsing your media library, you'll see this title next to a tiny thumbnail of the image. If you don't fill in a title, the file name will be used.

Caption: This will be shown beneath the image in your post. The exact formatting will depend on your theme's stylesheet.

Alternate Text: The text that will be displayed if the image is missing. It will be read aloud to visually impaired users browsing your site with a screen reader.

Description: This will be displayed in your media library. It will also be displayed on the image's attachment page, if you're using the "[gallery]" shortcode.

Link URL: This lets you specify whether your image is linked, and if so, where it leads. Linking to the file URL is a great way to let your visitors see the full-size image if you're inserting a smaller version. If your post discusses another site, you might choose to paste that URL here instead.

Alignment: Choose whether the image should be aligned to the left, the right, in the center, or not at all. If you choose left or right alignment, your post text will wrap around the image. If you choose center, your image will appear on its own line.

Size: You can insert the full-size image into your post. WordPress will generate up to three smaller sizes (based on the dimensions you choose in your Media Settings), and you can choose any of these if one will fit better in your post content.

Figure 4-30. Uploading an image from your computer

Some themes do not support image alignment. If your images are not aligned correctly, add the lines in Listing 4-1 to your theme's styles.css file. These CSS rules correspond to the classes WordPress inserts into image tags; with these styles in place, your images will be aligned according to the settings you choose in the upload screen.

Listing 4-1. Image alignment styles img.alignright, a img.alignright { float:right; margin: 0 0 1em 1em} img.alignleft, a img.alignleft { float:left; margin:0 1em 1em 0} img.aligncenter, a img.aligncenter { display: block; margin: 1em auto; }

Below these fields, you'll see a button that lets you insert the image into your post. If you've enabled post thumbnails, you'll see a link that will set the current image as the thumbnail. Off to the right, you'll see a link to move this image to the trash.

If you chose multiple files, you'll see all these options for only the first file. Below the form, you'll see a collapsed row for each additional file. To edit the details for these, you'll need to click the Show links off to the right. The first image's form will collapse, and the one you chose will expand (Figure 4-31).

Figure 4-31. Adding an image from the Gallery
0 0

Post a comment