Free Republic
Browse · Search
General/Chat
Topics · Post Article

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.


TOPICS: Miscellaneous
KEYWORDS: jpeg; photo
How does one imbed a photo in a reply or a thread?

Thank you.

1 posted on 09/02/2008 6:25:35 PM PDT by ProudFossil
[ Post Reply | Private Reply | View Replies]

To: ProudFossil

Rather than give you a fish.....

I’ll show you how to fish.

http://www.freerepublic.com/focus/f-news/1011945/posts

;-)


2 posted on 09/02/2008 6:28:05 PM PDT by ButThreeLeftsDo
[ Post Reply | Private Reply | To 1 | View Replies]

To: ProudFossil
First of all, it has to be an *online* photo, in other words on a website somewhere.

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.

3 posted on 09/02/2008 6:28:39 PM PDT by Yanni.Znaio (This tagline is political. The FEC is trying to make me remove it.)
[ Post Reply | Private Reply | To 1 | View Replies]

To: ProudFossil

copy the link or url to the photo and paste this at the end

/IMG>

and this at the beginning

<img src=


4 posted on 09/02/2008 6:28:49 PM PDT by edzo4 (Vote McCain, Keep Your Change)
[ Post Reply | Private Reply | To 1 | View Replies]

To: ProudFossil
<img src="URL of picture file">
5 posted on 09/02/2008 6:29:20 PM PDT by NewJerseyJoe (Rat mantra: "Facts are meaningless! You can use facts to prove anything that's even remotely true!")
[ Post Reply | Private Reply | To 1 | View Replies]

To: ProudFossil

img src=”URL”

Put the URL of the photo where is says URL.

Keep the quotes and add < and > at the two end of the line.


6 posted on 09/02/2008 6:29:48 PM PDT by Nonperson
[ Post Reply | Private Reply | To 1 | View Replies]

To: ProudFossil
Nully's Quick FR HTML Guide:

Basic formatting:

Line break <br>
Paragraph break <p>
<blockquote>

Indented paragraph
</blockquote>
<u> underline </u>
<i> italics </i>
<b> bold </b>
<font color=red> Red font </font>
<blink> blink </blink> Use blink sparingly. People HATE blink

<font size=1>Smallest FR fon</font> Displays as:
Smallest FR font

<font size=7>Largest FR font<font> Displays as:
Largest FR font

Or

Step font size up or down with <big>bigger</big>

and <small>smaller</small>

"Hidden" text: <font color=white> White font </font>
Drag cursor over blank area to highlight to read...

Posting a link:

General:
<a href=[web address]>[title]< /a>
Example:
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:

General:
<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

Example:
This: <img src="http://www.notablebiographies.com/images/uewb_09_img0611.jpg">

Posts this:

Tip: control the size with "height=nnn" like so:

This: <img height= 200 src="http://www.notablebiographies.com/images/uewb_09_img0611.jpg">
Posts this:

While This: <img height= 100 src="http://www.notablebiographies.com/images/uewb_09_img0611.jpg">
Posts this:

Thanks to BykrBayb for a tip on using < instead of showing < with a space that needed to be removed and the blockquote command...

7 posted on 09/02/2008 6:31:07 PM PDT by null and void (Sarah Palin might be more conservative than even John McCain ~ Megyn Kelly, Fox News 9/2/08)
[ Post Reply | Private Reply | To 1 | View Replies]

To: ButThreeLeftsDo

bookmarked for dinosaur :)
thank you


8 posted on 09/02/2008 6:34:25 PM PDT by machogirl
[ Post Reply | Private Reply | To 2 | View Replies]

To: ProudFossil
Wow you are a fossil. All this time without learning to post a pic. Oh what fun you'll have when you can do this.

Image Hosted by ImageShack.us

