Difference between revisions of "Help:Images"

Latest revision as of 12:09, 8 December 2012

Uploading an image

To upload an image to the Twinsuniverse, you must first be logged in to your account. If you don't yet have an account, don't hesitate to create one for free and benefit all extra abilities.

After you are logged in, click on the Upload file link which appears in the toolbox menu to the left of each page (if you are using the default layout). This will take you to the Special:Upload page. You will see the following form:

First of all, click on the Browse... button, and locate the image you wish to upload. If you wish to save the file under a different name than used on your computer, Enter the new name in the "Save as" field. After doing so, in the Summary box, write a short summary of what the image is about, eg. "A picture of Twinsen and Zoé". Any Wiki tags are available here, like links, bold text, etc. To finish, click on the "Upload file" button.

Note that if your image file name contains spaces, you will get a message saying the spaces will be converted to underscores (_). Click Save file to accept that, or Re-upload to go back to the upload page.

Your image is now uploaded on the server, waiting to be added to the articles.

Adding an image to an article

After you uploaded your image to the server, go to the article you wish to add it to, and enter its Edit page. Note that you can't use external images in the articles- only images uploaded on the server. To add the image, position your cursor where you want the image added. Then, you can either click on the File:Button image.png button, or write the command manually.

If you click on the button, the following line of text will be inserted to the article:

[[Image:Example.jpg]]

Replace "Example.jpg" with your image's file name (spaces automatically translate to underscores), and your image will be inserted in the article. You may now click on Show preview, to see what it looks like.

But before you hurry saving the page, please also note that there are some image attributes available, to make the image look better on the article. To separate the attributes, use the | sign.

Alignment

You can specify whether the image will be aligned to the left, right or center of the paragraph, or even not at all. To do so, add either "left", "right", "center" or "none" as an attribute. Example:

[[Image:Twinsen.jpg|right]]

example paragraph: I've got to tell you something. It's awful! My best friend (Beatrice) is in love with Steven. But Paul, Steven's half brother, left Cindy when Linda got out of the clinic after her bobsleigh accident. But not for Linda, for Tatjana! Only Serge (who secretly admires Steven) has been trying for months to win the love of Tatjana who refuses to talk to Christy since she died. All the while Stephanie - who remarried Serge - discovered the letter from Paulina in which she explained where was the box of clover leaves left behind by Roy. So, evidently, Beatrice wonders if Linda knows about the accident. You get all that?
Go see Beatrice and tell her that Julia sent you. She'll explain all that better than I can. She lives on the outskirts of the Old Burg, in a house next to the sea, on Peg Leg Street.

Framing and caption

To add a frame to an image, use the "frame" attribute. After you added that, you may also give the image a caption, by simply adding the text you wish to use after "frame|". Note that the image must either have a frame or be thumbed (see below) for the caption to appear. Example:

[[Image:Twinsen.jpg|frame|Twinsen]]

Twinsen

example paragraph: I've got to tell you something. It's awful! My best friend (Beatrice) is in love with Steven. But Paul, Steven's half brother, left Cindy when Linda got out of the clinic after her bobsleigh accident. But not for Linda, for Tatjana! Only Serge (who secretly admires Steven) has been trying for months to win the love of Tatjana who refuses to talk to Christy since she died. All the while Stephanie - who remarried Serge - discovered the letter from Paulina in which she explained where was the box of clover leaves left behind by Roy. So, evidently, Beatrice wonders if Linda knows about the accident. You get all that?
Go see Beatrice and tell her that Julia sent you. She'll explain all that better than I can. She lives on the outskirts of the Old Burg, in a house next to the sea, on Peg Leg Street.

Thumbnail

To make a thumbnail of an image, use the "thumb" attribute. You may also add a caption. The size of the thumbnail depends on what each user sets in his or her preferences, but as default, it's 180 pixels. Example:

