Skip to comments.How to put a photo in a message? (vanity)
Posted on 09/02/2008 6:25:35 PM PDT by ProudFossil
How to put a photo in a message help needed.
Rather than give you a fish.....
I’ll show you how to fish.
Let's say you have an image called name_of_image.jpg.
The basic tag is <IMG SRC="http://wherever_the_image_is_hosted.com/name_of_image.jpg">
You might have to put more of a path in there, depending upon where the image is located on the website.
copy the link or url to the photo and paste this at the end
and this at the beginning
Put the URL of the photo where is says URL.
Keep the quotes and add < and > at the two end of the line.
Line break <br>
Paragraph break <p>
<font size=1>Smallest FR fon</font> Displays as:
Smallest FR font
<font size=7>Largest FR font<font> Displays as:
Largest FR font
Step font size up or down with <big>bigger</big>
"Hidden" text: <font color=white> White font </font>
Drag cursor over blank area to highlight to read...
Posting a link:
<a href=[web address]>[title]< /a>
This: <a href=http://www.freerepublic.com/focus/f-news/1179145/posts>Iran starts atom tests in defiance of EU deal</a>
Posts as this:
Iran starts atom tests in defiance of EU deal
Posting an image:
<img src="[web server location]">
Clarity is needed - you can't just snag a favorite picture from a desktop folder...it has to be hosted someplace to be transferrable to our posts. ~ ErnBatavia
This: <img src="http://www.notablebiographies.com/images/uewb_09_img0611.jpg">
Tip: control the size with "height=nnn" like so:
This: <img height= 200 src="http://www.notablebiographies.com/images/uewb_09_img0611.jpg">
While This: <img height= 100 src="http://www.notablebiographies.com/images/uewb_09_img0611.jpg">
Thanks to BykrBayb for a tip on using < instead of showing < with a space that needed to be removed and the blockquote command...
bookmarked for dinosaur :)
I use photobucket.com for my photos.
You have to log out first,. No, really, seriously, that’s the quirk of John’s software. Then, follow the instructions from the above posts!
bump to save
I never log out and I have no problem posting images.
Thank you for the question. It was a big help to me, too!
Yeah, I go clear back to CPM days.
Easiest way to do it in 2 steps:
1. Go set up a free Photobucket account and upload your pics to it. http://photobucket.com
2. Once you upload pics, in the photobucket album under the pics it will display the actual http links that you can simply copy and paste directly into the posting window at FR.
It’s absolutely the simplest way. Other FRiends have given you ways also to link to the pictures yourself.
Post a pic to this thread once you figure it out.
Let me know what you find out.
Is not difficult for some people.
Whoooo!! I ask a question and get an encyclopedia. As you can see I have a method (probably the easiest one because I am so lazy).
THANK YOU ALL VERY MUCH...
Good work soldier!
Is that Sponogebob? It looks like he took The Captain’s advice and dropped on the deck and flopped like a fish.
< img src=”...jpg” width=”400” height=”357”>
MaryFromMichigan recommend alerting the mods on this
Did I do something wrong? I didn’t see the deleted post.
HTML Paragraphs & Whitespace Characters Fonts Images Hot Links
It is often interesting to look at the raw HTML when you see something amusing. Most browsers have a menu item that is something like View Source which allows you to look at the HTML directly. I am currently using Chrome as it provides a particularly sweet view of the tricks involved by right mousing over the item you wish to inspect and selecting Inspect Element. Firefox provides control-u as a quick way to get the entire page of HTML source and in Firefox 10 at least right mousing over an element will also allow you to Inspect Element. I haven't looked at IE in years, maybe you could tell me.
Conventions: In general, anything that appears in bold between angle brackets as in <bold> is HTML and needs to be typed exactly including the angle brackets and any quote marks. If you see quoted text containing mumble it means this entire quoted bit is variable and you need to substitute the correct text for it.
Nearly all HTML tags (what we call the bits between the angle brackets) come in pairs. This makes sense as usually you want to do something, like make a chunk of text bold, and then not do it anymore. So we see a tag that opens the new formatting, some text, and then a closing tag. The closing tag generally looks like an opening tag with a forward slash in front of the text part, thusly: <tag>sample text</tag>. One exception to this is the paragraph <p> tag, which can be used on its own without a closing tag. Using a closing tag with <p> Your paragraph here </p> is considered good form though. The gods of HTML will smile on you if you do...
The tag-type is the first text after the left angle bracket that opens the tag. There must be no space between the angle bracket and the tag-type, if there is then HTML treats the whole business as text. There can be additional information in the opening tag that is not a part of the tag-type. This is shown as an attribute="value" pair following the tag-type separated by a space. The equal sign and the quotes are mandatory parts of the attribute/value pair.
Anchors are tags which pin down a location. An anchor looks like <a name="top">. This one is used to define the top of this page and is the first line in the raw HTML that renders into it. The tag-type is the a after the left angle bracket, the name="top" is an attribute/value pair which serves as an identifier for this particular anchor so that it can be referred to by other bits of HTML. A closing tag would be nice, but it isn't required for this anchor. Adjacent to the major headings on this page there is another anchor <a href="#top">top</a> which is also a hotlink. This does have a closing tag, which serves to delimit the text that is to be the clickable hotlink. The # in front of "top" in the href tells the software that the anchor referred to is located on the current page. This is not optional. The second top is text which is being formatted into a hotlink by the HTML that surrounds it.
Another thing that it is good to know is how to nest (order so as to do what you want) the tag pairs. These examples:
<tag_A> some text </tag_A> or
<tag_A><tag_B> some text </tag_B></tag_A> or
<tag_A> some text <tag_B> some more text </tag_B> even more text </tag_A>
are all legal and useful nestings.
<tag_A><tag_B> some text </tag_A></tag_B>
and similar broken orderings are not legal or useful. In general, the rule is that you can not close a tag with an open tag inside. Most browsers will handle this gracefully and close all of the open tags inside the one being closed, but you won't see the behavior that you desire.
Break <br> works like your expect Enter (or Carriage Return) to work. It gets you a single LFCR (Line Feed Carriage Return, just like an ancient typewriter). Paragraph <br> makes what follows into a paragraph set off by linefeeds. Neither <p> or <br> requires closing tag. Closing a paragraph actually makes good sense, closing a break seems like a waste of perfectly good characters.modulo the HTML gods referenced above.Blockquotes are another useful trick. This entire paragraph has been enclosed in blockquotes. Anything you put between <blockquote> the example text <blockquote> gets indented and set off by linefeeds before and after. This example, rendered, will look likePreformatted, or the <pre> tag provides a way to grab a bunch of text that is already formatted with tabs and spaces and not have HTML eat all that lovely white-space. As usual a closing tag is required with this </pre>. You can use this trick on a webpage but you need to realize that if the text you are copying wraps because it runs into the edge of the page and not because there is a CRLF present it will behave the same way in the preformatted chunk.the example textthe text above. Blockquotes can be nested (placed one inside another) and are a great way to distinguish the source of a quote from your own text.
Lists are another way to order chunks of text and white-space. Lists can be either ordered, with numbers or letters preceding the list items or unordered with selected dingbats (disc, circle, square) fronting the text. The default dingbat is a disk; losing the dingbats is unfortunately not an option. An unordered list looks like:
Tables are yet another means of generating white-space. People used to make extensive use of tables to control placement of objects on a page. It was really quite dreary and something had to be done so <div> was invented. If you want to play with tables and div you really need to go here http://www.w3schools.com/html/default.asp .
Horizontal Rule <hr> generates a horizontal line the width of the page. People often use this to separate their comments from those being commented upon. This also does not need a closing tag.
delete stuff, which replaces the deprecated <strike> There is an underline tag as well that should not be used as it confuses people who think it is a link.
There is also a <big> bigger stuff </big> which yields bigger stuff and <small> smaller stuff </small> which rolls like smaller stuff. You can get your readers to really squint at your stuff by <small><small> really small stuff </small></small> really small stuff. If you are a fan of the typewriter there is also a <tt> typewritten stuff </tt> and it types out typewritten stuff as expected.
Superscripts and subscripts are also available. He<sup>3</sup> gets He3 H<sub>2</sub>O makes H2O
There are some characters that are special in HTML, like the left and right angle brackets <> and a few others. Obviously there has to be a way to render those characters on a page. This is done with another pair of special characters, the ampersand and semicolon ( & ; ). These are used as delimiters for either a numeric value or a short and specific reference to the character desired. See http://www.w3schools.com/tags/ref_entities.asp for a more complete treatment.
Another means of generating white-space is non-breaking spaces, This creates a space that HTML won't eat. You can put multiple of these in a row for spacing but it is considered poor form. Mostly because the spacing depends on the current font and if it is a proportional rather than a fixed pitch font it gets even more complicated. Notice that the ampersand and the semicolon are used as delimiters (boundaries) for the value between them. A variation on this technique is how these delimiters appear on this page.
<font color="red" face="courier" size="5"> Red Courier slightly Larger </font> gets you Red Courier slightly Larger What you can change about a font is its color, the typeface and the size.
Color is the value contained in quotes after the color= part of the opening font tag above. Most normal names are supported, 147 total. For finer control hexadecimal values can be specified. For a full color treatment mash here.
Face is the typeface that you want the browser to render. Types available to most browsers include "arial" "times" "helvitica" and "sans-serif". You can specify multiple names with the preferred fonts first like this <font face="verdana,arial,sans-serif">
Size is a numeric value between 1 and 7 inclusive with 7 being largest. Three is the default value and is used in the majority of this document.
<img src="http://mumble.com/image.jpg"> substitute the actual source of the image for http://mumble.com/image.jpg This image must be out on a server on the web someplace, not on your machine. This is why people have flicker and picassa accounts.
Stationary images usually end with .jpg or some variation. Moving images on this forum are only possible using images which end in .gif The .gif format allows for short sequences of stationary images to be presented like a very tiny movie. Currently the forum does not appear to allow embedded video.
You can position an image relative to its surrounding elements using the attribute align="middle". Recognized attribute values are top, bottom, middle, left and right.
<img src="http://jc-evans.com/wp-content/plugins/wp-o-matic/cache/61cb2_zQLMZ.gif" align="right" alt="Kittie doing its nails."> gets you:
This is some text to show how it flows around the image. This is before the image in the source HTML with a paragraph called out before the text. Isn't the expression of the cat's face just priceless? And this is text right after the image. I have found left and right attributes to be useful, the rest not so much. You really seem to have to have quite a bit of text for the behavior of the flow to come out. Dinking with the window width seems to help. Perhaps a smaller picture in the x-axis? But it's sooo cute.
Does adding a paragraph move the header down below the image? Nope, sure doesn't. Think of the anchor as the upper left corner of the image and as far as HTML is concerned that corner goes right after the word "priceless", but it is aligned right so it starts on the line with "priceless" and hangs to the right.
Here is a hot link for a Google search on "furlongs per fortnight" that opens in a new tab. <a href="http://www.google.com/search?q=furlongs+per+fortnight&btnG=Search" target="o" title="Search furlongs per fortnight"><b><font color="#0039b6">G</font><font color="#c41200">o</font><font color="#f3c518">o</font><font color="#0039b6">g</font><font color="#30a72f">l</font><font color="#c41200">e</font></b></a> gets you this cute little mashable text:
It's pretty and clickable. Let's look at the individual elements.<a href="http://www.google.com/search?q=furlongs+per+fortnight&btnG=Search" target="o" title="Search furlongs per fortnight"> The first a is the anchor for this hotlink.That's all folks! top
href="http://www.google.com/search?q=furlongs+per+fortnight&btnG=Search" target="o" title="Search furlongs per fortnight"> The href points to the Google search page with the search term following ?q= in quotes with the spaces replaced by +. The &btnG=Search part is a directive to the Google website to push the Search button. target="o" is the bit that makes it open in a new tab. title= doesn't really appear to do anything useful in this forum, or maybe Google overrides it, I'll check later.
This next bit prettifies the clickable text. It's pretty because of all of the <font color="#c41200"> manipulation. It's clickable because it lies between the opening tag for the hotlink and the closing </a> tag
It was a hot link that apparently went bad [ nasty words ].
A mod deleted the post
Disclaimer: Opinions posted on Free Republic are those of the individual posters and do not necessarily represent the opinion of Free Republic or its management. All materials posted herein are protected by copyright law and the exemption for fair use of copyrighted works.