Author Topic: BBCode, Images, and Embedding, oh my!  (Read 19811 times)

0 Members and 1 Guest are viewing this topic.

Offline wastrel

  • Great poster... or greatest poster?
  • Technical Administrator
  • Poster of Extraordinary Magnitude
  • *****
  • Posts: 13602
  • Science: A cold-hearted bitch with a 14" strap-on
BBCode, Images, and Embedding, oh my!
« on: January 06, 2009, 06:59:04 PM »
BBCode is pretty simple to use once you know the basics.

Each tag will proceed the text to effect enclosed in square brackets, and will immediate follow the text, with a "/" to end the tag.

The basic format for using a BBC tag is:
[tag]Item goes here[/tag] or [tag1=blah][tag2]Item goes here[/tag2][/tag1]

Where "Item goes here" would display the formatting or other property of the tag.


Formatting Text

Regular text can easily be formatted using the standard formatting tools.

To apply formatting to a text string, simply type out the text, highlight it, and click the appropriate formatting tool in the tool bar.

Alternatively, you can manually enter the text string to create the tag.

I'll list the codes for the most common formatting options.

Basic Formatting Tools:

Bold - [b]Bold[/b]
Italics - [i]Italics[/i]
Underline - [u]Underline[/u]
Strikeout - [s]Strikeout[/s]

Advanced Formatting Tools:

Glow - [glow=red,2]Glow[/glow] - This will cause the text to glow in the selected color.  This effect only works in the Internet Explorer browser. The first parameter is the color; both color name codes and RGB values can be used, according to the CSS2 specs. The second parameter specifies the strength, or the width of the effect in pixels. This is an inline tag and no block level tags can be placed inside, however other inline tags can be if nested correctly.

Shadow - [shadow=red,left]Shadow[/shadow] - This will cause the text to have a shadow.  This effect only works in the Internet Explorer browser.  The first parameter is the color of the shadow, the second is the direction in relation to the text the shadow will be cast.

Move - [move]Move[/move] - Will cause the text to scroll horizontally across the screen

Superscript - [sup]Superscript[/sup]

Subscript - [sub]Subscript[/sub]

Justification:
Left Alignment - [left]Left Alignment[/left]
Center Alignment - [center]Center Alignment[/center]
Right Alignment - [right]Right Alignment[/right]





Posting Images

Images can only be linked to off site.  DO NOT HOT LINK TO OTHER SITES.  Any picture you want to post should be uploaded to your personal web space, or to a imaging hosting service.

Two popular and free hosting sites are
Image Shack
Photobucket

Sign up for an account, upload any photos you want to post there, and copy/paste the URL into an image tag.  This should be a direct link to the image (it will end in an image extension .jpg, .png, .gif, etc)

[img]http://img91.imageshack.us/img91/2442/seriouscatjoker1jp7.jpg[/img]

Another handy feature is for posting images that are oversized.  No one want to scroll to see an entire image.  If you are posting a picture that is larger than 600 pixels either horizontally or vertically, do everyone a favor and add a width or a height tag to the image.  The image will be scaled to the size you specify.  You need only specify one parameter, the image will be scaled with no distortion:

[img width=600]http://art4linux.org/system/files/Longcat+War-1600x1200.jpg[/img]



Lists

Making bulleted lists can be very useful.  A simple list with bullets on each item is easy to make, just precede each list item with an asterisk tag:
[*]Item 1
[*]Item 2
[*]Item 3

This will create a solid bullet for each entry.



This was just a quick list of what I could think of for a tutorial.

If you want me to add any other tips, I will be happy to.
« Last Edit: July 19, 2009, 08:32:36 PM by ducky »

Offline pandamonium

  • Skeptical Beer Inspector
  • Planetary Skeptic
  • *
  • Posts: 26014
  • they/them
Re: BBCode, Images, and Embedding, oh my!
« Reply #1 on: January 06, 2009, 07:19:45 PM »
this is really handy, wastrel, especially for those of us who might be new to the whole interwebs thing.  i remember my first coupla weeks in the forum.  i was so intimidated by all the shiny buttons :-\

VOTE FOR STICKY!  'cause this is very useful and shouldn't die.
I am become destroyer of biology.

Offline stands2reason

  • Empiricist, Positivist, Militant Agnostic
  • Poster of Extraordinary Magnitude
  • **********
  • Posts: 10838
