A Guide to IMG & URL coding~

[Lost Melfanian]

Mel says

I saw in the main forum that some people don't know the BBCode for images and links and decided I'd try to help out a bit...

This is a BBCode guide for displaying pictures in your posts, and/or linking pictures to other online locations.

It may not be helpful for how to improve your art style, but it is a tutorial. And I hope it helps.
If it doesn't, please ask questions so I (or anyone else that knows this stuff) can try to answer it in a way that is easier to understand.


~L.M.

Image code looks like this::

[img]X[/img]

If you want to display an image in your post, the image url (i.e. the link to your picture) (( http://whateveryourimagelinkis.com/org/gov/net/etc. <-- fake link, btw.)) goes between the bracketed coding (where that 'X' is).
Like this::

[IMG]http://i18.photobucket.com/albums/b150/lost_melfanian/PVb.jpg[/IMG]

And it will show up like this::



If you want to link the image to a page elsewhere on the internet, like maybe a quest thread or some such, add url coding around the image coding.

url code looks like this::

[url=]x[/url]

The page you want to link to goes after the '=' inside the first bracketing.
Whatever is between the bracketed coding (in this case, the 'x') is what you click to go to the linked page.

So it looks like this::

[url=http://www.gaiaonline.com] X [/url]

And pressing that 'x' would send one to Gaia's home page.


To link a picture, insert the image code inside the url code. Like this::

[url=www.gaiaonline.com][img]http://i18.photobucket.com/albums/b150/lost_melfanian/PVb.jpg[/img][/url]

This will look like this::



To link words, put the words you'd like linked between the url code instead::

[url=www.gaiaonline.com]Gaia rocks~![/url]

This will look like this::
Gaia rocks~!



I hope this has helped someone.
n .n;
The next post will show examples for 'imgleft' and 'imgright' codes.
 

[Lost Melfanian]

You can use the Gaia provided "Imgleft" and "Imgright" code buttons for showing your images. They ask for the image's url in a pop-up window and then do the work for you. 3nodding

If you don't want to fill in the pop-up boxes all the time, or have your pop-up's turned off and don't want to constantly make exceptions for them, or have already pasted a regular image link and just want to adjust it, you just need to remember the code looks like this:

For showing your images to the right::

[imgright]x[/imgright]

And for showing your images to the left::

[imgleft]x[/imgleft]

The regular image code will automatically paste your image wherever you've put it, but will not allow any sort of word wrapping in the blank space around it.

'imgleft' and 'imgright' images will allow your typed words to show up after it (or before it, in the case of the 'imgright' images) and have them wrap up all that empty space on the side.

To best use it, insert your image FIRST in the post you want to display it in. The words you type go where they're supposed to only if you type them after the image you've posted.

So...
In code, whatever you're writing should look something similar to this::


imgleft::

[imgleft]http://s18.photobucket.com/albums/b150/lost_melfanian/?action=view¤t=PVb.jpg[/imgleft] This. Is. Where. The. Writing. Goes. :D
Just keep writing until you're done.
That's right. Don't stop writing.
Writing makes the word wrap 'round!
*brick'd*
:sweat:

And once posted, it will look like this::

Example!

This. Is. Where. The. Writing. Goes. biggrin
Just keep writing until you're done.
That's right. Don't stop writing.
Writing makes the word wrap 'round!
*brick'd*
sweatdrop

For imgright--same example, different code::

[imgright]http://s18.photobucket.com/albums/b150/lost_melfanian/?action=view¤t=PVb.jpg[/imgright] This. Is. Where. The. Writing. Goes. :D
Just keep writing until you're done.
That's right. Don't stop writing.
Writing makes the word wrap 'round!
*brick'd*
:sweat:

And again, once posted::

Example!

This. Is. Where. The. Writing. Goes. biggrin
Just keep writing until you're done.
That's right. Don't stop writing.
Writing makes the word wrap 'round!
*brick'd*
sweatdrop

You can still get fancy with font size, color, and alignment after inserting your image, by the way. 3nodding

Example!

This. Is. Where. The. Writing. Goes. biggrin
Just keep writing until you're done.
That's right. Don't stop writing.
Writing makes the word wrap 'round!
*brick'd*
sweatdrop

It is also possible to post a picture on the left AND right in the same post. 3nodding
O'course, if the pictures are not the same size, your words will probably wrap funny, but it can be done. 3nodding

Like this::

[imgleft]http://i18.photobucket.com/albums/b150/lost_melfanian/PVb.jpg[/imgleft][imgright]http://i18.photobucket.com/albums/b150/lost_melfanian/PVb.jpg[/imgright] This. Is. Where. The. Writing. Goes. :D
Just keep writing until you're done.
That's right. Don't stop writing.
Writing makes the word wrap 'round!
*brick'd*
:sweat:

Example!

This. Is. Where. The. Writing. Goes. biggrin
Just keep writing until you're done.
That's right. Don't stop writing.
Writing makes the word wrap 'round!
*brick'd*
sweatdrop

I can't think of anything else to work with here. < <
Practice formatting your posts~!

You can use this thread to test it if you like. 3nodding
Remember, if you have ANY questions, please ask.

I hope this has helped and wasn't too hard to understand. sweatdrop  

[onigiri kuri]

Thank you for posting this tutorial!

 

[Lost Melfanian]

We interrupt this program to bring you... Lord Mel!

Not a problem. 3nodding

Now back to our show...

 

[The Shining Capella]

Wheee! Thank you ♥  

[iSpyX3]

i'm sticking this razz very helpful  

[Lost Melfanian]

I'm glad it helps. 3nodding
 

[jacob jh]

here my avatar in art form biggrin