How To Place Pictures In Your Weblog

Or, at least, how I placed pictures in my weblog. There is usually more than one way to skin the cat in Radio. You may have a better way than I do. Share your tips with me so I can share them with ... uh ... me. And others.

Ready?

Create Some Graphics

You do have some, don't you? Alas, this can't be a tutorial on creating Web-ready graphics. I begin with the assumption that you have created, found, borrowed or stolen some graphics for your weblog.

While Radio is quite willing to service your graphic file processing, this is a useful occasion to recall Radio's allowable file extensions -

xml, html, htm, opml, txt, text, rss, ftsc, fttb, root, gif, jpg, jpeg, png, ico, doc, xls, pdf, ppt, css, wav, swf, zip, sit, hqx, gz, svg

I include all permitted file extensions above, not only those for graphical files. You can upstream just about anything except for movie-style .avi files. If you are using your own public Internet site, you can upstream anything. Understandably, Userland isn't peachy keen on our flowing huge .avi files to their Community Server.

(Note that .bmps are not supported. Most of us will typically choose either a .gif, .jpg or .png graphical file type.)

You can probably find a surprising number of graphics files on your computer. If you don't, check out this tip for grabbing graphics from the Internet.  

Back? Let's continue.

Save Your Pictures To The WWW Folder

Radio will upstream (publish) graphic files from your WWW folder. If you open the 'Images' folder, you will notice that graphics used to create your chosen weblog theme are stored there. You can store your graphics there or create a subfolder of that folder. It doesn't matter where we place our graphics. What matters is that can find them later so we can link to them correctly from our weblog.

For now, I suggest that you create a separate folder at the topmost level of the WWW folder - at least for your experimentation.

1. Right-click the Radio icon in your Windows status bar.

2. Select "open WWW folder".

3. Create a new folder in the WWW folder. I call mine "myImages" but it doesn't matter what you name it.

4. Save your graphic(s) into that folder.

When upstreaming is turned-on, Radio will flow your graphics into a folder by the same name in the WWW folder of your public website.

Consider what we learn here about the overall architectural design of Radio and, especially, upstreaming. Upstreaming is not reserved only for flowing posts or stories to your public weblog but for just-about-anything else that you want to upload to your public site. In other words, upstreaming is a general-purpose Radio service.

Let's Go Find Your Graphic ...

... on your public website, that is.

1. Select "Folder" from the Radio Command Menu at the top of any of your local desktop weblog pages. Your folder page will look something like this:

Do you see the 'myImages' folder towards the bottom? That is the one I created. You will find yours somewhere in your own list of folders. Note that this is the set of folders on your public website. However, these correspond to those stored in your local WWW folder since Radio upstreams all local folders to your public site.

(Consider yet again that upstreaming provides a generalized Radio service).

2. Open your personal graphics folder. When I click on the 'myImages' link highlighted above, I see something like this:

The radioShortcut.png button is right where I expected it to be.

Placing A Graphic In Your Weblog

(Note that these instructions apply equally to graphics placed in your weblog posts or your stories.)

1. Go to your home page and start writing a weblog post. Why don't you turn upstreaming off (if it is 'on') so you don't need to worry about publishing something inadvertently to your public site? This is just a test post that we will later delete.

2. Open a second browser window.

3. Repeat steps 1 and 2 in the 'Let's Go Find Your Graphic' section above (if necessary) so you can locate your own graphic. I will assume for documentation purposes that we are all using the 'radioShortcut.png' graphic.

4. Select (click on) the little globe to the far right of the radioShortcut.png file.

This will load the actual .png graphic into the same browser window. (That's fine because you are entering your weblog post in the other browser window). The radioShortcut.png URL displayed will be for your public website. Mine looked like this:

http://radio.weblogs.com/0100059/myImages/radioShortcut.png

Yours will look similar but will have your own user number, of course.

Make sure you click on the globe. The other clickable items will display the graphic from your local WWW folder. You don't want to link to your local WWW folder because users won't be able to 'find' that folder or its contents from the Internet.

This public URL is the URL you will want to copy into the HTML source code of your current weblog post.

(If you are using a modern version of Internet Explorer, you can copy-paste the graphic itself directly into the WYSIWYG view of your weblog's text entry area. This is definitely the way to go and you can ignore 5. below unless you have a hankering to learn a bit about HTML source code.)

5. Return to the browser window which contains your weblog post. Switch to source mode (instead of WYSIWYG mode) and enter the HTML code below. Since the name and location of your image file will be different than mine, be sure to enter that, not mine):

<P>Here is the Radio shortcut button: <IMG SRC="http://radio.weblogs.com/0100059/myImages/radioShortcut.png"></P>

That code will display this in the WYSIWYG view of your text entry area and to your public website when upstreamed:

Here are two more samples:

<P>This code centers the shortcut button:</P>
<P align=center><IMG src="http://radio.weblogs.com/0100059/myImages/radioShortcut.png"></P>

<P>This code repeats the Radio shortcut button but makes it clickable with an Internet link to my public home page:</P>
<P align=center><A href="http://radio.weblogs.com/0100059/"><IMG src="http://radio.weblogs.com/0100059/myImages/radioShortcut.png"></A></P>

No, you can't click on the Radio shortcut button here because this is a screen capture!

(A screen capture is merely a snapshot of something else. So, while the shortcut image 'looks like' a real button, it is 'just' a graphic). As I mentioned a moment ago, you are seeing screen captures here of the WYSIWYG view of my own text entry area. I can't produce a useful screen capture of the source code because the HTML texts above extend beyond the boundaries of the visible text entry area in my own weblog).

Yes, I know. You have all sorts of questions about the weird HTML codes that I just made you type. DON'T ASK and I won't tell. What you don't know won't hurt you. Just utter the magic incantations I have shown you here to achieve simple results in your weblog.

Remember, you want to write to the Web (and place a few graphics), not learn a new profession.

If you couldn't get your code to work, it is most likely because you didn't enter the HTML code exactly, either due to a typing mistake or not entering the location of your own graphics file precisely. You can copy-paste my code above and then substitute the location of your graphic file for mine to reduce the keystrokes required).

Deleting Graphics From Your Weblog

To delete a graphic that you have placed in your weblog, simply delete the graphic itself in your text entry area's WYSIWYG space just as you would delete any text.

To wipe out a graphic file from your entire website:

1. Right-click the radio icon in your Windows status area at the bottom of your Windows screen.

2. Open your WWW folder.

3. Open the folder or subfolder containing your graphic(s).

4. Move them, cut them or delete them to the Microsoft Windows recycle bin.

5. Done. When Radio performs its next upstream event, the same graphic(s) will be deleted from your public site.

(Important: don't forget to delete the <img src> links from your weblog posts or stories. Otherwise, your readers will get an accurate but unpleasant message that your graphics can no longer be found).

Congratulations! You can now clutter up your weblog posts with pictures just like me.

 <-- Return to Home Page