Help:Galleries

Galleries are a fundamental aspect of the Wiki for several pages. Whilst many pages on this Wiki do not require you to use the gallery function, the Hotel pages, Fansite pages, Games pages, and Staff pages will most likely need a gallery.

It is important to note two things:

• If there is only one image for the page, do not create a gallery. Simply put the image on the page in a thumbnail format at the top right.
• Creating a gallery is not the same as adding an image. To add an image you simply need to type the following (after you have uploaded it):

[[File:FILENAME.png OR .jpg OR .gif|right OR center OR left|thumb OR frame OR leave blank|captionhere if needed]]

Adding a traditional gallery

For adding any type of traditional gallery, with no mode, you need to type the following code:

<gallery>
File:FILENAME.png OR .jpg OR .gif|Caption Here
FIle:FILENAME2.png OR .jpg OR .gif|Another Caption Here
...
</gallery>

An example of this using Adzeh.png and Alt6.png as the file names produces:

• 

  Caption Here

• 

  Another Caption Here

You should try to add captions to all gallery images. This is because they tend to be very small when displayed as a gallery, so users ought to know what they are clicking on before the image is loaded in its full-size.

Gallery Option 1 - No lines

If you wish to have no border surrounding your images, simply add mode=nolines into your gallery tag, like so:

<gallery mode=nolines>
...
</gallery>

Doing this with the Adzeh.png and Alt6.png example produces:

• 

  Caption Here

• 

  Another Caption Here

Gallery Option 2 - Packed

If you wish for a more compact, centered gallery with no borders then you can add mode=packed into your gallery tag, like so:

<gallery mode=packed>
...
</gallery>

Doing this with the Adzeh.png and Alt6.png example produces:

• 

  Caption Here

• 

  Another Caption Here

Gallery Option 3 - Packed Overlay

This produces the same result as Packed, but the captions are placed over the image. Best used for one word captioned images only. Simply add mode=packed-overlay, like so:

<gallery mode=packed-overlay>
...
</gallery>

Doing this with the Adzeh.png and Alt6.png example produces:

• 

  Look

• 

  Here!

Gallery Option 4 - Packed Hover

This produces the same result as Packed, but the captions are placed over the image and do not appear unless the image is hovered over. Best used for one word captioned images only. Simply add mode=packed-hover, like so:

<gallery mode=packed-hover>
...
</gallery>

Doing this with the Adzeh.png and Alt6.png example produces:

• 

  Look

• 

  Here!

Gallery Option 5 - Overall Caption

If you need to give the entire gallery an overall caption, you can do so by adding caption=CAPTION HERE, this example also uses packed mode:

<gallery mode=packed caption="Look At Me!">
...
</gallery>

Doing this with the Adzeh.png and Alt6.png in packed mode example produces:

• Look At Me!
• 

  Look

• 

  Here!

Gallery Option 6 - Height & Width

It is strongly recommended that you do not try and alter the height and width of the gallery images (more importantly, widths only works in the default mode), but if you ever feel it 100% necessary to do so then you need only add heights="0X0px" and/or widths="0X0px" in the gallery tag, like so:

<gallery widths="20px" heights="20px">
...
</gallery>

Doing this with the Adzeh.png and Alt6.png example produces:

• 

  Look

• 

  Here!

Gallery Option 7 - Aligning Captions

If you wish to align captions to the left (they are centred by deafult), add style="text-align:left" to the gallery tag, like so:

<gallery style="text-align:left">
...
</gallery>

It appears you cannot align captions right without aligning the whole gallery right, unfortunately.

Doing this with the Adzeh.png and Alt6.png example produces:

• 

  Who left us here?!

• 

  What a leftdown haha!

Gallery Option 8 - Aligning Galleries

If you with to align the entire gallery centre (it is left by default), simply add class="center" to the gallery tag, like so:

<gallery class="right">
...
</gallery>

Doing this with the Adzeh.png and Alt6.png example produces:

• 

  Who left us here?!

• 

  What a leftdown haha!

If you wish to align the entire galllery right (it is left by default), simply add style="text-align:right" to the gallery tag, like so:

<gallery style="text-align:right">
...
</gallery>

Doing this with the Adzeh.png and Alt6.png example produces:

• 

  Right, I've had enough!

• 

  We'll be all right now :)

Other Gallery Features

Like other HabboxWiki text, you are able to add links into Gallery Captions - here it's done using the very first Adzeh.png and Alt6.png example on this page. The code being:

<gallery>
File:Adzeh.png|Caption Here + [[Habbo]] link
File:Alt6.png|Another Caption Here + [[Sulake]] link
</gallery>

And the result being:

• 

  Caption Here + Habbo link

• 

  Another Caption Here + Sulake link