[[Image:Screenshot-lba2-ingame-island of the white leaf desert-school of magic entrance.gif|thumb|Twinsen at the School of Magic]]

Twinsen at the School of Magic

example paragraph: I've got to tell you something. It's awful! My best friend (Beatrice) is in love with Steven. But Paul, Steven's half brother, left Cindy when Linda got out of the clinic after her bobsleigh accident. But not for Linda, for Tatjana! Only Serge (who secretly admires Steven) has been trying for months to win the love of Tatjana who refuses to talk to Christy since she died. All the while Stephanie - who remarried Serge - discovered the letter from Paulina in which she explained where was the box of clover leaves left behind by Roy. So, evidently, Beatrice wonders if Linda knows about the accident. You get all that?
Go see Beatrice and tell her that Julia sent you. She'll explain all that better than I can. She lives on the outskirts of the Old Burg, in a house next to the sea, on Peg Leg Street.

Note that images smaller than 180 pixels in width, will always just be displayed in 100% size.

Resizing

If you wish to specify an exact size of the image, you may also do so. All you need to do is add the width (in pixels) as an attribute, and add "px" after that. Example:

[[Image:Twinsen.jpg|50px]]

You can also add an alternative text after that, by simply adding "|text":

[[Image:Twinsen.jpg|50px|Twinsen is now small]]

(position your cursor over the image)

Combining attributes

You can, of course, combine any attributes you wish in a displayed image. The order of attributes does not matter, as long as the file name is first, and the caption is last. For example, let's make Twinsen right-aligned, small and with a caption:

[[Image:Twinsen.jpg|right|100px|thumb|Twinsen]]

Twinsen

example paragraph: I've got to tell you something. It's awful! My best friend (Beatrice) is in love with Steven. But Paul, Steven's half brother, left Cindy when Linda got out of the clinic after her bobsleigh accident. But not for Linda, for Tatjana! Only Serge (who secretly admires Steven) has been trying for months to win the love of Tatjana who refuses to talk to Christy since she died. All the while Stephanie - who remarried Serge - discovered the letter from Paulina in which she explained where was the box of clover leaves left behind by Roy. So, evidently, Beatrice wonders if Linda knows about the accident. You get all that?
Go see Beatrice and tell her that Julia sent you. She'll explain all that better than I can. She lives on the outskirts of the Old Burg, in a house next to the sea, on Peg Leg Street.

Images gallery

There is also a cool option to create an entire image gallery. This is done using the <gallery> tag:

<gallery>
Image:Bob.png|Bob
Image:Aristide.jpg|Aristide
Image:Jerome Baldino.jpg|Baldino
Image:Luc.jpg|Luc
Image:Miss Bloop.jpg|Miss Bloop
Image:Mr. Bazoo.png|Mr. Bazoo
</gallery>

• 

  Bob

• 

  Aristide

• 

  Baldino

• 

  Luc

• 

  Miss Bloop

• 

  Mr. Bazoo

Linking to images without displaying them

If you wish to link to an image, without displaying it in the article, there are a few ways to do so:

[[Media:Twinsen.jpg]] → Media:Twinsen.jpg

To display some other text than "Media:filename.jpg", use the pipe-technique:

[[Media:Twinsen.jpg|An image of Twinsen]] → An image of Twinsen

You can also remove the display of the image itself and only show the usual link to the image page with all the image's information. To do so, just insert a colon(:) before the "Image" keyword:

[[:Image:Twinsen.jpg]] → Image:Twinsen.jpg

And of course, you can also set an alternative text here as well:

[[:Image:Twinsen.jpg|The information page of Twinsen's image]] → The information page of Twinsen's image

Image list

To see a list of all images on the server, go to the Special:Imagelist page. You can also search an image for quicker finding (most images have a descriptive file name). To see a list of absolutely all images together, go this page (the 5,000 attribute in the address is just a random number which is hopefully bigger than the number of images on the server).