Welcome to Your Integrated Blog

This article was created using the <BlogPosts> option. It demonstrates many of the features available when using an integrated blog to supplement your family history. Blogs support embedded references, which can be used to provide easy and consistent links to your ancestors' profile pages. They can also be used to embed images from your media gallery and provide full source citations and footnotes and links to sources. Blogs also support more generically, "related posts", categories, hashtags, keywords, embedded HTML and automatic hyperlinking of URLs. These features make publishing proof arguments, one name studies and family history stories using the integrated blog a simple option. Please review the source code found in /config/sample.xml for some of the details not specified here. Blog posts also support embedded virtually any HTML tag, as well as PHP or JavaScript code.

Hashtags

Blog posts support hashtags and are automatically recognized and linked when the # symbol is found followed by text. The minimum embedded hashtag size can be set using the <MinTagSize> option. Spaces can be included in embedded hashtags by added a dash to the tag. The dash will be stripped when being displayed. By way of example, #Hash Tag was created using #Hash-Tag. External hashtags are also supported and can be added using the <HashTags> option. External hashtags are used for tagging posts without embedding the hashtag into the content. This post sets the #Hashtag hashtag externally. All hashtags can be viewed at the bottom of this page.

Internationalization

Gigatrees supports translating generated text into almost any language using the <Translations> option. In order to do so, Gigatrees supports all common, as well as many uncommon, character sets. Some of these are shown below.

Embedded HTML

Youo can embed HTML into any text field. For instance, this paragraph is created using the <p> tag so that the first line is indented. Other common paragraph elements are <em> (italics), <b> (bold), <u> (underline) and <strike> (strikethrough). You can also create your own styles or override existing styles. For instance <style>.caption {text-align:center;}</style> has been added to this post to align table captions.

You can also use the HTML <blockquote> tag to quote text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean volutpat commodo felis, id molestie tellus dictum eu. Nunc et sem non libero pharetra ornare non a sapien. Donec id ultrices nunc. Sed nec odio vel tortor mattis cursus. Vivamus egestas, mauris a ultrices tempus, metus eros porttitor sapien, vel posuere risus metus eget diam. Nulla volutpat hendrerit faucibus. Vestibulum et dui sit amet lorem venenatis venenatis dignissim vitae dui. Nunc odio felis, faucibus id iaculis sit amet, iaculis vel lorem. Nam suscipit convallis fermentum. Proin euismod libero et eros suscipit ullamcorper. Vestibulum ac ipsum massa.

What I've shown here is just a small sampling of some of the more common usages of HTML in blog posts. You can of course expand this sample by including any of the other HTML tags you need to accomplish your intended task.

Embedded Code

In addition to HTML, you can also embed PHP and JavaScript code. For these charts I loaded the Chart.js JavaScript library and built a simple bar chart and pie chart to demonstrate its use. You can load virtually any well behaved JavaScript (or JQuery) library to include additional content on your pages. You can also move the JavaScript library to your <Plugins> to make them more convienient to load.

Tooltips

Two types of tooltips are supported. Popovers are a fixed width, and are light colored. Tooltips can vary in width, and are dark colored. Both permit embedding HTML and hyperlinks. Tooltips are used in the next section in the table titles.

Tables

Tables ( <table> ) can be used to display tabular data. The following table enables scrolling on small screens, hovering to highlight lines, and sorting by clicking on any of the headings. It also uses tooltips for some of the headings and an embedded reference in the caption providing a reliable link to the source page. More on Embedded References below.

Toggles

Toggles can be used to provide additional content when clicked. They display a help cursor on laptops when hovered over, and expand when clicked. They can be set to initialize in the open state using a class of "collapse in" or closed using a class of "collapse". They are good for providing help in headings or for compressing text. For instance to view the code used to generate the responsive table above, see Fig. 1

