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

Printer-friendly version

Author: 

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

Comments

Image sizing...

Puddintane's picture

The Top Shelf daemons automatically resize large images, so you don't have to worry too much about the maximum upload size. They will be whipped into line.

Also note that the pop-up window that opens for the upload may not be optimally sized in some browsers, depending on your default settings, and the choose and upload buttons are at the very bottom. You may have to re-size the window for these buttons to become visible and these excellent directions to become perfectly clear.

Once an image has been uploaded, one can re-use it from your library without uploading it again.

Also, once the image has been placed, in the splash header (above the <!--break-->) for example, the code to access it doesn't change, so you can copy the splash header as a whole and re-use it (with suitable editing of the text) for further episodes in a serial publication.

Here's one I used in a blog response, for example:

<img src="/topshelf/system/files/u2392/malefemalescaled.jpg" width="145" height="137" alt="IMAGE: Male/Female Skeletons" />

 Male/Female Skeletons

The above illustration is a hasty montage of a male and a female skeleton re-sized to be identical in height.

With permission, several authors working on related stories, for example, can share the same image across user IDs, although they will have to be identified by the user who "owns" them, since other users can't browse their private image libraries directly.

Cheers,

Puddin'

-

Cheers,

Puddin'

A tender heart is an asset to an editor: it helps us be ruthless in a tactful way.
--- The Chicago Manual of Style

Salvation! Or is it?

Not having had any response to my recent heartrending appeal on this very subject, I did manage after the expenditure of much toil, tears, blood etc., some of which was even my own, to get a picture onto trial teaser. The breakthrough came when I abandoned Firefox which I couldn't persuade to do my bidding and tried Safari. This latter produced the browser box complete with both choose and upload boxes, a task that was beyond Firefox.

Success!

Not really. What I now want to do is to introduce text alongside the picture. I thought the best way to do this would be to prepare a .png comprised of both picture and text. Somewhat to my surprise I eventually managed to do this. The trouble is though I can't get it to stretch right across the page. The left hand side (facing) is blank. I have tried various sizes but in vain. The auto adjust defeats me. What ratio width and height do I need? I have been working on an A4 size estimating about 8" across and 3" deep but all in vain.

I may have to try the HTML code and would welcome your advice on such Bobbie although the mere thought of it fills me with the direst foreboding.

Hugs,

Flurrie Fleurie

Fleurie

Time for lesson two

bobbie-c's picture

Hokay....

Here goes lesson two: how to create tables.

My problem now is how to write HTML code and make it appear as just plain text here... hmmmm. Darn, now I have to use ampersand codes...

Concept No. 1 - Making Tables:

Now, you know the concept of tables in spreadsheet programs like Excel or Lotus 123? Or better yet, how to make tables in MS Word? Here is an example:

THIS IS
A TABLE

In order for you to put text on the left of your picture, or the right of your picture, you will have to use a table. In essence, you have to put your picture in one of the cells of the table, and text on the left of the picture will have to go in a cell to the left of the picture cell, and text on the right of the picture will have to go in a cell to the right of the picture cell.

Also, tables have rows and columns. (duh...) In the example, the first row has the words "THIS" and "IS", and the first column has the words "THIS" and "A".

Hope that's clear.

Concept No. 2 - Tags:

'kay. Let's do another basic concept. You know that, when writing text, the computer needs to know where the text begins and ends? Well, low-content programming languages accomplish that by having a beginning tag and an end tag. That's the same in HTML code.

Tags in HTML are bracketed by a less-than sign ("<") and a greater-than sign (">"), and end tags are always accompanied by a "/".

Here's an example: the code for dictating the font of text is "font".

To manipulate a piece of text's font means you have to sandwich that text in the middle of the font Beginning Tag and the font Ending Tag. To illustrate, here's an example of manipulating fonts.

If you enter the code:

<font size='12' color=darkblue> I WANT THIS LARGE AND IN BLUE!!! </font>

it will give you this:

I WANT THIS LARGE AND IN BLUE!!!

Concept No. 3 - Concept number 1 butting heads with concept number 2

The html code for table is "table" (well, duhh...). Thusly the table's beginning and end tags are <table> and </table>

The html code for a table row is "tr". Thusly - <tr> and </tr>

The html code for a column in a row is "td". Thusly - <td> and </td>

Clear?

Now, the thing to do is to sandwich the text you want to appear in a certain cell within the appropriate pair of tags. Therefore, in order to put your picture IN the table, you just have to copy-and-paste all the HTML crapola that the editor generated in Lesson Number One in place of the text of the cell.

And ALWAYS remember that tags are always in pairs. If you forget to put the matching end tag with the beginning tag, then you're screwed.

That means, you begin your table with the <table> tag, you then put all your rows and colums sh..tuff in,, and when you are done with ALL of the crapo..umm stuff for the table, you will end it with the </table> tag.

