Help:Wiki University HTML--Infobox - If functions

From FamilySearch Wiki
Jump to: navigation, search
MAIN PAGE
WIKI
WIKITEXT
HTML/CSS
FAMILY HISTORY CENTERS
VISUAL EDITOR

Lessons


Flexbox/CSS Grid

Additional Helps

INFOBOX CONTENT

{{{organization}}}
{{{image}}}
President: {{{president}}}
Address: {{{address}}}
Phone: {{{phone}}}
Hours Open: {{{hours open}}}
  • In our example from the last lesson, we had limited the items shown for our organization for illustration purposes.
  • But, as you know, many organizations have more offices and other items that would be worth knowing that should be included in these infoboxes.

  • It would be better to create an infobox with more items to cover all possibilities; however, the problem with this is the posted infobox would have a lot of blank spaces if the organization was small.
  • What we would like to happen is, if a parameter is not filled in, it does not appear in the infobox. In other words, if the organization does not have a phone number, there will not be a line or even a blank space for it.

IF FUNCTIONS

  • It is possible to code the infobox so an item like "phone" does not appear if there is none.
  • We will now introduce you to an attribute called if functions.
  • It is a small bit of coding added to the title of the item in the first column.
  • This is an example of adding the if function code to the row for naming the President:

  • We go from this:
<td>President</td>
<td>{{{president}}}</td>

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

We know there are a lot of curly brackets here but pay close attention:

  • NOTICE the {{#if:{{{president|}}}| added ahead of the text in the first cell.
  • NOTICE the pipe after the first word "president."
  • NOTICE the two closing curly brackets at the end of where the name actually goes in the second cell.
  • This coding looks a bit intimidating but with a little practice, you will have it down pat. For more information than you will probably ever want to know about if functions see: if functions

YOU CAN CREATE LONG INFOBOXES

With this coding, you can create a more complete infobox that has the ability to shrink down if not all the items are present, such as a vice president or a web site address.

IF FUNCTION INFOBOX

  • Our finished infobox should look like this:

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



EMBEDDING TEMPLATE

This is what the infobox looks like before we add information:

Name of Organization
  • NOTICE except for the name of the organization, the infobox is blank.

We embed our template as normal with the parameters:

{{FamilySearch Wiki Missionary infobox template

| organization name=Smith Family Assoc.
| image=[[File:Erastus Deaf Smith.JPG|180]]
| president=John Smith
| address= 1234 Hill St, Anytown, Anystate
| phone=360-555-1234

}}


  • NOTICE no hours were entered.

Here is what the finished infobox looks like without the hours entered:

Name of Organization
180
President: John Smith
Address: 1234 Hill St, Anytown, Anystate
Phone: 360-555-1234
  • NOTICE no hours appear in the infobox and there is no space to indicate something is missing.

TRY THESE OUT . . . . .

Tests.gif
Exercises

This will be a repeat of the last exercise with the addition of the material in this lesson. Try not to look back on the previous lesson to complete this exercise.

Use this coding for the exercise:

<table>
<tr>
<td>organization</td>
</tr>
<tr>
<td>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>

Let's make this into an infobox with the addition of the "if function" material:

  1. Put a border around the infobox, limit the width to 190 pixels and make it so that it will always be on the right side of the page.
  2. Put borders around each of the cells.
  3. Have the cells containing the words organization and image span both columns.
  4. Center the name of the organization and the image in their cells.
  5. Make the items in the right hand cells into parameters.
  6. Place the "if function" coding in the appropriate cells.


Quick Quiz
  • If nothing is entered for a parameter, there will still be a space where the parameter would normally appear.
A. True
B. False
  • The "If function" allows you to create more complete infoboxes, but you do have to worry about them being too large and take up a lot of space if the subject to be posted in the infobox is small.
A. True
B. False
  • It does not matter whether you use regular pipes or {{!}} in infoboxes with if functions.
A. True
B. False

Navigation menu