(214)534-6830

Adding Images to WordPress Posts

Adding Images to WordPress Posts
November 10, 2014 Mike McLeland

Adding an image, or even a few images, to your WordPress blog post or page can make the difference between whether a visitor to your site actually reads the content you spent so much time crafting or whether they head off to a site they find more visually interesting.

One quick word of caution before we dive into the process: make sure you own the images you are using or have secured the appropriate licenses. Not following this simple guideline can come back to bite you nasty ways. Here are some links to some sites with royalty-free, public-domain images. Be sure to read the license agreements before using images, though, because they are not all the same and license agreements may change from time-to-time.

Wikimedia Commons, USA.gov, Flickr Commons , Public Domain Pictures

Step 1

Create the text content of your post or page first, and make sure it is showing up in the edit box on the new WordPress page. Now choose where in the text you want the image to appear by inserting your text cursor at that point.

Adding Images to WordPress Posts

Step 2

Click the “Add Media button. This will launch the Media Insertion tool.

Adding Images to WordPress Posts

Step 3

The Media Insertion tool will allow you to either upload an image or select an image that is already included in your media library.

Adding Images to WordPress Posts

Step 4

Select the image you want to include in the post. In this instance, we’re selecting an image already included in the media library. Once the image is selected, you will see a checkbox appear in the upper right corner.

Adding Images to WordPress Posts

After selecting the image, you a panel on the right side of the Media Insertion tool window that displays the Attachment Details and the Attachment Display options. Fill out the available fields and select the display options.

Attachment Details:
Title: Your title for this media.
Caption: Your caption for the current image. This text will be displayed below the image.
Alternate Text: Enter the Alt text for the image. This text will be displayed when a cursor hovers over the image.
Description: Any description you choose to include for this image.

Attachment Display Settings:

These options control how the image is displayed on your page. You can select how the image aligns with the text, what happens when the image is clicked on, and what size you want the image to be when it is displayed.

Alignment:There are four alignment options.
Left: Aligns the image on the left margin of your page. Any text that is on the page will flow around the image in the available space to the right of the image.
Right: Aligns the image on the right margin of your page. Any text that is on the page will flow around the image in the available space to the left of the image.
Center: Aligns the image in the center of the page. No text will be displayed to either the right or left of the image.
None: No image alignment with text on the page.

Link Behavior:
Attachment Page: Links your inserted image to its WordPress media attachment page.
Media File: Links your inserted image directly to the original, full-size version of the image file.
Custom URL: Allows you to set a custom link URL for your inserted image to link to when clicked.
None: This setting will remove the link completely, rendering the image “un-clickable”.

Image Size:
Thumbnail: Displays a small thumbnail version of your image.. By default an image thumbnail is a square, so when you select this option, some cropping of your original image may occur.
Medium: Displays a medium-sized version of your image. This is a good size to use with Left/Right alignments, because it leaves a little space for legible text to either side of the image.
Large: Displays a large-sized version of your image. WordPress will calculate the width of the content column of your theme, and display the largest possible image size for the available horizontal width.
Full Size: Displays a full-sized version of your image. WordPress will calculate the width of the content column of your theme, and display the largest possible image for the available horizontal width. If your original image is wider than this column width, the full image may not fit completely within your available column width.

Step 5
Once you selected your image, filled out the details and chosen the display settings, just click the “Insert Into Post” button at the bottom right of the Media Insertion tool.

Thats all there is to it.

Step 6
Before clicking “Publish,” you may want to make some final adjustments to your image after previewing your new post or page. To do this simply click on the image and select the “Pencil” icon in the upper left of your inserted image.

Adding Images to WordPress Posts

This will open the “Editor.”

Adding Images to WordPress Posts

Make any final adjustments, including cropping, rotating or resizing and click save. You may have to experiment a little to get it right the first time or two, but soon you will know exactly what to do to get your WordPress pages looking great!