HOW TO: Embed photos in FHF posts

[KingCam]

There are a lot of people on this forum who are confused about how to embed images that are hosted elsewhere (photobucket, etc), so I thought I would type up a simple guide. Note that in this walkthrough "URL" "Public Link" "Link" and "Image Address" all refer to the same thing.

|||-------------------------------------------------------------------------------------------------------------------------------------------------------------------------->>>

STEP 1) Upload your image to the internet
Choose your favorite file hosting website. Most people use PhotoBucket. I personally use my own web server or DropBox to host my photos online.

|||-------------------------------------------------------------------------------------------------------------------------------------------------------------------------->>>

STEP 2) Copying Public Image Address
Once you have uploaded your photo to the internet you will need to locate a public link. Some websites make this very easy to find, others can be more difficult. The best way to ensure you are copying a public link varies depending on your internet browser or operating system.

NOTE: We are NOT looking for the HTML Embed source code. We are simply looking for a URL similar to this: http://www.cpeebs.com/files/FHF/2011-04-30/34.jpg

For Firefox right-click the photo and select "Copy Image Location"
For Google Chrome right-click the photo and select "Copy image URL"
For Internet explorer right-click the photo and select "Properties" A new little window should pop up containing the "Address (URL)" Use your cursor to start highlighting the URL starting with "http://" Now either right-click and "Copy" or press [ctrl]+[c] on your keyboard.

Obviously I can't test every browser with every operating system, but most of them should have similar functions for copying the image address.

Now that you have the image URL copied to your clipboard you will need to do a test to make sure you copied a public link and not a private link.
Log out of whatever image hosting website you're using. Are you logged out?? Are you sure? Okay, now paste the link you have copied to your clipboard into the address bar on your browser. Hit the [Enter] key. Did you image appear? The ONLY thing you should see is a plain white page with NOTHING but your image on it. See example:


If your browser took you to a login prompt or a website with text, menus, or anything other than just your image you did something wrong. Does your link end with one of the following? .jpg .png .gif .bmp If not, you may have copied the wrong link. Try again!

|||-------------------------------------------------------------------------------------------------------------------------------------------------------------------------->>>

STEP 3) Embedding Your Image in a FHF Post
Once you've copied and verified the public link to your image, it's time to post it on FHF!! You can do this whether you're starting a new topic or posting a reply on an existing topic.

In the "Message body:" editor right-click and "Paste" (or [ctrl]+[v] on your keyboard). That should paste the public link to your image that we copied to the clipboard in Step 2. Now highlight the whole address you just pasted. See the "Subject:" line? Directly below that "Subject:" line there are some formatting buttons. Locate the one that says "Img" and click it (the image address must be highlighted when you click the Img button for this to work). Your image should now have two Img tags, one before it and one after it. There should not be any spaces between the Img tags and your URL. The first tag (the one to the left of your URL) should look like this:

See example:


If your link & Img tags don't look like the one in the example you can manually edit them with your keyboard.

|||-------------------------------------------------------------------------------------------------------------------------------------------------------------------------->>>

STEPS 2 & 3 SIMPLIFIED BY spinifer:

Since you reference Photobucket, you might note that Photobucket greatly simplifies step 2 and step 3 by providing an IMG code. After you have uploaded and saved your image, you mouse over the photo, and 4 references will appear. All you have to do it left click on the "IMG code" reference and it is automatically copied. Then right click and "paste" it into the message body on FHF. Done.

Thank you for that tip, spinifer!

|||-------------------------------------------------------------------------------------------------------------------------------------------------------------------------->>>

STEP 4) Preview and Submit!
Now just type the rest of your post, and click the "Preview" button below the editor. Is your image showing up the way it should?? If so, click "Submit" if not you either copied the wrong link or there is something wrong with your Img tags. Go back and check your work.

NOTE
Try not to post huge images that take forever to load on slower connections. As a rule I always scale my images down to 900 pixels wide or less before uploading them to the internet.

|||-------------------------------------------------------------------------------------------------------------------------------------------------------------------------->>>

Hope that helps some of you!!
- Cam

[MontyNajar]

Thanks for the tips. I've got it down now.

[Tim Borski]

Thanks Cam, and apologies for assuming you'd come to MontyNajar's rescue! (I was curious to see the Garter bite too.)

Also: I agree with the others; this should be a sticky.

Tim

[chrish]

STEP 5 - Make sure your image URLs work or people will get little red Xs.

We need to recreate the old FAQ we had about this on the old iteration of the FHF.

[sonorandesertman]

Hey KingCam. I believe you might have done this partly because of me. Thank you so much. I am now going to attempt to put just one pic of the green snake I saw, held and then let go. If it works, and when I have more time then I'll start trying to post more pics. Thanks a lot my on line friendly person. Sincerely, sdm.

[KingCam]

Thanks for the tips. I've got it down now.

Excellent You're very welcome

Thanks Cam, and apologies for assuming you'd come to MontyNajar's rescue! (I was curious to see the Garter bite too.)

Also: I agree with the others; this should be a sticky.

Tim

No apology necessary! I'm all about offering tech support to friendly people

STEP 5 - Make sure your image URLs work or people will get little red Xs.

We need to recreate the old FAQ we had about this on the old iteration of the FHF.

no kidding! On a real note, if anyone has anything they think should be changed or added, just say so! I'd like to make this guide as easy to understand as possible, and I typed it up in a bit of a hurry. Constructive criticism is well received with me, I won't take offense.

Hey KingCam. I believe you might have done this partly because of me. Thank you so much. I am now going to attempt to put just one pic of the green snake I saw, held and then let go. If it works, and when I have more time then I'll start trying to post more pics. Thanks a lot my on line friendly person. Sincerely, sdm.

I can't remember who I actually typed this up for, it may well have been you. Either way, you're quite welcome and I hope it helped!

[spinifer]

Cam, I have this post bookmarked so I can quickly direct people to it. Thanks for putting it together.

Since you reference Photobucket, you might note that Photobucket greatly simplifies step 2 and step 3 by providing an IMG code. After you have uploaded and saved your image, you mouse over the photo, and 4 references will appear. All you have to do it left click on the "IMG code" reference and it is automatically copied. Then right click and "paste" it into the message body on FHF. Done.

I do not know if this option is available at other sites.

[KingCam]

Cam, I have this post bookmarked so I can quickly direct people to it. Thanks for putting it together.

Since you reference Photobucket, you might note that Photobucket greatly simplifies step 2 and step 3 by providing an IMG code. After you have uploaded and saved your image, you mouse over the photo, and 4 references will appear. All you have to do it left click on the "IMG code" reference and it is automatically copied. Then right click and "paste" it into the message body on FHF. Done.

I do not know if this option is available at other sites.

Great tip, thanks for that. I added it to the above guide just before step 4!