MAN DOWN!!!!
9 posted on 09/02/2008 6:35:34 PM PDT by cripplecreek (Voting Conservative isn't for the faint of heart.)
[ Post Reply | Private Reply | To 1 | View Replies]

To: ProudFossil

I use photobucket.com for my photos.


10 posted on 09/02/2008 6:35:38 PM PDT by ThomasThomas (Real changes actually change something.)
[ Post Reply | Private Reply | To 1 | View Replies]

To: ProudFossil

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!


11 posted on 09/02/2008 6:36:41 PM PDT by Revolting cat! (Are you ready to pray for Teddy?)
[ Post Reply | Private Reply | To 1 | View Replies]

To: ProudFossil

bump to save


12 posted on 09/02/2008 6:39:23 PM PDT by Bob Eimiller (appeasement "it's the idea that if you feed the alligator he will eat you last." Winston Churchill)
[ Post Reply | Private Reply | To 1 | View Replies]

To: Revolting cat!

I never log out and I have no problem posting images.


13 posted on 09/02/2008 6:41:30 PM PDT by webrover
[ Post Reply | Private Reply | To 11 | View Replies]

To: ProudFossil

Thank you for the question. It was a big help to me, too!


14 posted on 09/02/2008 6:42:16 PM PDT by srmorton (Choose life!)
[ Post Reply | Private Reply | To 1 | View Replies]

bump


15 posted on 09/02/2008 6:46:30 PM PDT by foreverfree
[ Post Reply | Private Reply | To 1 | View Replies]

To: cripplecreek

Yeah, I go clear back to CPM days.


16 posted on 09/02/2008 6:55:49 PM PDT by ProudFossil
[ Post Reply | Private Reply | To 9 | View Replies]

To: ProudFossil

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.
Good luck!


17 posted on 09/02/2008 6:55:51 PM PDT by bamahead (Few men desire liberty; most men wish only for a just master. -- Sallust)
[ Post Reply | Private Reply | To 1 | View Replies]

To: ProudFossil
Here's one just for fun!!..Photobucket
18 posted on 09/02/2008 7:02:47 PM PDT by GitmoSailor (AZ Cold War Veteran==Keep FR free donate today==N0BAMA==FairnessDoctrine on FR????)
[ Post Reply | Private Reply | To 1 | View Replies]

To: ProudFossil; aculeus; dighton; Petronski; Ezekiel; Constitution Day; Tijeras_Slim

Let me know what you find out.

19 posted on 09/02/2008 7:04:55 PM PDT by martin_fierro (< |:)~)
[ Post Reply | Private Reply | To 1 | View Replies]

To: bamahead

20 posted on 09/02/2008 7:07:09 PM PDT by bigcat32
[ Post Reply | Private Reply | To 17 | View Replies]

To: ProudFossil
Photobucket

Here's a screenshot of a photobucket album pic. I usually just copy the 'HTML Code' link (3rd down) and paste that link directly to the FR posting window.

Easy!
21 posted on 09/02/2008 7:09:33 PM PDT by bamahead (Few men desire liberty; most men wish only for a just master. -- Sallust)
[ Post Reply | Private Reply | To 17 | View Replies]

To: martin_fierro; ProudFossil; dighton; Petronski; Ezekiel; Constitution Day; Tijeras_Slim

Is not difficult for some people.

22 posted on 09/02/2008 7:11:45 PM PDT by aculeus
[ Post Reply | Private Reply | To 19 | View Replies]

To: bamahead
Here it is Photobucket
23 posted on 09/02/2008 7:13:04 PM PDT by ProudFossil
[ Post Reply | Private Reply | To 17 | View Replies]

To: ProudFossil

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...

Mike


24 posted on 09/02/2008 7:19:41 PM PDT by ProudFossil
[ Post Reply | Private Reply | To 1 | View Replies]

To: ProudFossil

Good work soldier!


25 posted on 09/02/2008 7:20:58 PM PDT by bamahead (Few men desire liberty; most men wish only for a just master. -- Sallust)
[ Post Reply | Private Reply | To 23 | View Replies]

Comment #26 Removed by Moderator

To: ProudFossil

27 posted on 09/02/2008 9:23:29 PM PDT by JRios1968 (Never kick a leftist when they are down. Wait until they are halfway back up. You get more leverage!)
[ Post Reply | Private Reply | To 1 | View Replies]

To: cripplecreek

Is that Sponogebob? It looks like he took The Captain’s advice and dropped on the deck and flopped like a fish.


28 posted on 09/02/2008 11:18:32 PM PDT by lesser_satan (Satire today, headlines tomorrow...)
[ Post Reply | Private Reply | To 9 | View Replies]

Smaller.

< img src=”...jpg” width=”400” height=”357”>