Same is true for the row - begin the code for the row with the <tr> tag, put all the colum text in there, and then end it with the </tr>. Same with the column.

'Kay. Thus endeth another lesson. It's is now time to learn to fly solo, little padawan. So spoke Jedi Master Bobbie-Wan-Kenobi.

The shaming part about it is .....

.... that you make it sound so logical, so easy. And yet I find it quite beyond me. I just knew it was a mistake to ask.

I know I won't be able to make it work. I read it and read it and each time I do so I am more and more confused.

I will try it Bobbie. And try it again and again. And if by some happy mischance I managed to arrive at a happy conclusion I will let you know. I might even let you know if I see a chink of light through the mists of chaos in the hope that you might again prompt me to arrive at the Grail.

In the meantime my heartfelt thanks for your patience, care, and clarity.

Hugs,

Fleurie Fleurie

Fleurie

I totally understand

bobbie-c's picture

No need to be apologetic. I completely understand.

I think, just typing the instructions in text is problematic, in that you cannot visualize what I am saying.

If you want, I can make a nice instruction thingie in Microsoft Word, with illustrations and such, and email it to you (but you'll hae to give me some time, as I just don't have much spare time nowadays).

So, if you like my suggestion, please send me an email address I can send it to (do it through a private message). That's your option, of course, as I have no intention of invading anyone's privacy and such.

- bobbie

I totally understand

bobbie-c's picture

No need to be apologetic. I completely understand.

I think, just typing the instructions in text is problematic, in that you cannot visualize what I am saying.

If you want, I can make a nice instruction thingie in Microsoft Word, with illustrations and such, and email it to you (but you'll hae to give me some time, as I just don't have much spare time nowadays).

So, if you like my suggestion, please send me an email address I can send it to (do it through a private message). That's your option, of course, as I have no intention of invading anyone's privacy and such.

- bobbie

I forgot ....

.... the email address - [email protected]

I may have solved the alternative method of a .png file but I would still very much like to know the HTML method as I think it looks a lot better.
Fleurie

Fleurie

Fleurie

In which case...

bobbie-c's picture

In which case, I will get cracking on a little "inserting a graphic in your story" tutorial-slash-manual this halloween weekend (in between writing chapters to my still-uncompleted stories that is), and send it to you. Hope you have Acrobat Reader in your computer though.

Advanced Happy Halloween! Booo!

- Bobbie

ask for editorial assistance

bobbie-c's picture

But I think you can get your story out faster by asking for some layout assistance. It does require a leap of faith and trust, that you are allowing another person the ability to tinker with your creation, but I think most people in Topshelf are the trustworthy sort. I know I got scads of help when I started posting. Sephy, for example, really helped me in getting started on the whole HTML thing, and she actually edited the first installments of my first story for me. I hesitate to mention the names of the others who have offered layout AS WELL AS editorial assistance, though, as I gathered from one of them that most prefer anonymity. But there were several, and I am grateful for their help.

PM the site admin people - I am sure they can make recommendations.

- Bobbie

Tables Continued...

Puddintane's picture

<table align="center" width="90%" border="0" bgcolor="#ffffff">
<tbody>
<tr>
<td border="0" valign="top" align="center">
<p><img src="http://bigclosetr.us/topshelf/system/files/u2194/Fleurie_Pic..." width="195" height="330"/></p>
</td>
<td border="0" valign="top" align="center">
<p>Column Two Title< /p>
<p>Etiam eu ante non leo egestas nonummy</p>
</td>
</tr>
</tbody>
</table>

====================

Column Two Title

Etiam eu ante non leo egestas nonummy

This is the skeleton for a two column table in which the left column is used for the picture. Because the width of the columns is not defined, it will vary in size depending on how large the picture is. Be sure not to make the picture so large that people using small screens don't have much room for the right column text, because it will look awkward.

You'll notice that I used your tiny picture and simply enlarged it (a bit too much, which is why it looks pixelated) to a reasonable size.

One doesn't need to know exactly how to create arbitrary web pages to use a template like the one above, tweaking the bits that look pertinent as needed. It's something like a colouring book; the lines are already there, but you can invent whatever colour scheme you wish.

Cheers,

Puddin'

-

Cheers,

Puddin'

A tender heart is an asset to an editor: it helps us be ruthless in a tactful way.
--- The Chicago Manual of Style

Tables...

Puddintane's picture

<table align="center" width="90%" border="0" bgcolor="#ffffff">
<tbody>
<tr>
<td colspan="3" width="100" border="0" align="center">
<p><font face="Verdana, san-serif" size="+1"><strong>Top Title</strong></p>
<hr />
</td>
</tr>
<tr>
<td width="47%" border="0" valign="top" align="justify">
<p>Column One</p>
<p>Nunc auctor bibendum…</p>
</td>
<td width="6%">
</td>
<td width="47%" border="0" valign="top" align="justify">
<p>Column Two</p>
<p>Nunc auctor bibendum…</p>
</td>
</tr>
</tbody>
</table>

