HEROsector01:Tutorial (Images)

From HEROsector01
Jump to: navigation, search
ImportantLogo.png
Important Notice

Before reading this tutorial, please be sure to read the HEROsector01:Image Use Policy to insure that you don't break any image-related rules.


Tutorials

Images are yet another important aspect on the HEROsector01 Wiki. They present a visual view of the characters, locations and media of the Hero Factory storyline, enriching the reader's knowledge of the story. They can also be used to present an element of a member, such as a personal photograph, or an externally linked image of their interests. This tutorial outlines how to place images on the HEROsector01 Wiki.

Internal Images

Internal Images are images which are uploaded by a member to the HS01 Wiki. In accordance with the Image Policy, these images must be related to the storyline or storyline media.

For this tutorial, we will be using File:Example.png.

To place these images, simply do the following:

[[Image:-IMAGE NAME HERE-.-IMAGE FORMAT HERE-]]

Which would make this occur:

Example.png [[File:Example.png]]

In the case of Example.jpg, Example is the image name and jpg is the image format.

You can also position images. To do this, simply do the following:

[[File:-IMAGE NAME HERE-.-IMAGE FORMAT HERE-|-POSITION HERE-]]

The position can be left, right or center. For example:

Example.png

[[File:Example.png|center]]

In the example above, the position is center, which makes the image be placed in the center of page or area.

The images can also be resized. To do so, simply do the following:

[[File:-IMAGE NAME HERE-.-IMAGE FORMAT HERE-|-SIZE HERE-px]]

Simple enter a number for the size, but leave the px intact, like this:

Example.png [[File:Example.png|100px]]

In the above case, the image is set to 100 pixels in length.

A frame can also be produced. This method allows the image to blend in with the page in which the image is placed on to look equally professional or otherwise easier on eyes. Simply do the following to achieve the effect:

[[File:-IMAGE NAME HERE-.-IMAGE FORMAT HERE-|-TYPE OF FRAME-]]

There are two types of frames, frame or thumb. frame is essentially a frame wrapped around an image, as shown in the example below. The size of the image can not be changed when surrounded with frame.

This is a frame.

[[Image:Example.png|frame]]

thumb places a resizable border around your image, effectively producing a "thumbnail".

This is a thumb.

[[File:Example.png|thumb]]

As shown in the examples to the right, you can also add text when there's a frame surrounding the image. To do so, simply do this:

[[File:-IMAGE NAME HERE-.-IMAGE FORMAT HERE-|-TYPE OF FRAME-|-TEXT HERE-]]

The divider "|", which can be made by pressing Shift and the key which has "|" in it (It is normally the key with "|" on top of "\"), allows the user to manipulate the image into whatever he or she wishes. This also allows the user to combine the methods above, as shown in the following:

[[File:-IMAGE NAME HERE-.-IMAGE FORMAT HERE-|-TYPE OF FRAME-|-SIZE HERE-px|-POSITION HERE-|-TEXT HERE-]]

Which can produce something like this:

Example

[[File:Example.png|thumb|300px|center|Example]]

The order of the additions does not matter, which means you can arrange them in whatever way you want, and the image will still display as the user wants it to.

Example

[[File:Example.png|center|Example|300px|thumb]]

Galleries

Galleries are special pages used to hold large quantities of images. They are a slightly different format from normal information pages, but still rely on many of the same concepts.

The format is as follows.

<gallery>

File:image name|image description
File:image name|image description
File:image name|image description
</gallery>

For example, if one were to create a gallery using the code seen in box #5, the contents of box #6 would be the result.

<gallery>

File:Furno Comic.png|[[William Furno]] in the comics.
File:Comic Furno 2.0.png|William Furno 2.0
File:7167 William Furno.jpg|William Furno as a set
</gallery>

Box #5 Box #6


Image Pages

text text text

File Page With Numbers.PNG
click to enlarge
  1. Talkpage: This is the image's talkpage. Here, conversation relating to the image can take place.
  2. Name: This is the file's name. You'll need this to insert the image into a page.
  3. Extension: This is the image's file extension.
  4. Image: This is the actual image. Though it is often larger than it appears here. Click here to view only the the image, which will be in full size.
  5. File Size: This is the file size, in kilobytes (or megabytes, if it is large enough), of the current version of the image. The larger it is, the longer the image will take to load on a page. This can be especially troublesome for users with slower internet connections.
  6. Time uploaded(current): This is the time that the current version of the image was uploaded.
  7. Size(pixels)(current): This is the size, in pixels, of the current version of the image. Width comes before height.
  8. Uploader(current): This is the user that uploaded the current version of the image. Links to their userpage, talkpage, and contributions can be found here.
  9. Time uploaded(previous): This is the time that the previous version of the image was uploaded. Click on it to view that version of the file.
  10. Size(pixels)(previous): This is the size, in pixels, of the previous version of the image. Width comes before height.
  11. Uploader(previous): This is the user that uploaded the previous version of the image. Links to their userpage, talkpage, and contributions can be found here.
  12. Upload new version: This link lets one upload a new version of the image.
  13. Linked pages: These are the HEROsector01 pages that use the image. Each acts as a link.

External Images

Externally-hosted images should only be used for personal images.

The format is as follows.

<IMG>URL</IMG>

For example, if one were to create a gallery using the code seen in box #3, the contents of box #4 would be the result.

<IMG>http://i106.photobucket.com/albums/m271/Full_Shade/Shine.gif</IMG> External Image
Box #3 Box #4

Note that the images must be deep-linked.

You may run test-edits in the sandbox if you would like, and then Continue with the tutorial.