Re: BBCode, Images, and Embedding, oh my!
« Reply #2 on: January 06, 2009, 09:41:46 PM »
Now that we're on the subject... You're supposed to be able to use a BBcode image tag to put images on either the left or the right, and have text render around it. Like this:

________
|             | Text Text Text Text Text Text Text Text Text Text Text Text Text
| Image   |   Text Text Text Text Text Text Text Text Text Text Text
|             | Text Text
|____  __|

Which I tried to do in order to compress my signature. But, apparently doesn't have that feature. Or I wasn't using that image tag correctly. Would you know about this type of tag wastrel (or anyone else)?

Offline pandamonium

  • Skeptical Beer Inspector
  • Planetary Skeptic
  • *
  • Posts: 26014
  • they/them
Re: BBCode, Images, and Embedding, oh my!
« Reply #3 on: January 06, 2009, 10:15:55 PM »
Now that we're on the subject... You're supposed to be able to use a BBcode image tag to put images on either the left or the right, and have text render around it. Like this:

________
|             | Text Text Text Text Text Text Text Text Text Text Text Text Text
| Image   |   Text Text Text Text Text Text Text Text Text Text Text
|             | Text Text
|____  __|

Which I tried to do in order to compress my signature. But, apparently doesn't have that feature. Or I wasn't using that image tag correctly. Would you know about this type of tag wastrel (or anyone else)?

something like this?

i don't think it's supported on this forum, though.  my unguided tinkering has produced nothing...
I am become destroyer of biology.

Offline wastrel

  • Great poster... or greatest poster?
  • Technical Administrator
  • Poster of Extraordinary Magnitude
  • *****
  • Posts: 13602
  • Science: A cold-hearted bitch with a 14" strap-on
Re: BBCode, Images, and Embedding, oh my!
« Reply #4 on: January 06, 2009, 11:28:06 PM »
Would you know about this type of tag wastrel (or anyone else)?

You can use a table.

Use an overall table tag, with a td tag for each column.