====================

Top Title


Column One

Nunc auctor bibendum eros. Maecenas porta accumsan mauris. Etiam enim enim, elementum sed, bibendum quis, rhoncus non, metus. Fusce neque dolor, adipiscing sed, consectetuer et, lacinia sit amet, quam. Suspendisse wisi quam, consectetuer in, blandit sed, suscipit eu, eros. Etiam ligula enim, tempor ut, blandit nec, mollis eu, lectus. Nam cursus. Vivamus iaculis. Aenean risus purus, pharetra in, blandit quis, gravida a, turpis. Donec nisl. Aenean eget mi. Fusce mattis est id diam. Phasellus faucibus interdum sapien. Duis quis nunc. Sed enim.

Column Two

Nunc auctor bibendum eros. Maecenas porta accumsan mauris. Etiam enim enim, elementum sed, bibendum quis, rhoncus non, metus. Fusce neque dolor, adipiscing sed, consectetuer et, lacinia sit amet, quam. Suspendisse wisi quam, consectetuer in, blandit sed, suscipit eu, eros. Etiam ligula enim, tempor ut, blandit nec, mollis eu, lectus. Nam cursus. Vivamus iaculis. Aenean risus purus, pharetra in, blandit quis, gravida a, turpis. Donec nisl. Aenean eget mi. Fusce mattis est id diam. Phasellus faucibus interdum sapien. Duis quis nunc. Sed enim.

This is the skeleton for a newspaper-style three column table, but the centre column is used exclusively for the purpose of creating a separation between the left column and the right column. The columns are justified, but HTML is not flexible enough to flow the text from one column to the other without extraordinary jiggery-pokery, so one has to balance the columns of text by hand.

Cheers,

Puddin'

-

Cheers,

Puddin'

A tender heart is an asset to an editor: it helps us be ruthless in a tactful way.
--- The Chicago Manual of Style

Tags...

Puddintane's picture

are not rocket science, and in fact we use tags all the time in real life, the most common being quotation marks, which always come in pairs, and are so intuitive that we can use them in speech as a hand gesture (usually two hands) to indicate the fact that we want to set off certain words as ironic or otherwise "special." We use many other symbols in a similar manner:

« Guillemets or French Quotes »

(Parentheses)

{Curly Brackets or Braces}

[Square Brackets]

*Asterisks* for example, to indicate bold face usually.

Likewise, we often use _underscores_ to indicate italics.

If you speak (or at least recognise) Spanish, you might recognise these symmetrical punctuation mark pairs as tags:

¿Que te pasa, calabasa?

¡Hola!

Here's Victor Borge and his phonetic punctuation:

http://www.youtube.com/watch?v=lF4qii8S3gw

Listen carefully, and you'll learn everything there is to know about tagging.

Cheers,

Puddin'
-----------
« Cela est bien dit, répondit Candide, mais il faut cultiver notre jardin. »
—Voltaire, Candide

-

Cheers,

Puddin'

A tender heart is an asset to an editor: it helps us be ruthless in a tactful way.
--- The Chicago Manual of Style

Belated Thanks, Bobbie & Puddintane.

So many comments, apart from on my stories, that they are off the board in you are away for a couple of hours. So I lost the thread here and hadn't realised the extent of the help offered.

Thank you both very much for all your time and patience. It really is greatly appreciated. Actually, and in spite of my general incompetence I am quite fascinated by the subject. I shall have to go away and practice. You probably gathered that Erin stepped in valiantly and worked her wonders over the eventual teaser for 'An Eft' after I had tried, predictably without success, to insert a composite picture and text .png file.

Whilst as a general principle I decided years ago to stop learning anything lest I be overwhelmed by a sense of futility/disillusionment, and whilst it is true that I wouldn't let an editor within a million miles of my tales lest it all end in acrimony, I am sorely in need of technical guidance when it comes to HTML and the construction of teasers etc. In fact anything remotely connected with the wondrous workings of computers. For all such I am truly grateful.

I shall also have to go away and brush up on my Latin which has alas rusted away leaving only a little pile of reddish brown tags of the 'ubique quo fas et gloria ducunt' variety remaining. The spell that activates the columns in Puddintane's example is beyond me and I would hesitate to pronounce anything out loud the meaning of which is obscure to me. Funny things spells!

Thanks again.

Hugs,

Fleurie Fleurie

Fleurie

Picture with words

Rhona McCloud's picture

Much explanation about this is over my head but to get around my problem of not being able to make and upload tables I have, using a photo editor, added words to photos or added words and a photo to a blank photo sheet before uploading

Rhona McCloud

You might try...

Andrea Lena's picture

picmonkey.com or any similar photo enhancing website.

  

To be alive is to be vulnerable. Madeleine L'Engle
Love, Andrea Lena