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. They usually deal with organizations and or administrative divisions like US counties and may contain information on leadership, meeting times and its goals, etc. They are designed to give a lot of information at a glance.

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 HTML, 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 is 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.
• For this lesson, we have set the width for our infobox to 200 pixels. It could be any width, but infoboxes are usually kept thin and 200 pixels is about right.
• It is recommended that you create infobox tables in HTML as there fewer problems as you will see.
• We will be creating an infobox as shown above. We will include a border and float it on the right side.

So let us create a infobox for an organization:

Wikitext	HTML
{| style="width:200px; border:1px solid black; float:right; " |- |colspan="2" style="background-color:yellow;"|organization |- |colspan="2"|image |- |President: |president |- |Address: |address |- |Phone: |phone |- |Hours Open: |hours open |}	<table style="width:200px; border:1px solid black; float:right; "> <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>

• Now pay close attention to the table tags. You should notice that we have placed an one pixel border around the table and floated it to the right</nowiki> in the table tag .
• 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" and center the name of the organization as well as the image.
• When you save your infobox be sure include the word "infobox" in the title so people will know what kind of template at a glance. For example: {{template:infobox sample}}.

---

• 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" style="width:200px; " {{{!}}}- {{{!}}}colspan="2"{{{!}}}organization {{{!}}}- {{{!}}}colspan="2"{{{!}}}image {{{!}}}- {{{!}}}President: {{{!}}}president {{{!}}}- {{{!}}}Address: {{{!}}}address {{{!}}}- {{{!}}}Phone: {{{!}}}phone {{{!}}}- {{{!}}}Hours Open:> {{{!}}}hours open |}	<table class="infobox" style="width:200px; "> <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 {{{!}}} 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 HTML. That's why it is recommended to program infoboxes in HTML rather than Wikitext.

Step Two - More Coding

• Next step is to turn the items into parameters. They are formed 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.
• It will be in these parameters that we will add the information to the infobox.

Wikitext	HTML
{| class="infobox" style="width:200px; " {{{!}}}- {{{!}}}colspan="2"{{{!}}}{{{organization}}} {{{!}}}- {{{!}}}colspan="2"{{{!}}}{{{image}}} {{{!}}}- {{{!}}}President: {{{!}}}{{{president}}} {{{!}}}- {{{!}}}Address: {{{!}}}{{{address}}} {{{!}}}- {{{!}}}Phone: {{{!}}}{{{phone}}} {{{!}}}- {{{!}}}Hours Open: {{{!}}}{{{hours open}}} |}	<table class="infobox" style="width:200px; "> <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 to create the parameters is enclose the item with opening and closing {{{ }}}. That is all.
• In the wikitext, things are really getting hard to differentiate. There are a lot of curly brackets on the code. Again showing that using HTML is less messy than Wikitext.

Step Three - Placing the Infobox

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

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

  
  

  • Notice no information appears except the parameter 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=Genealogy Society
  |image=[[File:France Lavender Field.jpg|150px]]
  |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.
  • In addition it does not matter the order of the items on the placement codes. You could have the image at the bottom of the list, but the image will still show at the top where the infobox template has it position.

  Step Four - Limiting Number of 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.
  • If the infobox is long but you only have a small organization, you could end up with an infobox taking up a lot of room on the page but with little information in it. Maybe the organization does not 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.
  • This is an example of adding the additional code to the President line:
    
    

  • Wikitext:

  {{#if:{{{president|}}}|{{{!}}}President{{{!}}}{{{president}}}}}

  • HTML:

  {{#if:{{{president|}}}|<td>President</td><td>{{{president}}}}}

  
  
  This coding looks a bit intimidating but it is really not hard.

  • Notice that there are {{ }} at each end of the expression.
  • After the first set of {{ notice #if: which consists of a pound sign #, the word if and a colon :.
  • After the colon you see the parameter repeated with the addition of a pipe after the word inside the {{{}}} and a pipe on the outside like so:{{{parameter|}}}|. We will not take the time to explain what all this code means but if you are interested see the footnote.
    
    
  • The next step is to put the coding for item you want to fill in with the infobox template like so:

  Wikitext

  HTML

  {| class="infobox" style="width:200px; " {{{!}}}- {{{!}}}colspan="2"{{{!}}}{{{organization}}} {{{!}}}- {{#if:{{{image|}}}|{{{!}}}colspan="2"{{{!}}}{{{image}}} {{{!}}}- {{#if:{{{president|}}}|{{{!}}}President: {{{!}}}{{{president}}}}} {{{!}}}- {{#if:{{{address|}}}|{{{!}}}Address: {{{!}}}{{{address}}}}} {{{!}}}- {{#if:{{{phone|}}}|{{{!}}}Phone: {{{!}}}{{{phone}}}}} {{{!}}}- {{#if:{{{hours open|}}}|{{{!}}}Hours Open: {{{!}}}{{{hours open}}}}} |}

  <table class="infobox" style="width:200px; "> <tr> <td colspan="2">{{{organization}}} </td> </tr> <tr> {{#if:{{{image|}}}|<td colspan="2">{{{image}}}}} </td> </tr> <tr> {{#if:{{{president|}}}|<td>President:</td> <td>{{{president}}}}} </td> </tr> <tr> {{#if:{{{address|}}}|<td>Address:</td> <td>{{{address}}}}} </td> </tr> <tr> {{#if:{{{phone|}}}|<td>Phone:</td> <td>{{{phone}}}}} </td> </tr> <tr> {{#if:{{{hours open|}}}|<td>Hours Open:</td> <td>{{{hours open}}}}} </td> </tr> </table>

  • What this coding means that if you do not put anything after the = sign on the President line, this item will not appear in the infobox. So if you have a long infobox but few items to fill in, the infobox will shrink up to fit the information you have added.

  Adding More Fields

  If you want to add more organizational information such as other officers, meeting places, etc, you just add more fields to the infobox template and the matching field to the infobox inserted template:

  • In the infobox template:

  {{#if:{{{vice president|}}}|<td>Vice President:</td>

  • Remember where you place this code in the infobox template is where it will show up in the infobox. So if you want the, in this example, the vice president to follow the name of the president you have to place right after the coding for the president.

  • In the inserted template:

  |vice president=

  • This coding can be put anywhere in the inserted template. It does not affect the placement of the information in the infobox. But if nothing is put after the = sign, this line will not appear.

  Existing Infoboxes

  • There are many infoboxes already created in FamilySearch Wiki. Search under the word "infobox" and you should see a long list of them. Maybe one of them will fill your needs.
  • This instruction is to show you how to create one if none of these work for you.
  • In addition, this will help you understand the coding so you can make changes to any one of them if you see a need.

  Navboxes

  • Related to Infoxboxes is Navboxes. Navboxes usually appear at the bottom of a page rather than in the upper right hand corner where the Infoboxes are normally found. They are created with the same coding with a few minor differences. You learn about them and how they are created at navboxes.

  Links

  • Help:Infobox U.S. County
  • Help:Magic words
  • Help:Infobox
  • Help:Advanced templates

  ---

  Footnotes