Rayne Today

Rayne Today
Searching for dharma, in spite of the weather... Proud member of the Reality-Based Community

Thursday, February 17, 2005

How To Post Pictures: a tutorial for the frustrated Radio blogger

This tutorial is written for our Salon pal Dick Patteran and other Salon bloggers who suffer the unrequited desire to post picture or multiple pictures to their Radio blogs. Most of us in Salon blogs have done little if any programming or code writing; most of us have been fortunate for the help of others here in Salon who have expertise in web development or programming (thank you so much, you know who you are!).

If you are new to Salon's Radio blogs and feel frustrated, you are not alone; most of us have been in the same position as you are, exasperated with learning what feels like a very foreign language. Congratulations! You ARE learning a foreign language, a programming language!! Feel validated in your frustration!! Pat yourself on the back and then let's move on.

(Note: these instructions are written for folks using WinXP; they may still work in Win98 and Mac. If you have either 98 or Mac, let me know what might be different in comments. Thanks!)

PART I: WHERE ARE THE BLOODY PICTURES? (an overview)

If you really want to use pictures in your Radio blog posts with a bit of proficiency, you should understand the file architecture in Radio software.

The Radio software looks for pictures to upload from one of two locations, assuming you are using WinXP:

Location (1): My Documents > My Pictures > Radio Upstream

Pictures saved to this location should upstream almost as soon as they are saved to this folder. They will not "stay" here, though.

Location (2): C:/Program Files/Radio Userland/www/images/[year]/[month]/[day]/[filename]

Pictures saved here also upstream almost immediately from this folder. this is the permanent home of your pictures on your computer. Upstreaming moves a copy to the Radio blog server where readers can see it.

When you save a picture to Location (1), you are actually launching a Radio script that creates a new folder in the [year]/[month]/[day]; after the file is created, Radio moves the picture file from Location (1) to that new folder at Location (2).

Be brave and poke around here in C:/Program Files/Radio Userland/www/images/, just take a look-see (don't delete or move anything while poking and you'll be fine). You'll find every picture you've ever posted in this area. It will make more sense after you acquaint yourself with how this architecture works.

Here's the tricky part (that's really very easy): You can directly file a picture to the Radio software folders by creating a sub-folder named with today's date in the correct month. Use Windows Explorer or My Computer, find the www/[year] folder, check for month; add a month folder if necessary, then a day folder under the month. Copy your picture to this new day folder.

You are now ready to add the picture to your next blog post.

PART II: HOW DO I ADD MY FREAKING PICTURES TO A RADIO BLOG ENTRY? (the instructions)

After opening the Radio editor in your browser window, take note of the button marked "Source" under the text editor box and click it. When you are in "Source" mode, you are able to edit your post in HTML (hypertext markup language). This is what browsers "see"; what browsers display is WYSIWYG (What you see is what you get). We're going to use "Source" mode to post a picture.

Before starting, note your Salon blog user number (Dick, yours is 2065).

1) Resize or sample picture of choice. Optimum size: no larger than 600 x 600 pixels. (Your mileage may vary.) Optimum file type: .jpg format (smaller, loads faster). BE SURE TO NOTE SIZE in pixels, width and length.

2) Set up a folder to contain today's picture(s) to be uploaded.

-- Locate this path: C:/Program Files/Radio Userland/www/images/2005/[month]/[new folder here with today's date as name]
-- New folder will be named using two-digit number representing date (First of month = 01)
-- Note: months are designated using two-digit number naming (file named 10 = October)

3) Copy or move picture file to new folder; make note of full path name.

4) Launch Radio and open editor in browser (open HomePage)

5) Click on "Source" button under editor window.

6) Copy the following script into editor window:

<IMG height=300 alt="A picture named PhotoName.jpg" hspace=15 src="http://blogs.salon.com/0002065/images/2005/01/18/PhotoName.jpg" width=400 align=left vspace=5 border=0>

7) Edit script above as necessary; change height and width to correct size of photo (values shown are in pixels), change PhotoName to actual picture name for both alt and src values. Tweak hspace and vspace if you are comfortable with doing so (hspace = head space, vspace = vertical space).

The script as written here tells your browser that a file "PhotoName.jpg" is located in Radio's internet image file under January 18th, 2005; you will change the date in the script to correspond to the correct year, month and day folders. This same script also aligns pic with left side of post; you can center or right align a picture, too.

8) Click on WYSIWYG button under editor window to view post with your new picture; return to "Source" mode if necessary to tweak code. If you want to add text, you can do so in either WYSIWYG or Source modes.

9) If you want (2) or more pictures in the same post, simply add space between the first pic and the second (might be easier in WYSIWYG to add returns after the first photo, then go back to Source mode), copy the Picture script again and paste, tweak as you did for the first pic.

10) It would be best to SAVE your work; to save without upstreaming to the Radio server, uncheck the "Home Page" button and click on "Post to Weblog"

11) Click on "Post Changes" after any further editing when ready to upstream and share your pictures with the world.

Good Luck!