Quick Image Insertion Tutorial

This is a quick tutorial for inserting images into WordPress 3.3.1.

The functionality to insert an image shifted from the toolbar itself to a hard-to-notice button in the top left corner of the post editing screen, as shown here, just above the beige “Add Media” tool tip:

If the image does not already exist in your Media Library, you may insert images into the post from your local computer by dragging and dropping files from a folder/Explorer view (including multiple files at once,) or you may click the “Select Files” button to open a standard “Find File”/browse screen:

The screen shot below shows multiple files for this tutorial being added to the media library:

 

You may also hotlink an image from a URL; however, this is not a good solution for a couple of reasons. First, it can be considered “bandwidth theft” by the source server – essentially, you would be using someone else’s bandwidth to serve content on your site. Second, loading images from remote servers slows down your site’s overall load time. It’s best to serve local content. However, if you must load an image from a URL, click the “From URL” tab in the Add Media screen:

The “URL” field is the source of your image file. The Title is actually optional, despite being marked mandatory. It will be populated automatically, but you can type in a specific title if you like. The Alternate Text field will show if people have images disabled in their browser, or if they mouse over the image (in some cases.) The Image Caption field will display, oddly enough, a caption beneath the photo. Alignment will determine if text wraps around the image, or if it is centered. “Link Image To” will determine what website loads when people click on the image. If left blank, it will auto-populate to the image’s specific URL.

If the image already exists in your library, click the “Media Library” tab:

 

Locate the image you want to insert, and click the “Show” link. A screen like the following will appear:

 

These options are much the same as the ones covered above for the URL tab. However, different size options are offered, as is the “Use as featured image” option. Some themes will show a thumbnail associated with posts, and it’s called the “Featured Image.” You can see examples of this on our main page. The thumbnails next to each post are featured images. You can set the featured image without inserting the image into the post in this fashion by simply not clicking “Insert into Post” after setting the featured image. Click the X in the top right corner of the pop-up to exit the screen.

Advanced Options

Once the image has been inserted, more options become available. Click the image you’ve just added, and you’ll see two new buttons appear – the left one looks like a miniature mountain scene (as best we can tell,) and the right one is the “delete” button. The delete button will remove the image from your post, but not from the media library. The mountain scene (which we’re going to call the “Edit” button” is where the fun is.

When you click on the image, it may turn a different color to let you know you’ve highlighted it:

When we click the Edit button, an image options dialogue pop-up screen appears:

From here, we can change the size of the image by using the sliding scale at the top right, as well as edit or set some other options (which we covered above.) A note about changing the size here – this forces WordPress to alter the displayed size only; it does not change the size of the image itself. Thus, if your original image is 1028×1264 pixels and you ramp it down to 30% to make it display at a smaller size, the reader will still have to download the full size image – even though it’s displaying at a much smaller size. This leads to longer load times.

A better idea is to resize the photo using a photo editor or Flickr to shrink the actual image, then load the correctly sized version on the page.

Click on the “Advanced Settings” tab at the top left to see another screen with different options:

There are several items of interest here. We feel some of them should be on the main edit page, like the “Target” field, but we can’t change WP’s code so we have to work with what we have.

There is another size slider at the top left, as well as a line where we can manually set the display size ourselves. It’s important to maintain the same ratio when changing the size using this field, as failing to do so will distort the image.  In our example, the image is 678 x 570. If we wanted to reduce it by 25%, we’d need to adjust both values to 75% of their original size. Thus, we would enter 509 and 428. We can also undo any size changes by clicking the “Show Original” button.

Most of us will want to ignore the CSS Class field, as it is an advanced option for people who understand how to interact with the Cascading Style Sheet which powers how the site is displayed.

The Styles field can likewise be ignored by most.

Image Properties is of interest to some of us. The Border field allows us to put a border around the image.  The value entered here will be the thickness of the border, in pixels. For thumbnail-sized images, we like 2; for images that are larger than thumbnails, but smaller than 640 x 480-ish, we like 3; for large photos, we like 4. What color your border will be depends upon your theme. It’s possible to change the color of the border in the HTML code, and we’ll cover how to do that in a future tutorial.

Vertical Space and Horizontal space refer to how much white space surrounds the image. These are important fields for attractive image insertion. If the text is butted right up against the image without any white space, things look kind of janky (we put a border around this image to clearly mark it, since it uses the same text color and font as the rest of our site:)

 The right margin of text runs right into the image, and we don’t like the way that looks. We prefer something like this:

The white space around the image gives it a little breathing room, and makes it flow better.

“Vertical Space” refers to how much white space appears above and below the photo; “Horizontal Space” refers to the white space to the left and to the right. One important note; after entering a value in any field in these screens, it is important to click someplace else in the screen before clicking “Update.” The values do not get written out until we click away from the box we just entered a value into (silly, we know, but it’s a WordPress issue.)

The other important item on this screen is the Target field – Clicking the “Open link in new window” tick box will ensure when people click on the image, it opens in a new tab or window and preserves their connection to your page.

While we think WP could streamline these screens into something far more efficient, at least we have the ability to easily alter basic image properties.

As always, please let us know if you have further questions!



Leave a Reply

Your email address will not be published.