Sillybean

Images and Galleries

Edit any individual post or page, and you’ll see that there’s a group of four icons labeled Add Media above the content box. Click the first icon (Add an image) and a pop-up box should appear with three tabs: From Computer, From URL, and Media Library. Once you’ve uploaded at least one file to this post, you’ll see a fourth tab, Gallery.

Editing Images

The WordPress media uploader includes a basic image editor. You can crop, resize, and rotate the images you’ve uploaded. To begin, click the Edit Image button beneath the thumbnail shown in the image details (you can see this button in Figure 4-31). A simple editing interface will appear (Figure 4-33). Click the image once, then drag your cursor to choose an area to crop. If you want to scale or crop the image to a precise number of pixels, use the numeric scaling and cropping forms to the right of the image.

Galleries

If you have several images to add, you can do them all at once and insert them as a gallery rather than working with them one at a time. Instead of Insert into post, click Save all changes at the very bottom of the window. When you’re finished uploading files, choose the Gallery tab. This is where WordPress groups all the photos that have been uploaded for this post. If you want to edit the title (or other details) of a photo, click Show (to the right). When you’re done, you can insert all the post’s photos at once by clicking Insert gallery into post at the bottom of the pop-up. You’ll see that [gallery] has been added to the post’s text. Just leave that shortcode on its own line and type whatever else you’d like to say. When you publish the post, a thumbnail-sized copy of each photo appears in the post, as shown in Figure 4-34. The thumbnails will be linked to a new page, where the full-size copy of the photo will appear along with the title and description you entered.

Inserting an Image from a URL

You can use images hosted on another site without downloading them to your computer and uploading them into WordPress. Instead of selecting files to upload, click the From URL tab. You’ll be asked for the source URL in addition to all the usual image fields (Figure 4-32). However, WordPress won’t generate other sizes; you have to use the image as-is.

Keep in mind that images inserted this way are not copied to your server. If the owner of the original file moves or deletes it, it will no longer appear in your post.

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.

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).