How to Create an Infobox

From FamilySearch Wiki
Jump to: navigation, search
Genealogy Society
France Lavender Field.jpg
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
    France Lavender Field.jpg
    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
    France Lavender Field.jpg
    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 quite 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[1].

    • 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[2].

    • 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


    Footnotes

    1. The coding is called Parser functions. You can read more about them at Help:Magic words#Parser functions and Parser Functions
    2. The coding looks complicated but it is really not. First this is an “if” statement. In essence, it says “if” you have A do B or if you do not, do C. Or another way to put it, if you have peanut butter, make a sandwich otherwise starve.
      • The coding looks like so:
      {{#if: peanut butter|make sandwich|starve}}
      • To explain the code:
      • First, this bit of code is enclosed with {{}}.
      • Following the first {{ is #if:. This code tells the browser that a “if” statement is coming. For our peanut butter example, the question is, do we have any peanut butter? This test statement or called a “test string,” is separated from our two options with a pipe. Our first option is to “make a sandwich.” The second option is to “starve.” The two options themselves are separated by a pipe.
      • This coding is testing to see if there is a positive value in the test string or if there is any peanut butter. If there is a positive value, the browser picks the first option, “make sandwich” if there is no value or no peanut butter, it picks the second option “starve.”
      • So if there really is NO peanut butter, you can leave the space is blank like so:
      {{#if:(blank)|make sandwich|starve}} and it picks the second option which is starvation.
      • Now what if we do not want the word “starve” to show at all? What if we do not even want to mention peanut butter if there isn’t any. Well, enter the code in this manner:
      {{#if:(blank)|make sandwich}} result: (blank line).
      • Notice the second option is left out. With the second option missing the browser’s only choice is to ignore the whole line of code and give us a blank line.
      • In our coding for creating this infobox, we are using parameters which are enclosed by {{{}}}. To show a non value for peanut butter instead of leaving a blank space, we add the pipe after the word “peanut butter” like so:
      {{{peanut butter|}}}. This bit of coding assumes there is NO peanut butter.
      • So our coding will look like so:
      {{#if:{{{peanut butter|}}}|make sandwich}}.
      • Because of the pipe after the word peanut butter, the test string is a non value or there is no peanut butter and so the browser goes looking for the second option. But since there is no second option, whole bit of code is ignored and a blank line is returned to the browser.
      • But if there is some peanut butter available, then the first option is displayed or in our case "make a sandwich."
      • For our template, we are assuming that there are no values for any of the items in the infobox. This is the reason the parameters are coded like so, for example: {{{president|}}}. Again notice the pipe after the word "president" which makes the value zero.
      • In our coding for our template, the first option is this whole statement: <td>President:</td><td>{{{president}}}. The second option is left out. So the whole bit of coding looks like this:
      {{#if:{{{president|}}}|<td>'''President''':</td><td>{{{president}}}}}
      • Notice the 5 }}}}} curly brackets at the end of the line of code. It is really ending three }}} curly brackets for the parameter and the two ending curly brackets for the if statement. Probably clearer if we rendered it as }}} }} with a space between the three and the two curly brackets. You can do this and it will not effect the code.
      • The net result, if a name is entered for president, then the first option is chosen and the office and name of president is displayed. If nothing is entered for the name the second option is chosen and the browser returns a blank line.