The most obvious place for a picture is in a post, right along with your content.
WordPress makes it easy to insert pictures—in fact, you can put as many as you want into any post.
Here’s how to add a picture as you create a post (in the Add New Post page) or edit one (in the Edit Post page):
1. Click in the edit box, in the position where you want to add the picture.
PicTures use the visual editor, you’ll see every picture you insert right inside the editing
box, along with your text. If you use the HTML editor, you’ll see the markup: an
<img> element for the picture, wrapped in an <a> anchor element (to turn the picture into a link), and possibly some other elements if you add a title or caption.
2. Just above the box where you type in your content, you’ll see a set of but-tons labeled “Upload/Insert.” Click the first button, Add Media, which is represented by a camera/music note icon (see Figure 6-3).
The Add Media window appears (Figure 6-7).
The Add Media window includes three tabs, each of which gives you a differ-ent way to find a picture. You can upload a file from your computer (the From Computer tab), use a file that’s somewhere else online (From URL), or grab a file you already uploaded to WordPress’s media library (Media Library).
In this example, you want to stick to the From Computer tab. Grabbing pictures from other website addresses (using From URL) might be worthwhile if you store graphics on another part of your site. But if it’s someone else’s site, don’t chance it—the risk that the picture is copyrighted, or that it could be changed or moved after you link to it, is too great. The Media Library tab is also useful, but only after you build up a collection of pictures. You’ll take a look at it on page 188.
Figure 6-7 Using the From Computer tab, you can upload one or more pictures from your computer. First, you drop a picture into the
“Drop files here” box.
Once you release the image, WordPress begins uploading it.
3. Pick the files you want to upload.
PicTures an open file browser window (like Windows Explorer or the Mac’s Finder) and drop them in the “Drop files here” box. You can drag as many files as you want, either all at once or one at a time, and it doesn’t matter if you keep dropping in new files before WordPress finishes uploading the old ones.
Your other option is to pick your files from a standard dialog box—to do that, click Select Files, browse to the right folder, and pick what you want. If you hold down the Ctrl key (or Command key on a Mac), you can select multiple files at once, although they all need to be in the same folder.
No matter which approach you use, WordPress begins uploading your files as soon as you drop them into the “Drop files here” box. WordPress shows a progress bar for each file underneath the box.
When WordPress finishes an upload, it replaces the progress bar with a large box that includes a thumbnail of your image and a pile of text boxes asking you for all kinds of information (see Figure 6-8). You need to scroll down to see everything.
4. Scroll down and fill in the information for your picture. WordPress asks for the following:
Title is the text that appears in a tooltip when someone hovers over a picture.
Alternate Text is the text that’s sent to assistive devices (like screen readers) to help users with disabilities interpret pictures they can’t see.
Caption adds an optional caption that appears on the page near your picture.
Different themes handle captions differently, but they usually place them under your picture, as in Figure 6-9. Captions can include HTML tags (for example,
<b> for bold formatting), but you need to type them in yourself.
description is a longer, more detailed explanation of the picture. You can use it for your records, or you might decide to display it on your page—but you need to find a theme that shows image descriptions (most don’t) or edit your theme by hand (Chapter 13). If you don’t plan to use the description, you can leave this box empty.
Link URL is the web address where WordPress sends visitors if they click your pic. Usually, when someone clicks your picture, the browser loads up the full-size picture file without any headers, sidebars, captions, or extra content.
Alternatively, you can tell WordPress to take readers to something called an attachment page, which features the full-sized version of your picture and a section for reader comments (select Attachment Post URL) or to go to another web address that you specify. Or, you can tell WordPress not to make the picture clickable at all (select None).
Alignment determines where a picture appears relative to its text. If you choose None, the picture stands on its own, wherever you inserted it. Paragraphs may appear before it or after it, but the post content won’t flow on either side of the
PicTures the page, and the text flows around the other side in the most convenient way
possible (see Figure 6-9).
Figure 6-8 Here, WordPress has just finished uploading the file dead_elvis_tattoo.
jpg. Before you insert it into your post, you need to enter a bit more information.
TIP If your text narrates your pictures, you’ll probably choose None so that you have the pictures exactly where you want them. Examples include food blogs with pictures of meals, travelogues with pictures of tourist sites, and home renovation stories with a photo journal of the step-by-step process. On the other hand, if you have a rich layout that’s more like a glossy magazine, you might decide to use Left or Right for your picture alignment.
Size tells WordPress how big the picture should be in your post. You can choose Full Size to use the original dimensions of uploaded file. Or, you can use one of
PicTures cally when you upload a file. You’ll notice that WordPress maintains the relative proportions of your picture—it never squashes a picture more width-wise than it does height-wise. If you use the picture’s address for the Link URL box, read-ers can click a scaled-down picture to see the full-size image on a new page.
NoTE Normally, WordPress creates three extra versions of every picture: a 150 x 150 pixel thumbnail, a 300 x 300 medium size, and a 1024 x 1024 large size. You can change these defaults in the Settings→Media section of the dashboard, under the “Image sizes” heading. However, the changes will affect only new pictures, not the ones you’ve already uploaded.
Figure 6-9
This theme aligns images on the left, which means the text in the post flows down the right side of the image. Notice that the Twenty Eleven theme keeps the picture and the caption together using a light gray background.
5. optionally, you can edit your picture by clicking Edit Image (Figure 6-10).
Click Save when you finish.
You can crop your picture by clicking and dragging a rectangle around the region you want to keep. Then click the Crop button.
You can scale your picture, reducing it in size until it matches the size you want in your post. This is a good idea if you have a very large image (like one
PicTures download a huge file when you’re not displaying it full-size. To scale a picture,
click the Scale Image link and enter in either a new width or a new height, in pixels. WordPress adjusts the other dimension proportionally, ensuring you don’t distort the picture. Then click Scale to make the change.
Less usefully, you can flip or rotate your picture.
To perform these tasks, just click the corresponding button, which appear in a small strip above the picture. The most common reason to edit a picture is to cut it down to size. Smaller pictures download faster, which means visitors with a slow Internet connection endure less waiting. But if you have lots of big pictures to scale, you can probably resize them more quickly on your computer, using basic image-editing software.
Second, click the Crop button
First, drag to select
part of the image Figure 6-10
Cropping a picture lets you use a small section of a larger image.
PicTures WordPress appends a number to the end of the file name, so dead_elvis_tattoo.jpg becomes dead_elvis_tattoo-e1339626522667.jpg, for example. There are two reasons for this sleight-of-hand. First, it prevents problems if one of your posts needs to use the original version of the picture. Second, it lets you get your original picture back later if you ever need it. To do that, just edit the image in the media library (page 188), and then click Restore Original Image.
6. Click the “Insert into post” link to add the picture to your post.
When you insert a picture, you’ll see it in the visual editor. If you chose left or right alignment, you can type your text around the side of the picture. If you chose None for the alignment, you can only type text above and below the image.
If you decide you want to tweak your picture, just click inside it once. Doing so selects the picture, and calls up two small buttons in the picture’s top-left corner. Use the Edit Image button to open the same editing window you used earlier. Use the Delete Image button to remove the picture from your post.
NoTE If you delete a picture from your post, it still exists on your WordPress site. This might be what you want (for example, it lets you add the picture to another post later), or it might be a problem (if you’re worrying about someone stumbling across an embarrassing incident you made the mistake of photographing). To wipe a picture off your site, you need to use the media library, as described in the next section.
You can add as many pictures as you want to a post. To add a new picture, just fol-low the preceding steps all over again.
GEM IN THE RoUGH