More for Bloggers

How Did You Get All Those Pictures?

Hopefully, you noticed there are one or two images in this tutorial. You can add images to your posts. They do not have to be pictures of the computer screen, like the ones I have used, but can be photographs of bridge events or anything you think your readers will be interested in. In fact, they do not even have to be pictures, you can show movies and music files (click to play) as well.

We do ask you to take care to keep the size of your photographs to something reasonable. Remember that computer screens generally only display 72 or 96 dots per inch (d.p.i.) and so uploading a photograph that has a resolution of 500 d.p.i. simply takes up a lot of bandwidth to upload and download and doesn’t improve the viewers experience. I recommend using one of the available applications to reduce the resolution of your pictures before doing the upload. You might also consider cropping photographs so they only include the area of interest. Some digital cameras have a “computer” setting that takes pictures at 72 d.p.i. and a size of 640 x 480 pixels — relatively ideal for our purposes.

Having said that, how did I get those images into the tutorial?

Start by setting the insertion point where you want the picture (image) to go — does setting the insertion point sound familiar?

If you intend having text flow around the image, then set the insertion point at the beginning of the paragraph you want to flow around the picture. This is true whether the picture will be on the left-hand or right-hand side of the page. If the picture is going to be centered, then put the insertion point at the beginning of an empty paragraph as usual.

Quick Hint: It may not be obvious, especially if you are not familiar with HTML, how to stop text flowing around a picture. You may want to start a paragraph below the picture and sometimes just pressing Return does not do the trick. Before positioning the insertion point, create a paragraph after the one where you will be positioning the insertion point. Just type a few characters, “xxx” will do fine, as you will be typing over it afterwards anyway. Then when you do the picture insertion, that xxx paragraph will appear below the picture.

The link you see a picture of at the left, can be found just above the edit pane on the left-hand side. When you click that link, you will see a dialog something like the following image (unless you have already, successfully added images to your page or post).

If you have already added images to your page or post, as I have, the top part will show something additional, a “Gallery” link. The number in parentheses is the number of uploaded images “associated” with the page or post. Here is what the top of my “Add Media” dialog looks like.

There are several ways to insert an image.

(1) If you have not yet uploaded any images, or have not yet uploaded the one you want, you can select it (or them) for upload it in two ways:

• With a Windows Explorer window open (on a Windows computer), a Finder window open (on a Mac OS X computer) or a Krusader or similar window open (on a Linux computer), you can select the file (or more than one!) and drag it over the pop-up window where it says “Drop files here”. If you do that, the dialog will change to show the files are being uploaded and the progress of the uploading.
• You can click the “Select Files” button and an “Open File” dialog will appear (what it looks like depends on your computer). You can then find the files on your computer and “open” them. The result will be similar to having dragged and dropped the files as just explained.

(2) You can link to a single file on a web server. This will be done by clicking on the “From URL” link at the top of the dialog. Be sure you have permission before linking to images or other media on another web site (some sites actually prevent such “hot linking”).

(3) You can select an image (media file) that has already been uploaded. If you have already associated images with the page or post you are working on, then you can select the file for insertion in two ways, otherwise just one.

• If it shows (as in the second image above), you can select “Gallery” to see a list of all the files associated with your page or post.
• You can choose “Media Library” to see a paged-list of all the media files you have uploaded, even those associated with other pages or posts, or even not associated with anything yet!

When you select to upload a file(s), the dialog will show progress just below the “Drop files here” area (and its footnotes). Below is a sample.

Once the file has (or files have) been upload, the dialog changes to be an actual insertion dialog. That is, one where you specify how the image should be displayed. As for the progress indicator, this is displayed in the bottom part of the dialog. Here is what one such lot of information looks like.

That “Save all changes” button at the bottom is there because this dialog has a number of uses. It may be used to show more than one file and you can then set information about individual files. In that case, you will want to save all those changes. In this example, we do not need to do that as we are simply going to insert the one image into our post. The information will be saved automatically.