<div class="gt-scroll-box">
<table class="table-hover table-condensed tablesorter">
  <thead>
    <tr>
      <th>Line</th>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
      <th>Occupation</th>
      <th class="gt-nowrap"><a name="" data-toggle="tooltip" title="Real Estate Value">REV</a></th>
      <th class="gt-nowrap"><a name="" data-toggle="tooltip" title="Property Value">PV</a></th>
      <th class="gt-nowrap"><a name="" data-toggle="tooltip" title="Place of Birth">POB</a></th>
      <th>Attended School</th>
      <th class="gt-nowrap"><a name="" data-toggle="tooltip" title="Cannot Read or Write">Illiterate</a></th>
      <th>Citizen 21+</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>9</td>
      <td>Hugh Humphrey</td>
      <td>51</td>
      <td>Male</td>
      <td>Farmer</td>
      <td>150</td>
      <td>300</td>
      <td>Massachusetts</td>
      <td></td>
      <td></td>
      <td>Yes</td>
    </tr>
    <tr>
      <td>10</td>
      <td>Elizabeth</td>
      <td>44</td>
      <td>Female</td>
      <td>Keeps House</td>
      <td></td>
      <td></td>
      <td>Ohio</td>
      <td></td>
      <td>Yes</td>
      <td></td>
    </tr>
    <tr>
      <td>11</td>
      <td>David</td>
      <td>14</td>
      <td>Male</td>
      <td>At Home</td>
      <td></td>
      <td></td>
      <td>Illinois</td>
      <td>Yes</td>
      <td></td>
      <td></td>
    </tr>	
  </tbody>
</table>
</div>
<div class="caption">{ref:S459}, Dwelling: 24, Family: 24</div>

Preformatted text

Preformatted text ( <pre> ) can be used to display wide tables in a fixed-width font without wrapping the internal elements. Preformatted text will show a horizontal scroll bar on small screens:

Line:                  9              10           11
Name:                  Hugh Humphrey  Elizabeth    David
Age:                   51             44           14
Gender:                Male           Female       Male
Race:                  White          White        White
Occupation:            Farmer         Keeps house  At Home
Real Estate Value:     150
Property Value:        300
POB (Place of Birth):  Massachusetts  Ohio         Illinois
Foreign Father:
Foreign Mother:
Month Born:
Month Married:
Attended School:                                   Yes
Cannot Read:
Cannot Write:                         Yes
Blind, etc.:
Citzen over 20:        Yes
Denied Vote:

Preformatted text can also be used to show simple charts.

                 «Unk»                         «John»
                 Beasley                       Lovell
                   / \                         __|__
                  /   \                       /     \
    William + Ruth    Elizabeth + Edmund   George  John   + Susannah
    Dollar    Beasley Beasley   | Lindsey  Lovell  Lovell |
                                |                _________|_____________
                                |               /         |       |     \
                Solomon      Stephen          James W.  Reuben  George  |
                Lynn         Lindsey          Lovell    Lovell  Lovell  B
                 |              |         ______|_______________
                 |              |        /       |      |       \
                Jane         Phoebe  + Samuel  James   Reuben   |
                Lynn         Lindsey   Lovell  Lovell  Lovell   A
                  \_____________ + _____________/

				  
                              «James»
                              John
                               |
                              «John»
                              John            «Henry»
                      B        |              Sarver
                      |        |                |
                    John   + Catherine        Jacob  + Barbara
                    Lovell | John             Sarver |
       A         __________|_________          ______|_______
       |        /       |     |      \        /      |       \
     William  David  Samuel William Susan + Jacob  Elizabeth Susan
     Lovell   Lovell Lovell Lovell  Lovell  Sarver Sarver    Sarver
        \______|_______________ + _________________/          |
               |                                              |
                \_____________________ + ____________________/
                                       |
                                    Elizabeth
                                    Lovell

Embedded References

Gigatrees supports adding embedded references to blog posts, notes, research logs and to most other text fields including all text found in your GEDCOM data fields. Embedded references are an easy method for creating reliable and persistent links to Individual profile pages, Source pages, Media images and Blog posts, whether they are found in your GEDCOM file or added via configuration.