[table][tr]
[td][img]http://www.nerdtests.com/images/badge/f0d6c15b188a962d.gif[/img][/td]
[td]"We demand rigidly defined areas of doubt and uncertainty!"
Beleth: "And God said, Let the count of photons be nonzero; and the count of photons became nonzero."
[url=http://skeptoid.com/episodes/4093]2012[/url]
[/td][/tr]
[/table]


"We demand rigidly defined areas of doubt and uncertainty!"
Beleth: "And God said, Let the count of photons be nonzero; and the count of photons became nonzero."
2012
« Last Edit: January 06, 2009, 11:34:26 PM by wastrel »

Offline Beleth

  • Administrator Emeritus
  • Reef Tank Owner
  • *********
  • Posts: 8087
Re: BBCode, Images, and Embedding, oh my!
« Reply #5 on: January 06, 2009, 11:36:57 PM »
You can even





with how





             in those columns
get really fancy





you format things





in the table.

I expect to pass through this world but once;
any good thing therefore that I can do, or any kindness that I can show to any fellow creature, let me do it now;
let me not defer or neglect it, for I shall not pass this way again.
-- Stephan Grellet

Offline KarenX

  • Too Much Spare Time
  • ********
  • Posts: 6226
  • A Simple Girl with an Evil Plan
    • More Women in Skepticism
Re: BBCode, Images, and Embedding, oh my!
« Reply #6 on: January 07, 2009, 01:18:39 AM »
Why can't we link to pictures at other sites? Most of the URL images I post are just from their original places.

Offline Beleth

  • Administrator Emeritus
  • Reef Tank Owner
  • *********
  • Posts: 8087
Re: BBCode, Images, and Embedding, oh my!
« Reply #7 on: January 07, 2009, 01:56:11 AM »
Why can't we link to pictures at other sites? Most of the URL images I post are just from their original places.

You can, if you want.  But the technical term for doing so is "hotlinking" and it's considered rude, because it uses up other sites' bandwidth without giving them any extra real traffic.

Besides, the site owners can then come along later and change the picture to something you really don't want to see... which has happened in Explicit at least once.  Yecch.
I expect to pass through this world but once;
any good thing therefore that I can do, or any kindness that I can show to any fellow creature, let me do it now;
let me not defer or neglect it, for I shall not pass this way again.
-- Stephan Grellet

Offline KarenX

  • Too Much Spare Time
  • ********
  • Posts: 6226
  • A Simple Girl with an Evil Plan
    • More Women in Skepticism
Re: BBCode, Images, and Embedding, oh my!
« Reply #8 on: January 07, 2009, 02:05:59 AM »
I did not know that.

Offline wastrel

  • Great poster... or greatest poster?
  • Technical Administrator
  • Poster of Extraordinary Magnitude
  • *****
  • Posts: 13602
  • Science: A cold-hearted bitch with a 14" strap-on
Re: BBCode, Images, and Embedding, oh my!
« Reply #9 on: January 07, 2009, 10:33:48 AM »
If you use Firefox, install the ImageShack toolbar add on.

This will re-host any image on the web to your imageshack account so you don't need to hotlink.
« Last Edit: January 14, 2009, 10:47:06 PM by wastrel »

Offline wastrel

  • Great poster... or greatest poster?
  • Technical Administrator
  • Poster of Extraordinary Magnitude
  • *****
  • Posts: 13602
  • Science: A cold-hearted bitch with a 14" strap-on
Re: BBCode, Images, and Embedding, oh my!
« Reply #10 on: January 08, 2009, 11:09:19 AM »
Instructions for posting HD YouTube videos.

I'll add to the OP as well.

I grabbed a body armor vid off youtube for another thread, and a bit more youtube meandering lead me to this vid.  Pretty amazing stuff.

http://www.youtube.com/v/EV0pN-LaW6E&hl=en&fs=1

P.S.
Anyone know how to imbed in High Def?

To embed a HD quality YouTube video with high definition resolution on external website or blog, simply add or append &ap=%2526fmt%3D22 code (instead of &ap=%2526fmt%3D18 to display just higher quality 480×360 video clip) to the end of movie parameter value and embed source in the YouTube embed code. For example, we take a look at original embed code for “Where the Hell is Matt? (2008)” YouTube hosted video clip that available in HD format.

Setting the size to 480,360 and adding &ap=%2526fmt%3D18:

Code: [Select]
[flash=480,360]http://www.youtube.com/v/EV0pN-LaW6E&hl=en&fs=1&ap=%2526fmt%3D18[/flash]
http://www.youtube.com/v/EV0pN-LaW6E&hl=en&fs=1&ap=%2526fmt%3D18

Setting the size to 1280,720 and adding &ap=%2526fmt%3D22 was a real mess and your video didn't support it. So I halved the numbers to 640,360 and used the example dancing man video.

Code: [Select]
[flash=640,360]http://www.youtube.com/v/zlfKdbWwruY&hl=en&fs=1&ap=%2526fmt%3D22[/flash]
http://www.youtube.com/v/zlfKdbWwruY&hl=en&fs=1&ap=%2526fmt%3D22


Offline stands2reason

  • Empiricist, Positivist, Militant Agnostic
  • Poster of Extraordinary Magnitude
  • **********
  • Posts: 10838
Re: BBCode, Images, and Embedding, oh my!
« Reply #11 on: January 08, 2009, 01:18:21 PM »
Thanks for the help wastrel.

Offline wastrel

  • Great poster... or greatest poster?
  • Technical Administrator
  • Poster of Extraordinary Magnitude
  • *****
  • Posts: 13602
  • Science: A cold-hearted bitch with a 14" strap-on
Re: BBCode, Images, and Embedding, oh my!
« Reply #12 on: January 08, 2009, 02:50:47 PM »
Thanks for the help wastrel.

;)

I have been meaning to post this for forever, I'm just hoping it will be useful.
« Last Edit: January 08, 2009, 02:52:37 PM by wastrel »

Offline DK

  • Dave, my mind is going.
  • Too Much Spare Time
  • ********
  • Posts: 7748
    • My Blog: Self-Indulgent Navel Gazing
Re: BBCode, Images, and Embedding, oh my!
« Reply #13 on: January 08, 2009, 02:58:40 PM »
It will, don't worry. Everytime someone asks how to embed a vid, I'll be pointing them here.

Nice job!

Offline wastrel

  • Great poster... or greatest poster?
  • Technical Administrator
  • Poster of Extraordinary Magnitude
  • *****
  • Posts: 13602
  • Science: A cold-hearted bitch with a 14" strap-on
Re: BBCode, Images, and Embedding, oh my!
« Reply #14 on: January 14, 2009, 10:45:26 PM »
Bump because I put effort into it.

 

personate-rain