29 posted on 12/11/2008 3:35:58 PM PST by george76 (Ward Churchill : Fake Indian, Fake Scholarship, and Fake Art)
[ Post Reply | Private Reply | To 28 | View Replies]

To: WSGilcrest; MaryFromMichigan; Admin Moderator

MaryFromMichigan recommend alerting the mods on this


30 posted on 02/08/2012 9:37:29 AM PST by george76 (Ward Churchill : Fake Indian, Fake Scholarship, and Fake Art)
[ Post Reply | Private Reply | To 26 | View Replies]

To: george76

Did I do something wrong? I didn’t see the deleted post.


31 posted on 02/08/2012 5:33:20 PM PST by WSGilcrest (/s)
[ Post Reply | Private Reply | To 30 | View Replies]

To: ProudFossil
It's what I've got on this...

HTML Paragraphs & Whitespace Characters Fonts Images Hot Links

HTML in general: top

HTML is an acronym for HyperText Markup Language. It was born out of a need to format the presentation of text, images and data on screens of various and arbitrary sizes. A page of raw HTML can be thought of as having two types of information, text and formatting. Formatting appears between two angle brackets <formatting> and never literally appears on the rendered page. Formatting is used to control the appearance and placement of text and other objects on the page. Anything that isn't formatting is text and is on the page. Formatting can contain images, which also appear on the page and Hot Links which are clickable text pointing to other pages.

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.

Paragraphs & White-space: top

HTML eats excess white-space. If you type two or more spaces in a row between words HTML will reduce all of the spaces and tabs to a single space or tab. Carriage returns (the Enter key) won't do you any good either. Without special care it is easy to end up with a wall of unreadable text. It's quite cruel. If you want white-space beyond a single space you need to insert it explicitly by typing <br> or <p> for a CRLF and a paragraph, respectively.

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 like
the example text
the 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.
Preformatted, 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.

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:
<ul>
  <li>Coffee</li>
  <li type="circle">Tea</li>
  <li type="square">Milk</li>
</ul>

which yields:

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.

Characters: top

Quick things you can do with characters are bold and italic. You get bold with <b> bold stuff </b> which looks like bold stuff. Italic works the same way with a different letter: <i> italic stuff </i> gets you italic stuff. Other things you can do are <del> delete stuff </del> 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, &nbsp; 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.

Fonts: top

Fonts are deprecated since HTML 4.01 (the standards boffins are working on 5.0 now) CSS (Cascading Style Sheets) is the current preferred method for coloring and shaping text in HTML. Because of the way the forum software works CSS style formatting gets eaten and discarded so Fonts must be used here to manipulate text.

<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.

Images: top

<img src="http://upload.wikimedia.org/wikipedia/en/a/a3/Bobdobbs.png"> gets you:

<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? Kittie doing its nails. 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.

Hot Links: top

<a href="http://mumble.com/index.html"> Hot Text </a> Here, mumble.com points to the page you want to link, Hot Text is the stuff you want to be clickable.

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:

G o o g l e

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.

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

That's all folks! top

32 posted on 02/08/2012 5:38:44 PM PST by Mycroft Holmes (Returned for regrooving...)
[ Post Reply | Private Reply | To 1 | View Replies]

To: WSGilcrest
Back to the original poster...

Be careful not to post pictures of the dreaded red x!
They seem to be everywhere!


33 posted on 02/08/2012 5:39:19 PM PST by WSGilcrest (/s)
[ Post Reply | Private Reply | To 31 | View Replies]

To: null and void

Thanks!


34 posted on 02/08/2012 5:47:01 PM PST by GreenHornet
[ Post Reply | Private Reply | To 7 | View Replies]

To: WSGilcrest

It was a hot link that apparently went bad [ nasty words ].

A mod deleted the post


35 posted on 02/08/2012 6:12:08 PM PST by george76 (Ward Churchill : Fake Indian, Fake Scholarship, and Fake Art)
[ Post Reply | Private Reply | To 31 | View Replies]

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.

Free Republic
Browse · Search
General/Chat
Topics · Post Article

FreeRepublic, LLC, PO BOX 9771, FRESNO, CA 93794
FreeRepublic.com is powered by software copyright 2000-2008 John Robinson