All embedded references are in the form of {ref[:id][#item][@description]}.

Individuals

To demonstrate referencing an individual, consider Hugh Humphrey ( {ref:I2} ). In this embedded reference, his GEDCOM record id is used, and since there is no alternate description provided, his default display name is shown. If we wanted to use a different name such as Hugh ( {ref:I2@Hugh} ), all we need do is provide the alternate description as shown. Another common method when referencing an individual, is to provide a link to an anchor on the person's page in the embedded reference's item field as I have done here linking to Hugh's Source References ( {ref:I2#refs@Source References} ) section, which is located at the bottom of his profile page.

Sources

To demonstrate referencing a source, consider Restored Hamilton County, Ohio, Marriages, 1808-1849 [3] ( {ref:S1108} ). In this embedded reference, the source's record id is used, and since there is no alternate description provided, the title is shown. If we wanted to use a different title such as Ohio Marriages [4] ( {ref:S1108@Ohio Marriages} ), all we need do is provide the alternate description as shown. Another common method when using embedded references to link to a source, is to provide a link to an anchor on the source's page in the embedded reference's item field as I have done here: Restored Hamilton County, Ohio, Marriages, 1808-1849 (p. 79) [5] ( {ref:S1108#79} ) linking to page 79 of the source. The referenced page number will also now appear in the reference as shown here. If the page is defined in the source, clicking on the source takes you to the correct section on the source page. If the page is not defined, the link takes you to the top of the source page.

As you can see in the references above, when sources are referenced from a Blog Post (only), a footnote number is provided. Hovering over the footnote number, displays the source citation using the built-in full source citation template. This template along with those for footnotes can be modified using the <SourceTemplates> option. Clicking on the footnote number takes you to the Footnotes section at the bottom of the page where the full source citation is again displayed, this time using the footnote source citation template. Clicking on the footnote number while in the Footnotes section takes you back to the footnote reference. Criss-cross. Additionally, the blog post will be linked on the source page under the "Referrers" tab.

Any subsequent reference to the same source, prior to any reference to another source, will display the footnote using the ibid footnote citation template. Doing so while directing to a different page [6] ( {ref:S1108#139@different page} ) will include the page number in the description, the source reference citation and in the ibid footnote. If we now reference another source 1870 United States Census: Missouri, Cass, Big Creek [7] prior to referencing the previous source Restored Hamilton County, Ohio, Marriages, 1808-1849 [8], this last reference will use the short footnote souce citation template.

Blog Posts

To demonstrate referencing a blog post, consider The Ancestry of Elizabeth Lovell ( {ref:N114} ). In this case, "N114" is the record id of a GEDCOM NOTE record defined in the GEDCOM file, but I used the <BlogPosts> option to add a title, which is all that is needed to convert it into a blog post. When referencing a blog post, its title is used as the default description. If we wanted to use a different description such as Elizabeth Lovell ( {ref:N114@Elizabeth Lovell} ), all we need do is provide the alternate description as shown. As we saw for sources, we can also provide a link to an anchor on the blog post's page by including it in the embedded reference's item field as I have done here: The Ancestry of Elizabeth Lovell ( {ref:N114#head8} ). In this case, the anchor links to the reference for footnote 8. Clicking on the link takes you to the correct section on the blog post.

When referencing a blog post from another blog post (as shown above), the referenced blog post is linked by their thumbnail under the Related Posts section at the bottom of referencing post's page.

Footnotes

A common use for footnotes, besides linking to sources, is to provide commentary. You can add these by providing the commentary in the alternate description for the reference as in, {ref:@description}. The footnote will be added to the Footnotes section below, but will also be shown when hovering over or clicking on the footnote number. Let's try a couple [ 9 ] of footnotes [ 10 ]. This is the last footnote [ 11 ] repeated. This is a new one [ 12 ] where the footnote also contains a popover. Here's another footnote [ 13 ], but where the footnote contains a tooltip.

Media

To demonstrate referencing media images, we can embed a few on this page. Media images have a number of possible properties that can be named in the item field of the embedded reference. These include the title, caption, date and credit or attribution line. Multiple items can be specified by separating them by periods as in #title.caption.date.credit Additional properties can be appended to the item field as well and will be shown in the following examples.

By default, the medium-sized image will be displayed. if not defined, the largest defined image will be displayed. You can specify an alternate image size using large, medium, small or thumb in the item field. You can also specify an alternate width for the image being displayed using wXXX, where XXX is the image container's width in pixels. Also by default, the image is left-aligned. You can use the item field to specify an alternate alignment using center, floatleft or floatright. Lastly, by default, the image is hyperlinked to the largest image size defined. You can use the nolink option to prevent this behavior. The following examples demonstrate various ways in which media images can be embedded. The images shown here were added using the <Media> option.

Show the large image left-aligned, and show the image title as the caption: {ref:M1#large.title}

Show the medium image left-aligned, and show the image caption as the caption: {ref:M2#caption}

Show the small image left-aligned, and show the image credit line as the caption: {ref:M3#small.credit}

Show the small image centered and show the image title, caption and credit line as the caption. When including mutiple display items, built-in punctuation is used as shown: {ref:M1#small.center.title.caption.credit}

Do the same, but wrap the caption to 200px: {ref:M2#small.center.title.caption.credit.w200}

Center the medium image and override the width and the caption: {ref:M3#center.w300@Medium image (300px)}

Show several small images left aligned: {ref:Mn#small@Small image}

Show several small images centered aligned and no captions: {ref:Mn#small}

Show the small image on the left of a paragraph with caption and wrapped text: {ref:M1#small.floatleft.w200@This is a new caption, that is wider then the image.}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean volutpat commodo felis, id molestie tellus dictum eu. Nunc et sem non libero pharetra ornare non a sapien. Donec id ultrices nunc. Sed nec odio vel tortor mattis cursus. Vivamus egestas, mauris a ultrices tempus, metus eros porttitor sapien, vel posuere risus metus eget diam. Nulla volutpat hendrerit faucibus. Vestibulum et dui sit amet lorem venenatis venenatis dignissim vitae dui. Nunc odio felis, faucibus id iaculis sit amet, iaculis vel lorem. Nam suscipit convallis fermentum. Proin euismod libero et eros suscipit ullamcorper. Vestibulum ac ipsum massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean volutpat commodo felis, id molestie tellus dictum eu. Nunc et sem non libero pharetra ornare non a sapien. Donec id ultrices nunc. Sed nec odio vel tortor mattis cursus. Vivamus egestas, mauris a ultrices tempus, metus eros porttitor sapien, vel posuere risus metus eget diam. Nulla volutpat hendrerit faucibus. Vestibulum et dui sit amet lorem venenatis venenatis dignissim vitae dui. Nunc odio felis, faucibus id iaculis sit amet, iaculis vel lorem. Nam suscipit convallis fermentum. Proin euismod libero et eros suscipit ullamcorper. Vestibulum ac ipsum massa.

Show the small image on the right without a caption: {ref:M2#small.floatright}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean volutpat commodo felis, id molestie tellus dictum eu. Nunc et sem non libero pharetra ornare non a sapien. Donec id ultrices nunc. Sed nec odio vel tortor mattis cursus. Vivamus egestas, mauris a ultrices tempus, metus eros porttitor sapien, vel posuere risus metus eget diam. Nulla volutpat hendrerit faucibus. Vestibulum et dui sit amet lorem venenatis venenatis dignissim vitae dui. Nunc odio felis, faucibus id iaculis sit amet, iaculis vel lorem. Nam suscipit convallis fermentum. Proin euismod libero et eros suscipit ullamcorper. Vestibulum ac ipsum massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean volutpat commodo felis, id molestie tellus dictum eu. Nunc et sem non libero pharetra ornare non a sapien. Donec id ultrices nunc. Sed nec odio vel tortor mattis cursus. Vivamus egestas, mauris a ultrices tempus, metus eros porttitor sapien, vel posuere risus metus eget diam. Nulla volutpat hendrerit faucibus. Vestibulum et dui sit amet lorem venenatis venenatis dignissim vitae dui. Nunc odio felis, faucibus id iaculis sit amet, iaculis vel lorem. Nam suscipit convallis fermentum. Proin euismod libero et eros suscipit ullamcorper. Vestibulum ac ipsum massa.

Show the image without being hyperlinked: {ref:M3#small.center.nolink.title@Small image}. Note that the "title" item is ignored because an alternate description was provided.

There is one final image parameter that can be added to the item field: gallery. When included as shown in Fig. 2, a gallery of responsive tiled photos will be displayed. In this case See Fig. 2

<div class="gallery">
    <div class="gimage">{ref:K01#gallery}</div>
    <div class="gimage">{ref:K02#gallery}</div>
    <div class="gimage">{ref:K03#gallery}</div>
    <div class="gimage">{ref:K04#gallery}</div>
    <div class="gimage">{ref:K05#gallery}</div>
    <div class="gimage">{ref:K06#gallery}</div>
    <div class="gimage">{ref:K07#gallery}</div>
    <div class="gimage">{ref:K08#gallery}</div>
    <div class="gimage">{ref:K09#gallery}</div>
    <div class="gimage">{ref:K10#gallery}</div>
    <div class="gimage">{ref:K11#gallery}</div>
    <div class="gimage">{ref:K12#gallery}</div>
    <div class="gimage">{ref:K13#gallery}</div>
    <div class="gimage">{ref:K14#gallery}</div>
    <div class="gimage">{ref:K15#gallery}</div>
    <div class="gimage">{ref:K16#gallery}</div>
    <div class="gimage">{ref:K17#gallery}</div>
</div>

End

As the small set of examples above show, the built-in blogging features can be used to integrate you post content closely with your genealogy data. It can also be formatted in almost any way HTML allows.