School of Hard Knocks 101: How to put pictures in your story

Seems others are interested in putting pictures in their stories, too, but are having a bit of a problem figuring it out.

So, even though Erin and Sephy have covered it in better detail somewhere in the site already, again, here's how to insert pics in your stories, this time ala-bobbie-cabot. (I am actually pasting a portion of a message I sent to a friend earlier - hope that's all right, 'K'?)

School of Hard Knocks 101, Lesson 1 - Putting pictures in your stories
----------------------------------------------------------------------

OK. I learned this the hard way, and it's not that I know how to program in HTML, so be warned - this came out of experimentation only.

This starts off from the point where you have already encoded everything, except for the story, and are now in EDIT.

(1) First, in the "Body" window, place the cursor where you want the picture to come out. (To avoid confusion, I suggest you keep a couple of lines above and below the cursor blank)

(2) Now, right below the "Body" window is a couple of hotlinks. It says "Insert image or link". Click on "image".

(3) This action will bring up the "Image/File Browser" window. From there, you will need to click the "Choose File" button. This will bring you to a "File Open" window similar to Windows Explorer when you are looking for a file. (If you are familiar with windows, this will be verrry familiar) Browse for the graphic file you want and select it the same way you would in Explorer. Selecting the file will bring you back to the "Image/File Browser" window.

(4) After this, the file name should come out beside the "Choose File" Button. (If it didn't repeat # 2 and 3). Next step is to upload the file. Click on the "Upload File" button.

The filename should come out in the list of files in the upper half of the window. Click the "add" operation for that file to add it to the story's text. When you click "add" it will close the "Image/File Browser" window, and you will be brought back to your story's text.

Depending on your OS, the code to insert your picture will either be where you left the cursor, or at the top of the file.

Now, there are two things I am sure you would want to do after this:

(a) control the size of the picture - In order to do that, just change the width and height (in the example this is 400). Now, in order not to distort the picture's dimensions and not alter the aspect ratio, you have to maintain the ratio of the width to the height. If you find that hard, there is a "Resize image" button on the "Imge/File Browser" window. Play with that one until you get the hang of resizing.

(b) Change the alignment - in order to make your picture come out on the right, in the middle, or on the left, you have to use the usual HTML code to align text. (I guess that can be lesson 3)

Know that the picture will occupy one whole line. If you want to have text come out on the left or right of the picture, you will need to know how to make tables using HTML code. Let me know if you want to know how to do that as well. (So I guess that can be lesson 4)

Also know that Topshelf only allots a limited space for your files, and the largest file you can upload is 1MB. That means you're gonna haveta economize on the file sizes of your pictures, as well as the number of files. If the allote space is not enough, you're gonna need to contact Erin for special permission.

- - - - - - - -

And so endeth the lesson.

Many thanks to my friend, mentor and Chief Layout Editor, Sephy, who, ummm, "forced" me to learn to edit my stories via HTML, and I will forever be grateful to her for this. ;-)

Actually, I brought it on myself. Without Sephy providing examples and for her patince, I wouldn't be able to do much. Thanks, Sephy.

- Bobbie

Click Like or Love to appropriately show your appreciation for this post: