How to Create an Infobox

Genealogy Society
President:	John Smith
Address:	1234 Hill St, Any City
Phone:	360-555-1234
Hours Open:	Mon 1pm - 6pm

What are Infoboxes?

Infoboxes are nothing more than a table saved as a template. Infoboxes are usually in the upper right hand corner of an article. May contain information on leadership, meeting times and it's goals, etc.

How to create an Infobox

Again an infobox is a table. If you know how to create tables in Wikitext or HTML, it is not difficult. If you do not know Wikitext or HTLM, you will probably need someone who does to help you. If you would like to learn these two programs, see Wikitext or HTML Programming. Neither of these programming languages are difficult.

Step One - Create the table

• We are going to assume you know a little Wikitext and HTML in this tutorial. We will begin by creating a simple table. The coding will be displayed in both Wikitext and HTML side by side so can see the difference. It is recommended that you create infobox tables in HTML as there few problems as you will see.
• We will be creating an infobox as shown above. Wikitext and HTML will be displayed side by side so you can see the difference between them. So let us create a infobox for an organization:

Wikitext	HTML
{| class="infobox" |- |colspan="2"|organization |- |colspan="2"|image |- |President: |president |- |Address: |address |- |Phone: |phone |- |Hours Open: |hours open |}	<table class="infobox"> <tr> <td colspan="2">organization</td> </tr> <tr> <td colspan="2">image</td> </tr> <tr> <td>President:</td> <td>president</td> </tr> <tr> <td>Address:</td> <td>address</td> </tr> <tr> <td>Phone:</td> <td>phone Number</td> </tr> <tr> <td>Hours Open:</td> <td>hours open</td> </tr> </table>

• Now pay close attention to the table tags. You should notice this coding: class="infobox" in the table tag . This code tells the browser that a infobox is being created and to place it on the right hand side of the article.
• Since the name of the organization and the image will extend over the two columns which contain the information about the organization we will install colspan="2" in the organization and image coding.

• As it stands, the HTML coding is ok at this point, but the Wikitext has a problem. Normally the Wikitext as is will work for any table, however, we are going to be installing parameters which require us to replace the |'s in the Wikitext with {{{!}}}. The reason is a bit beyond the scope of this article but if you are interested click here

Wikitext	HTML
{| class="infobox" {{{!}}}- {{{!}}}-colspan="2"{{{!}}}-organization {{{!}}}- {{{!}}}-colspan="2"{{{!}}}-image</nowiki> {{{!}}}- {{{!}}}-President: {{{!}}}-president {{{!}}}- {{{!}}}-Address: {{{!}}}-address {{{!}}}- {{{!}}}-Phone: {{{!}}}-phone {{{!}}}- {{{!}}}-Hours Open:> {{{!}}}-hours open |}	<table class="infobox"> <tr> <td colspan="2">organization</td> <tr> <td colspan="2">image</td> <tr> <td>President:</td> <td>president</td> </tr> <tr> <td>Address:</td> <td>address</td> </tr> <tr> <td>Phone:</td> <td>phone</td> </tr> <tr> <td>Hours Open:</td> <td>hours open</td> </tr> </table>

• The Wikitext looks a bit messy right now, but the substitution of the </font color>{{{!}}} for the | will save a lot of headaches later. Notice that nothing had to be done to the HTML coding. Even though it looks like the Wikitext has less programming, it is a lot trickier to program infoboxes than in HTLM. That's why it is recommended to program infoboxes in HTML rather than Wikitext.

Step Two - More Coding

• Next step is to add parameters which are formated like so: {{{name of parameter}}}. We will add them to the table below. Notice that there are three opening and closing curly brackets around each one.

Wikitext	HTML
{| class="infobox" {{{!}}}- {{{!}}}colspan="2"{{{!}}}{{{organization}}} {{{!}}}- {{{!}}}colspan="2"{{{!}}}{{{image}}} {{{!}}}- {{{!}}}President: {{{!}}}{{{president}}} {{{!}}}- {{{!}}}Address: {{{!}}}{{{address}}} {{{!}}}- {{{!}}}Phone: {{{!}}}{{{phone}}}</nowiki> {{{!}}}- {{{!}}}Hours Open: {{{!}}}{{{hours open}}}</nowiki> |}	<table class="infobox"> <tr> <td colspan="2">{{{organization}}} </td> </tr> <tr> <td colspan="2">{{{image}}} </td> </tr> <tr> <td>President:</td> <td>{{{president}}}</td> </tr> <tr> <td>Address:</td> <td>{{{address}}}</td> </tr> <tr> <td>Phone:</td> <td>{{{phone}}}</td> </tr> <tr> <td>Hours Open:</td> <td>{{{hours open}}}</td> </tr> </table>

• Notice all we have done is enclose the parameter we want to place information with opening and closing {{{ }}}. That is all. It will be in the parameters where we put the information that we see in the infobox.
• In the wikitext, things are really getting hard to differentiate. There are a lot of curly brackets on the code.

Step Three - Placing the Infobox

• To place this infobox we type the usual coding we use to place templates, which our example is {{Infobox sample}}. However, it will be displayed as such:

  {{{organization}}}
  {{{image}}}
  Phone:	{{{phone}}}
  Hours Open:	{{{hours open}}}

  .

  • Notice no information appears only the parameters for the name of the organization inside the curly brackets. We now have to add the following code inside the placement coding
    
    

  {{Infobox sample
  |organization=
  |image=
  |president=
  |address=
  |phone=
  |open hours=
  }}

  • Notice that for every parameter there is a |, the name of the parameter followed by an = sign. It is after the = sign that you add the proper information for the organization. For example, if you are wanting to place the name of the president you would type it after the = sign like so: |president=John Smith.

  Genealogy Society
  President:	John Smith
  Address:	1234 Hill St, Any City
  Phone:	360-555-1234
  Hours Open:	Mon 1pm - 6pm

  
  That is all there is to it. Simple.

  • When you save the page, the {{{president}}} is replaced by John Smith.
  • Now if we add the following information after the = signs like so:

  {{Infobox sample
  |organization=[[File:France Lavender Field.jpg|150px]]
  |organization=Society Name
  |president=John Smith
  |address=1234 Hill St, Any City
  |phone=360-555-1234
  |open hours=Mon 1pm - 6pm
  }}

  • We will get the following:
  • Notice that we use the usual coding for placing an image. We have limited the image to 150px wide as the infobox is 200px wide. If you did not limit the size of the image. the infobox would expand to the width of the image as it stands in the files.

  Step Four - Limiting Parameters

  Genealogy Society
  President:	John Smith
  Address:	1234 Hill St, Any City
  Phone:	360-555-1234
  Hours Open:	Mon 1pm - 6pm

  
  

  • Some infoboxes can get very long. If you list all the attributes of an organization can possibly there can be quit a few items listed.
  • What if you placing an infobox for a small organization, but are using the infobox for a large organizations with many offices you could end up with an infobox taking up a lot of room on the page with little information in it. Maybe the organization does even have a phone number like in our example here.
  • Well it is possible to code the infobox so that the item "phone" does not appear if there is none. It is done simply by adding this coding to the parameter.