Date: 2014-11-25
To: Adding Multiple Photos, etc.
Miles today: 0.0
Weather: broken clouds

In the Guest Book, Drifter asked me to share how I post multiple pictures in one post.A big thanks to Stumpknocker for sending me the basic entry for embedding a picture, along with the entry for putting a space between paragraphs. I recognized the entries as being in HTML code. Being a self-proclaimed geek-wannabe, that sent me on a trek to figure out even more options on formatting my entries.You don¢t have to be a professional HTML programmer to do this! I¢ll give you some snippets of code that you can just copy and paste into your journal. Those of you with good memories for this sort of thing can probably memorize the entries. I'll also discuss some more elaborate options for those of you who want to get fancy!First of all, HTML does not recognize carriage/line returns (hitting the Enter key). Programmers use the carriage return in their programs simply to help them better keep track of the program as they write or edit it.On the Journal Entry page of trailjournals, notice the options at the bottom of the page for HTML or Text format. The Text format option simply adds the HTML tag (code) for a line break (start a new line) in place of any carriage returns and then enters it as HTML code. You may have noticed that many trail journals don¢t have any space between paragraphs. I don¢t use the Text format option, but I suspect if you did two carriage returns between paragraphs, it would add one blank line between paragraphs.You¢ll want to select the ¢HTML format¢ option before you post your journal entry.NOTE! HTML code uses the "less than" symbol and the "greater than" symbol to enclose tags like line break, new paragraph, insert picture, etc. If I used the actual "less than" and "greater than" symbols in my text below, they would be interpreted by the HTML program as tags rather than descriptive text and wouldn't show up. (There's a way around it that is too burdensome the way trailjournals changes such text when I try to modify a page.) Sample HTML CodeIMPORTANT: When you see the bracket symbols "{" and "}" below, replace them with "less than" and "greater than" symbols!Less Important: HTML tags don't differentiate between upper and lower case letters. {P} is the same as {p}.To start a new paragraph: {p} This will start a new paragraph with appropriate spacing between paragraphs. Note: HTML not only ignores carriage returns, it ignores multiple spaces between words and multiple paragraph tags. If you want more than the normal paragraph spacing, use multiple line break tags. Example:{p}{p}{p} gives the same spacing as a single {p}:A line break: {br} gives this spacing: {br}{br}{br} gives this spacing: To add a picture: {img src="Picture URL" width=350}The actual URL of the picture you want to insert is typed between the quotation marks. (See the example below for the actual URL I used. It's a picture I posted in the Photo section of my journal.) You can also change the width of the picture - I typically used 350 for landscape orientations and 250 for portrait orientations.Put line break or new paragraph tags before and after the picture code, depending on what spacing you want.To add a picture with a title:{img src="/images/photos/journals/16577/tj16577_020999_024456_850025.jpg?20140622005726" width=350} {br}{b}{i}{font size="-1"}East Coast from STS-27{/font}{/i}{/b} East Coast from STS-27I used the same title format that trailjournals uses for the photo at the top of the page: br: go to next line, b: bold, i: italics, font size="-1": reduce the font size by 1. East Coast from STS-27: whatever title you want to use. /font: go back to original font, /i: stop using italics, /b: stop using bold type.You can simplify the code by deleting font options, with the simplest code for a title being just:{br}Title Which would add the title below the picture in the same font as the text - essentially just adding regular text.To get the picture URL:-- Post the picture somewhere on the web. I simply uploaded them to the trailjournals site, but you could have them other places on the web.-- Go to the web page displaying the picture.-- In Internet Explorer: Right click on the picture; Select "Properties"; Select and copy the "Address (URL)"; Paste into code.-- In Firefox: Right click on the picture; Click on "Copy Image Location"; Paste into code.On my Android phone, I couldn't figure out an easy way to get the URL using its regular browser. I loaded Firefox onto my phone, and could get the URL using the steps above. (Holding my finger on the photo takes the place of right clicking.)To surround pictures with text: Lunch Time!If you want to surround pictures with text and/or put them on the right side or middle of the page, you can do that with tables. That's what trailjournals does with the picture you can insert using the options on the Journal Entry page. I think this looks better and did it for many of my early posts. On the trail, I decided it was too much trouble, and reverted to the simpler method above. I got the code by simply copying the code trailjournals uses. It's easy to see the HTML code of a web page. What's more difficult is finding the bit of code you want in all that gobbledygook!Simply right click on this page and select ¢View source¢ in Internet Explorer or ¢View Page Source¢ in Firefox. Scroll down through all the gobbledygook and you¢ll finally see the text I've written in black - about line 335 in the left column. Above that, about line 330, is the code for the picture table at the top of the page. Here's a simpler version that deletes the hyperlink for clicking on the picture:{table align="right" width="320"}{tr}{td}{img src="PictureURL" width=320 align="middle"}{br}{b}{I}{font size="-1"}{center}TITLE{/font}{/I}{/b}{/TD}{/TR}{/TABLE}The Align="right" in the first line determines where the table goes. It can be "left", "right" or "center". The Width in the first line is the width of the table. I always made that the same as the width of the picture in the second line.The Align="Middle" in the second line is where the picture shows up in the table cell. Leave that as "Middle".In the third line I added {center} before the TITLE. That centers the title below the picture.The last line gets you out of the table and back to regular text.The actual code I used for the "Lunch Time!" photo above can be seen at about line 407 of the source code for this page.If you have a question or want to get fancier - like multiple spaces or hyperlinks - simply google what you want and/or view the source code of a page that uses what you want. There are lots of HTML explanatory sites out there. Have fun!PS The East Coast picture above is one I took from about 240 miles above Lake Erie during my first Space Shuttle flight. The picture has a big chunk of the AT in it!