Welcome to Gaia! ::

~Secret Art Society~

Back to Guilds

Artists all over the world gather to learn, teach tips and tricks, and to become a new or better Artist! 

Tags: how to, sketch, draw, games, contests 

Reply Tutorials
A Guide to IMG & URL coding~

Quick Reply

Enter both words below, separated by a space:

Can't read the text? Click here

Submit

Did this help?
  Yes, thank you. :3
  No, I still don't get it. D:
  I already know this stuff. |D
View Results

Lost Melfanian

Voidling Shapeshifter

PostPosted: Wed Jun 17, 2009 1:22 am


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::
User Image


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::
User Image


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.
PostPosted: Wed Jun 17, 2009 1:23 am



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!
User Image 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!
User Image 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!
User Image
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!

User ImageUser Image 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

Lost Melfanian

Voidling Shapeshifter


onigiri kuri
Crew

PostPosted: Wed Jun 17, 2009 2:25 am




Thank you for posting this tutorial!


PostPosted: Wed Jun 17, 2009 11:18 am


We interrupt this program to bring you... Lord Mel!
User Image
Not a problem. 3nodding
Now back to our show...

Lost Melfanian

Voidling Shapeshifter


The Shining Capella
Vice Captain

PostPosted: Wed Jun 17, 2009 11:51 am


Wheee! Thank you ♥
PostPosted: Wed Jun 17, 2009 12:15 pm



i'm sticking this razz very helpful

iSpyX3
Captain


Lost Melfanian

Voidling Shapeshifter

PostPosted: Wed Jun 17, 2009 1:10 pm


I'm glad it helps. 3nodding
PostPosted: Fri Jan 08, 2010 5:43 pm


User Image here my avatar in art form biggrin

jacob jh

Reply
Tutorials

 
Manage Your Items
Other Stuff
Get GCash
Offers
Get Items
More Items
Where Everyone Hangs Out
Other Community Areas
Virtual Spaces
Fun Stuff
Gaia's Games
Mini-Games
Play with GCash
Play with Platinum