WordPress allows you to add many types of media to any post or page. You can place images, audio, and embedded video in the body text, add captions and credits, resize and make text wrap left or right around any image or other media item.
This post explains how to add media and Featured Images to a post or page, using WordPress’s Add Media and Featured Image tools.
(Notice the trapped white space here. More on this below.)
Add Media
The Add Media button above the body text area allows you to upload and insert images of various sizes anywhere in a post:
- Place the cursor where you want an image to appear in the text.
- Click the Add Media button, and either select from the existing Media Library or upload a new image. This opens the Insert Media screen which has two tabs – the Media Library tab which shows all media uploaded previously and the Upload Media tab where you can upload new media.
- Tip: You can drag and drop media items directly into the Media Library.
- After you upload an image or other media in the Insert Media screen, you can add a Caption and Alternative Text description. Alternative Text (often called Alt text) is very important for meeting accessibility requirements and serving visually-impaired users. See more on this below.
- Upload or select the image you want.
- While still in the Insert Media screen, you can set the image alignment, and set the image to display full-size, medium, or thumbnail.
Once you’re happy with the caption and Alt Text, click the Insert into post button to see the results in text entry field. You can then click the Preview button to see how the image will look on the actual web page.
Remember that while you’re working on a post or page, you can use the Save Draft button to save your work without actually publishing it on the website. The Preview button allows you to see the post as if it were published, but only logged-in users can see the preview.
Edit the Images in a Post
Once an image or other media element is added to a post, you can click on it to edit as needed. Any changes you make to the caption, credit, and other descriptive information will be saved in the Media Library, where you can reuse the media item as needed for other pages or posts.
Featured Images
You can use the Featured Image panel to add an image to the top of your post. A strong image can more deeply engage your audience by getting their attention the moment they view the story page. It also increases sharing on social networks and extends the reach and impact of your work.
Most WordPress themes display the featured image at the top of the story page, and as a thumbnail on the homepage. In the case of the Twenty Seventeen theme in publish.illinois.edu, you should also select “Standard” in the Format panel, since with some of the other options the thumbnail won’t display.
For best visual results:
- Use a landscape-shaped image with a width of at least 2000 px. The wider the better though, because with many WordPress themes the image will stretch across the entire width of the user’s screen regardless of size. This is called a “hero” image at the top of the post.
- Wider images look better on large screens, and with most modern themes will scale down for smaller screens like smart phones and tablets.
To add a Featured Image just click the “Set featured image” link, which opens the Featured Image panel:
Pro Tip: Drag and Drop Images Into a Post
Once you get the hang of using the post text entry screen, you will probably find it easier to just drag and drop images directly into the editor. You must be in Visual mode to do this. As when using the Add Media button, make sure to position your cursor at the point of the text where you want the image to display. Drag the image into the editor, and the Insert Media screen will appear where you can add a caption, Alternative Text, etc.
A Word about Alternative Text
People with visual impairments use the web just like anyone else. They may be using a browser that reads web pages out loud. When they encounter an image, the browser will read the Alt Text so they can understand the image. Both state and federal law require that web pages meet specific accessibility standards, and the use of Alt Text for images is one of them.
Alt Text is different from the image caption. The caption is about the image in the context of the story. Good captions give the viewer an understanding of what they are viewing, and why it’s relevant to the story narrative. Alt Text is a literal description of the image with no context.
Here’s how to write good Alt Text: Imagine you are describing the image to someone on the phone. Just tell them, in about 5 to 10 words, literally what is depicted in the image.
Examples: A Caption versus Alt Text
Caption: Chuckie, a Pekingese, competing for Best in Show at the Westminster Dog Show 2017. Chuckie won the Toy group.
Alt Text: a Pekingese dog on a leash
Guidance on Image Placement with Story Text
Note that the image of the Pope at the top of this page is taller that the text to its left. The result is trapped white space that looks like crap. You can avoid this by using a smaller photo or using more text, but that isn’t always possible. Or maybe put the photo somewhere else on the page. This is always a judgment call. Different WordPress themes give you more or less column space to work with. But you should avoid doing what I did here!