4. Adding an image to a post

To get a picture into your post, you can click the little tree picture icon in the toolbar of the rich text editor. That gets you a little dialog window that says "Insert/edit image" at the top, and in the top right corner of that there's an icon that looks very vaguely like a little computer window with six tiny blobs of color that are supposed to be images. Click on that icon, and it gives you a second window that says "File Browser" at the top. That window has a button at the top left labeled Upload. Click that to open yet another window where  you click the "Browse" button to use the regular file dialog system on your computer to select the image file you want by clicking on it and clicking Open to choose it. Then you click the Upload button at the bottom of that window (right next to the Browse button) to actually ship the image to the blog. (There's a size limit, but it's large enough so I don't normally think about it. It's nice if your image is 600 pixels wide or less so it fits in the column, but the software will now resize big images automatically.)

The image you uploaded should appear in a list showing the files in your personal upload directory, and then you just click on the filename that you want and click "Insert" at the top of the "Insert/edit" window.

Fortunately, it's easier to do than to describe...

You can also do this with a picture that's on-line somewhere. (If the image is more than 600 pixels wide, it disturbs the formatting of the sidebars, so it's nice to keep them that size or smaller if you can.) You can put the picture on your own webspace, if you have any. (You may well have some free web space if you have high speed Internet.) Or you can open an account on some free on-line photo sharing service like Flickr or Photobucket or Picasa, upload your photo there, and then include it. (I don't use a service like this, but other users may have advice about the pros and cons of different sites?)

To display the picture that's on-line somewhere as part of your post, you need the actual address of the photo itself - not just the page it's on. If you have rich text turned off, you just put <img src="http://yourphotoaddress..."> in where you'd like it displayed. (If it's a small photo, you can add align="left" or align="right" to get it to stay on one side or the other of your post.)

If you have rich-text enabled, you type or paste your photo's web address into the "Image URL" field in that window. (The editor will also give you a lot of options about adding a border, moving the image around on the page, changing the amount of white space between the image and the text, etc.) Here again, playing around when you aren't trying to actually get something posted and looking at the results of various choices using Preview may be the most enjoyable way to learn about the many options the editor offers.

If the actual web address of the image itself isn't obvious, you can use the View menu on your web browser and choose Page Source. This will give you a window, and it will probably look like a mess - pages of codes and tagging. But don't despair. Use Find and search for ".jpg", then go through the window with Find Next, looking for the photo you want. If you don't have any luck, try ".gif" and ".png".

If things are simple, you'll find the <img src="....> tag that's displaying the photo you want,and the address in that will have a complete URL, starting with http://...., that you can just copy and use as is. But maybe it will only have the last bit of the address. In that case, the full address is the address of the page you started with, except that what's after the last slash needs to be replaced by the bit of address you have for your photo. Unfortunately, exactly how much of it you need to replace with your partial address can get pretty complicated... more complicated than I think I understand completely myself, actually...

Let's try a simple example, though. Use the View menu and look at Page Source for this post. If I search for .png, the first bit I get is:

<img alt="Creative Commons License" border="0" src="http://creativecommons.org/images/public/somerights20.png"/>

As the name suggests, that's the tag for the little Creative Commons icon that's displayed at the bottom left of the page. If you copy that address, open a new browser window, paste that address into the field at the top and hit Return or Enter, you should just see that image; if you do, that's the address you need to put into a <img src="....."> tag to display the image in your own post.

One more complicated example... If I search for ".jpg" the first line I get looks like:

<img width="150" align="center" src="/sites/default/files/ofs_0.jpg" alt="OFS" border=4 vspace=4 hspace=4">

 

Most of this is details for the browser about exactly how to display the image, but in the middle, the src="....." gives its address. You'll notice that there's no http:// at the beginning. So, we need to look at the address for the page that the image is part of. We see it's http://olyblog.net/node/add/book/parent/11852. Unfortunately, if I try adding my partial address in place of the last bit of this and try going to http://olyblog.net/node/add/book/parent/sites/default/files/ofs_0.jpg nothing happens. One way to proceed is to keep dropping one bit from in front of your partial address and trying again, patiently. So, I try http://olyblog.net/node/add/book/sites/default/files/ofs_0.jpg. Nothing. http://olyblog.net/node/add/sites/default/files/ofs_0.jpg. Nothing. However, when I get to http://olyblog.net/sites/default/files/ofs_0.jpg - Bingo! There's my picture, all by itself, and that's the address that I can use to put it into my post.

Comments

Ripe tomatos!

Incredible, but we've managed to achive the near-impossible. Two ripe tomatos in June. These two cherry-sized goldens were photographed this morning just before they were devoured by a couple of hard-working backyard gardeners. Yummmmm....

Now bring on the real summer!

When I feed the poor, they call me a saint. When I ask why the poor have no food, they call me a communist. - Dom Helder Camara, Archbishop of Recife, Brazil (b. 1909, d. 1999)