Images in wikis are usually managed automatically by the wikia system. This includes captions, image size and the like. However, by using the source editor, it is actually possible to control images by working around the wiki formatting system.

First off, some of this requires simple wiki-formatting knowledge. Some of this may require a little experience with Cascading Style Sheets (CSS). But worry not, for we will cover it all through the article step by step.



Battle Bears Zero icon

So, first off take a look at the above picture. As you may know, it is the Battle Bears Zero icon, also known as BB0nav.png. The image is inserted with the width of 150px, placed in the center as a thumb and has a small caption. But wait, how did I center this? Aren't there only left or right alignment by default? This is true - in the visual editor. But if we edit using the Source editor, we can manipulate the code whichever way we want. The source code for the above image is the following:

[[File:BB0nav.png|thumb|150px|center|Battle Bears Zero icon]]

First off, we have File:BB0nav.png defining the image we will be using. Next we have thumb defining we want the default wiki-border around the image. 150px defines the image width, while center defines that we want the image aligned center on the page - which is only possible through the source editor. The last part is the small caption.

By dividing each parameter by a vertical bar " | " we can add all the parameters we want. Still confused? Okay, let's take it all step by step!

Simple image alignment

We described alignment in the first section. Aligning images are pretty easy and can be done in both visual and source mode, last mentioned making for slightly more options. To assign an image to the left, use:


If, however, we want to align the image to the right, we simply use the following:


And if we even feel the need to center an image, we use this:


Inserting a plain image

As seen on the class-pages, there has been inserted full character images without border, thumb nor a caption. This is possible by uploading and inserting the image and then slightly alter the source code a bit. Take this following example:


Battle Bears Zero icon

[[File:BB0nav.png|thumb|150px|center|Battle Bears Zero icon]]
</div>The image to the left is an exact copy of the one from the section above, while the one to the right is the same image but without the border and caption. In other words, it is a completely independant image placed in our article.</div>By removing the thumb parameter, we also remove the default wiki border applied to the image, hence creating a free image. This kind of image can still be applied other parameters such as width and alignment by seperating these using a vertical bar " | ".

Custom positioning using CSS

NOTE: This practice is not recommended, as it can give unexpected results and warp the appearance of a page. Use sparingly and only if other alternatives do not suffice!

Using CSS, it is actually possible to position images wherever we want. As warned above, this gives us full control over the image, as shown in the following example:


As you can see, I have taken absolute control over this image, mis-aligning it with the page. This makes for trouble on both the full and mobile version of the wiki, and we usually want to avoid this! If you're curious to what I did above, here's how it works: To be able to move elements in CSS, we assign the following snippet:

<div style="position:relative; left:-100px;"> [[File:BB0nav.png|left]] </div>

We assign the CSS attribute called position and a value called relative. When an element is relative, it can be moved. However, when moving relative objects, it does not remove the space left by the element, hence creating the huge area of white-space as shown above. But if you're using this feature correct, usually only for adjusting an image a few pixels, this can produce some quite good results.

After setting the position to relative, we can start adjusting the image itself. There are four options which we can use:

  • left:
  • right:
  • top:
  • bottom:

After the colon, you simply type how many pixels (px) you want to adjust the image with, from the desired direction. Hence, if you're using left:, we will add space on the left side of the image. The value used in the above exmaple is negative, which instead of adding space, removes it instead.

Read more

Take a look at this site for more info, or leave a comments in the comment section if you have ANY questions regarding this.

W3schools about CSS positioning

Community content is available under CC-BY-SA unless otherwise noted.