How to Create an Infobox

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 it's goals, etc. They are designed to give a lot of information in 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 are difficult.

Step One - Create the table
So let us create a infobox for an organization:
 * 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.
 * 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 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:.


 * 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
 * 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:  .  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.
 * 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 .  However, it will be displayed as such:.
 * 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


 * 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.

That is all there is to it. Simple.
 * When you save the page, the is replaced by John Smith.
 * Now if we add the following information after the = signs like so:
 * 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

 * 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:


 * HTML:

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 } 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.
 * The next step is to put the coding for item you want to fill in with the infobox template like so:
 * 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|}}}| Vice President:
 * 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