Hello everybody! This is a slightly passive aggressive Neo, teaching you how to put images on the wiki without uploading anything to the wiki, so you can have all the epic pictures, fanart and whatnot on your profile page/blog and not go against the Image Guidelines (which I pointed out to people about 60 times by now).
Direct Linking[]
The easiest way to do that is to upload an image on photobucket.com or imageshack.com. Once you uploaded an image, zoom in till 100% and then simply click right and select "Copy Image URL". Then you paste the URL into your profile/blog/comment/whatever.
- Wikia only supports images uploaded on either of those two sites above. Other domains will show the images as a link.
- You need to zoom or click "enlarge to actual size" because otherwise the wiki won't support it and only show a link, too.
Let's give it a try: http://imageshack.us/a/img163/2126/philosobrookimg.png
Thumbnail[]
The image is up but it's rather big, innit? Unfortunately, Wikia does not support the thumbnail function of either Photobucket or Imageshack. Therefore you need to make a thumbnail yourself by creating a smaller version of the image. Upload that one on either of the sites above, too.
To use it you have to go into the Source Mode of the editor and put both URLs in square brackets > [].
- [
- URL of the big image
- space
- URL of the thumbnail
- ]
[http://img528.imageshack.us/img528/2126/philosobrookimg.png http://img560.imageshack.us/img560/5198/philosobrookimgsmall.jpg]
So now it looks like this: http://img560.imageshack.us/img560/5198/philosobrookimgsmall.jpg
Alignment[]
Now we have a nice and small thumbnail leading to the bigger picture but the Wiki still treats it like part of the text and produces ugly white spaces, unlike wiki-native images where the text flows around the image.
To fix that you put the code above into a so called "p-tag":
<p>I am a text inside a p-tag</p>
The p-tag can be styled. It requires a bit coding knowledge but to make it simple you can just copy the following code:
<p style="float: left; margin: 10px;">insert your URLs here</p>
The important property is the one saying "float: left". With that the picture will be displayed on the left next to your text. Change it to "right" and your picture will be on the right.
The other property is called "margin" and refers to the size of the white space between the image and the text.
And now we put it all together:
<p style="float: left; margin: 10px;">[http://imageshack.us/a/img163/2126/philosobrookimg.png http://img560.imageshack.us/img560/5198/philosobrookimgsmall.jpg]</p>
http://img560.imageshack.us/img560/5198/philosobrookimgsmall.jpg
http://img560.imageshack.us/img560/5198/philosobrookimgsmall.jpg
The image is next to the text just like a wiki-native thumbnail. See? I can put a lot of text here and it will flow around the image.
Note how the image on the right is closer to the box above and the text than the one on the left? That's because it has a smaller margin (3px instead of 10px). You can also see that the text will skip a line if the margin is too big. But it might look bad if it's too small either. So the margin for images in a text should be something between 5 and 10.
I know this is a bit of an effort but it's better than big bulky images or no images at all. Hope you found my guide helpful. If you have any questions, just ask!
FAQ[]
- I only see the URL of my image. Why does the image not show?
Photobucket and imageshack usually show a scaled down preview version of the image. You probably used the URL of the scaled image which is not supported by wikia. You have to zoom it to 100% by clicking on the image.
- How do I know the image is zoomed to 100%?
You can tell by the URL. If there is anything written after the image suffix (gif/png/jpg) it's scaled. Try deleting everything after the suffix. This should work.
If you uploaded the picture at imageshack and the URL of the window says http://imageshack.us/photo/... it's scaled. Click on the image once again and try the URL of that image.