In this lesson, we’ll go over inserting an image into a WordPress page or post, and learn how to edit an image from within WordPress.
The first step is to place the cursor into the spot in your page where you want the image to appear. Do this by clicking once in that location.
Place the cursor anywhere in a line of text. This will determine the vertical point where the top of the image will appear. The horizontal placement of the image — left, right, or center — will be determined with the Alignment setting you’ll make in a minute, after you insert it.
The cursor can be placed anywhere at all in the text. For orderly code, we recommend placing it at the beginning of a sentence, but this is optional.
Often, placing the cursor just before the first word of the text works well, since the image will display at the top of the page, either left-aligned or right-aligned, depending on which Alignment setting you choose after inserting it.
Selecting an image
When you’ve placed the cursor, click the Add Media button, and you’ll see the Insert Media screen.
On the Insert Media screen, notice the left column, which offers 4 options. By default, Insert Media is highlighted, showing that it is the currently active function. We’ll look at the other options later. For now, just be sure that Insert Media is indeed selected.
On the right/main area of the Insert Media screen, just beneath the page heading, are the Upload Files tab and the Media Library tab. Below that, you may see thumbnails of images, if you have already uploaded some to your site. You have two choices here.
1. To upload a file from your hard drive, click the Upload Files tab to select it. This opens a panel where you can either click the Select Files button to browse your hard drive and pick a file — or just drag-and-drop any file from your hard drive onto the central white area of the panel. Either way, WordPress uploads your file, showing a progress bar during the upload. The Insert Media screen returns, and the new image is shown as a thumbnail on the top left, with a checkmark showing that it is selected.
2. To choose an item from your Media Library, be sure that the Media Library tab is selected, which it should be by default, and simply click an image to select it. A checkmark appears in the the top left corner of the image you’ve selected.
Once an image is selected, a column appears on the right with some details and settings to be filled in for this use of the image.
Filling in Attachment Details
At the top of the right column is the Attachment Details section. Some information is shown by default:
- File name
- Date uploaded
- Pixel dimensions
The Edit Image link opens the Edit Media screen. See below in this lesson for details.
Another link allows you to Delete Permanently, if desired.
Just below are several fields you can fill in. Technically, they’re all optional, but do include Alt Text.
- Title: Optional, but WordPress creates one for you, it could be useful in some circumstances, and there’s no harm in keeping it.
- Caption: Optional — include a caption if you like. It will appear in the expected spot just below the image. The appearance of the caption is determined by the active theme.
- Alt Text: Should always be filled in with a few words which let a visually impaired visitor know what the image looks like. Alt Text can also help your site’s search engine optimization.
- Description: Optional and can almost always be left blank. This is not an HTML attribute, but a WordPress feature. Unless the active theme displays this description — which is rare — it doesn’t get used at all.
Determining Attachment Display Settings
This section is sometimes almost hidden at the bottom of the column, but has some of the most important settings for the image.
There are four choices here: Left, Center, Right, and None.
- Left aligns the image to the left text margin, causing the text to flow (“wrap”) around it on the right.
- Right aligns the image to the right text margin, causing the text to wrap around it on the left.
- Center places the image in the center of the text block, with no text wrapping around it on either the left or the right.
- None provides no alignment. The image will normally appear at the left margin, with no text wrapping.
The image can be clickable, and this field lets you choose whether it is or not, and what it links to, with the following choices. Note that None is usually the best choice when an image is used as simple illustration or decoration. You generally don’t want your site visitors clicking on images only to find out that there was no good reason to click on them.
Media File: Links the image to the full-size version of the original image you uploaded.
Attachment Page: Links the image to its WordPress Attachment Page. Every media item has one of these. Normally, it isn’t something you want your site visitors to see, but rarely a theme will make use of it.
Custom URL: This can be any link you like.
None: Choosing this means that the image won’t be clickable.
Each time you upload an image, WordPress keeps the full-sized version and automatically creates several versions at smaller sizes. It’s best to upload the largest — or highest-resolution — copy of the image you have, because no software can make a small image larger without doing bad things to the image quality.
The smaller sizes created by WordPress are determined by a setting in the Admin under Settings > Media, which you can control. However, a theme will often create its own set of sizes instead of or in addition to the default sizes.
The image sizes you have available will be shown in the Size section of the Attachment Display Settings area, in the dropdown list, where you can make your choice.
If none of the available sizes works well, choose one larger than what you need, and use either the Edit Image or Edit Media feature we discuss below to adjust the dimensions.
Inserting the image
When you’ve made all of the settings you need, click the Insert Image button. WordPress returns you to the Edit Post screen, where you’ll see the image inserted into your page or post. If it looks the way you want, click the Update button to save your changes to the entire Post.
Editing an image within WordPress
If the image you just inserted doesn’t look right when you preview the Post, the image itself and its properties can be edited right from the Visual Editor.
On the Edit Post screen, click the image once. This causes the image to have 8 “handles” around its outside edge, and two icons to appear. The handles can be clicked-and-dragged to resize the image manually. Remember that reducing the size gives good results, but increasing the size produces poor results.
Of the two icon-buttons, one lets you delete the image completely. The other can be clicked to open the Image Details panel.
On this Panel, you can add or change many of the settings you just created. Clicking Edit Original, on the right, opens the Edit Image panel. Here, the original image can be cropped, rotated and/or scaled.
Be sure to click Save (or Cancel) before leaving the screen. If you’ve made changes, you’ll also need to click the Update button on the Image Details panel, and also the Update button on the Edit Post screen to save the entire post.
In Using Images Part 2, we’ll explore Featured Images, Image Galleries, and the Media Library.
- Inserting Images into Posts and Pages, Codex article
- Edit Media, Codex article
- Top 10 Places to Find Free Stock Images For Your WordPress Site, article on WPMU.org