Facebook
Twitter
Youtube
Vimeo
For those who hate to read, watch the video.
If you've already uploaded images to the gallery, and want to put them in a post, skip to Step 2.
First, your image must live somewhere that is internet accessible, like in our photo gallery. You must be able to get to it with a Uniform Resource Locator (URL, also commonly called a "web address"), which is always preceded by "http://" and looks like this:
- Code: Select all
http://www.backcountrypilot.org/somefile
A local path on your personal computer will not work, i.e. C:\My Documents\photos\. A local path is different from a URL in that it only works to locate a file on your personal computer. People on the internet cannot use it to access a file.
Here is the solution:
Step 1 Upload your image to the gallery on this website. See this tutorial.Create a user gallery if you do not already have one, or you can put the image in the general categories, though I will have to approve the image first(not for user galleries though.) This usually happens as soon as I check my email. I really suggest taking advantage of your user gallery though, instead of the general categories. It makes it easy to link to your personal photo collection with one URL. When uploading and you get to the page to place your photo in a gallery, your user galleries have a * next to them.
Step 2) Navigate to your image in the image gallery, to the page with the filmstrip thumbnail thing at the bottom. The page looks like this.
When you upload photos, you upload a large, fairly high res version. Upon upload the system resizes the photo into 2 smaller sizes: Normal and Thumbnail. The medium size image is the one you see in the gallery and is good for embedding in posts. The large size is too big and takes forever to load for people on dial-up (but good for wallpapers), and the thumbnail is just too small.
Step 3) We're going to copy the image's URL onto the clipboard (so we can paste it) from the image page. How to do this depends on what browser you use.
- Mozilla Firefox, Chrome, and Safari: Right mouse click on the medium-size image, and select Copy Image Location or Copy Image URL.
- Internet Explorer: Right mouse click on the image, select Properties, then highlight and Copy the Address(URL) of the image. IE v7 may be different, I'm not sure.
Remember that an image URL references an image file, i.e ending in extention ".gif" or ".jpg". It will not end with ".php" or ".html", which are page URLs. Close the Properties dialog, since now the URL is copied to the clipboard.
Step 4) The image URL is now in memory on the clipboard. Time to paste it into your message. While in the "New Topic" or "Edit Post" mode, place your cursor in the post where you want to insert your photo and click the Img button ONCE, then Paste (Edit->Paste OR CTRL+V) the URL between these img tags.
Alternatively, you can just paste the image URL in, highlight it with the mouse, and click the Img button ONCE. Whatever was highlighted will be "inside" the Img tags. This works for all the bbcode buttons on the editor page.
In the editor window it should look like:
- Code: Select all
[img]http://www.backcountrypilot.org/gallery/albums/userpics/10003/normal_sandy6.jpg[/img]
When you submit your message, the image will show up in it. Please do not insert too large of an image in your posts, since it slows the loading of the thread down for dialup users. The Intermediate size should be fine.
Now that we've covered the fundamentals, here's an even quicker and easier way to generate the code:
Automatic BBcode for image Embed
Now for some advanced stuff:
Let's insert an image that, when clicked on, opens the large size image.
Similar steps to above-- In the editor we're going to have our embedded image:
- Code: Select all
[img]http://www.backcountrypilot.org/gallery/albums/userpics/10003/normal_sandy6.jpg[/img]
But let's modify it to be a hot link. We're going to "wrap" the URL bbcode tags "around" it. First, I am going to open up the large image I want to reference, then repeat step 1 from above, right mouse click, and copy the image URL of my desired hot link destination image. I then paste it into the URL tag like this:
- Code: Select all
[url=http://www.backcountrypilot.org/gallery/albums/userpics/10003/sandy6.jpg]
[img]http://www.backcountrypilot.org/gallery/albums/userpics/10003/normal_sandy6.jpg[/img]
[/url]
Remember to close all the bbcode tags with the forward slash closing tag of the same name, ie: [/img] closed the [img] tag. Here's a template you can paste into your post. Just substitute the urls:
- Code: Select all
[url=DESTINATION URL][img]IMAGE URL[/img][/url]
BUT, how does one provide a link to a Youtube video, that has it all ready to go? That is, the opening scene is right there, you don't get sent to the the Youtube site. That clear enough?!