The “Title” shows at the top. When the information is first displayed, the editor uses the file name, with the file suffix removed, as the title. This also shows in the text box to the right of “Title” There is a red asterisk there to indicate that the title must not be left blank. Since the title will be displayed when the person reading you post hovers the cursor over the image, it is a good idea to enter a meaningful title in place of the file name.

“Alternate Text” refers to something that will be hidden in the HTML markup. It is displayed instead of the image if the visitor’s browser has trouble retrieving the image. Personally, I make the Title meaningful and use exactly the same text for this field as well.

If you fill in the “Caption” it will be displayed as a label for the image in your post (usually below the image, but it depends on the WordPress “theme”). In this tutorial, I have always left the caption blank. In the first tutorial, captions like “Fig #12” were used.

“Link URL” is interesting. Notice that something is filled in by default. That something is the URL of the actual uploaded file. If it is not blank, when you insert the image into your post by clicking the “Insert into Post” button (near the bottom of the dialog), it will be automatically made into a link. If your visitor clicks the image, the browser will reload using that link. The default means the original file will be displayed if the image is clicked, although what is visible in the post may be a smaller image (perhaps a thumbnail version). If you click “None” the text area will be cleared and the inserted image will not be setup as a hyper-link. “File URL” refers to the default (so if you click “None” and then change your mind later, you can click “File URL” to insert the URL of the actual image file. “Attachment Post URL” essentially does the same thing, but the URL is formatted in a different way (as the URL of the post with extra information to specify the image as if it were an attachment to the post — which is what the text said, but more cryptically).

“Alignment” is pretty straightforward. It is displayed as a series of radio buttons, so you can only select one of them — if you try to select a second one, the first one will be unselected automatically. “None” means nothing special will be done. You can insert the image right in the middle of a sentence, though it may not look as pretty as you want. “Left” and “Right” will use HTML markup to make the image display at the corresponding side of the post and text will flow around it. This is why I recommended you position the insertion point carefully. You want the correct text to display beside the image. “Center” will cause the image to be horizontally centered in your post. Well, strictly speaking it is not in your post, but the alternatives are a bit of an advanced topic.

I’ll leave you to figure out what “Size” means (the values are also a set of radio buttons).

Quick Hint: “Alignment” and “Size” are remembered and applied to the next file you upload as defaults (obviously, you can over-ride them). The insertion dialog for images that you previously uploaded and used will be displayed with the previously set values (including “Title”, etc.).

Gallery

I mentioned you could select files that you previously uploaded for insertion into your post. If “Gallery” shows and you click on it, the dialog will be replaced so that looks something like the one below (only the top part is shown).

This list shows all the media associated with the page or post you are currently editing. If there are a lot, a scroll bar will be displayed and you can scroll down to see files further down the list. Find the image you want and click the blue “Show” link at its right. When you do that, the single line showing a thumbnail of the image and its title will be expanded to show the same information as we saw in the previous picture. Here is a picture of a little bit of the list so you can see the effect.

I did not explain that in the previous dialog (showing “P19.jpg”) that you could shrink the information down to a single line by clicking the blue “Hide” button. That was because it is pretty uninteresting for a dialog showing a single file. The same is not true here. You may want to check several files before selecting the one for insertion. You may also want to make changes to the information for several files (changing their titles, etc.). In this case, showing and hiding the full information makes life easier. This is also where that “Save all changes” button comes into play.

Once you find the image you want to insert and make any changes to how it will be displayed, click the “Insert into Post” button as previously described.

Media Library

The second way of selecting files that have already been uploaded is to choose “Media Library” from that original dialog. It shows all the media files you have uploaded, even if they were used in another page or post (or not used at all!). If you do not remember what the original dialog looks like, just scroll back to the top of this page. This list is very similar to the “Gallery” but gives some options for searching and filtering the list of files. There can be a lot of them, especially if you are a prolific blogger or, like me, have used a lot of images in some of your pages or posts.

Notice that the list (it has 112 files in it) has been split up into chunks. You can switch to a different chunk by clicking on one of those little rectangular images with the numbers in them. The picture above shows we are looking at the tenth chunk. Other than the searching and filtering, this dialog works just like the one for the “Gallery”.

The End (for now 🙂 )

Pages: 1 2 3 4 5 6 7 8