VOpedia.com Tutorial No. 2 “Adding An Infobox To Your Wiki Page”

December 15, 2010  |  Articles, Edumification

So most have you have probably visited wikipedia.com and gotten used to the way they format their pages. One of the elements that most people first look toward is the right hand side box that contains an image of the company logo or the person that the wiki article is about.

In honor of the fact that Andy Boyns was the first person to figure out how to add it to his page… I will use his page and his infobox as the example here.

This is what I’m talking about (I put a red line around it for you if you’re still confused):

Here is a closeup of it:

So the infobox quite simply is a fact sheet that quickly gives you a quick breakdown about the person the wiki page is about. As you can also see it contains a picture of said individual and their name in a nice box.

The Code To Use

This is what the code for that looks like
[code]
{{Infobox actor
| image       = Andyboyns_225px.jpg
| name        = Andy Boyns
| birthname   = Andrew C Boyns
| birthdate   = {{birth date and age|1965|05|04}}
| birthplace  = London, UK
| occupation  = Voice actor
| yearsactive = 2005–present
| spouse      =
| children    = 1

| website         = http://andyboyns.com

}} [/code]

The code above needs to be customized to you… so first lets strip the code from andy’s info and make it generic:
[code]
{{Infobox actor
| image       = your_picture.jpg
| name        = write your name here
| birthname   = write your birth name here
| birthdate   = {{birth date and age|1900|01|01}}
| birthplace  = city of birth, country
| occupation  = Voice actor
| yearsactive = 1900–present
| website         = http://www.yourwebsite.com
}}
[/code]

The Next Couple of Steps

Well now the first thing you do is go to your existing page in this case I’m going to Mahmoud Taji’s wiki page on vopedia.com.

As you can see… so far its kinda bland!

My information is already in the page but I want to add an infobox to make it look nicer… so the next step is I will upload a picture of myself onto the system:

on the left hand menu you will a link that says ‘Upload File’… I’m going to go ahead and click that. Which will take me to this page

click browse and chose a picture you want to upload… in this case I am upload a picture called mahmoudtaji.jpg once it uploads it will show you this page:

Yup … that’s me. So anyway now that the picture is uploaded I can go back to my wiki page and add the infobox. That means that I will first copy the generic code that I posted below andy’s infobox code and add it to the top part of the code in my vopedia.com wiki page.

I will replace all the placer text with my information include the name of the image I uploaded and save the page.

This is what you end up with:

And that’s it… you can visit my wiki page here to take a look at it and see what the source code looks like.

if you have any questions or queries leave them in the comment section down below or send me an email.