Researching and making your own family tree has always been of interest to person. In the era of the virtual world, creating a family tree on your website has taken on a more significant role!
With the new features of the website builder Joomla CCK, you can easily build a family tree on your website! This article will help you step-by-step to create a genealogical tree on your website.
Joomla page builder allows you to make up your own data structure with unlimited nested and multiple categories for each content item. These features allow you, step by step, to make your own family tree with all your relatives! As an example, you can see a ready family tree on the website template Love story - Family tree website template. In family tree page builder - Joomla CCK, we created a full-fledged structure of the genealogical tree. And you can make your own family tree with OrdaSoft website builder!
For start builds a genealogical tree please install website builder on your Joomla website. Read on the link - How to start work with Joomla website builder.
In order to properly form connections for your relatives and create a family tree with CCK Joomla page builder you need building the basic structure. First, you need to build the structure of the family tree.
Family tree on your website will consist of the:
An Entity it`s the class that will merge genealogical tree structure of content in page builder Joomla CCK. For create entity, go to Admin Area -> Components -> OS CCK -> Entities and click on button Add, next you Select Entities type -> OS CCK Entity. In the window that appears, fill in the Name field (Family Tree) and click Save and Close.
Layout serves in order that you could show of your Instance (genealogical tree). Layout - is a form - which you use for add or show the instance (person) in you family tree. Layouts can be many, they are all different and designed for different options. For build a family tree we need to create layouts for add and show person.
In order to build the whole basic structure of the genealogical tree, we need to create a layout of adding a person, with all the necessary fields, such as "name", "surname", "date of birth", "death" and "photo". It is also necessary to create fields with data about parents and children.
For create layout - Add person we need go to Layout builder to menu Layouts ->press button "Add new" -> choose entity, that you created before (family tree)-> and select "Layout type" -> "Add instance".
Next, enter the name of our layout -> Add person
In the middle you can see button New row. By clicking on it you can choose the number of columns for the fist row (from one to four). Select the number of columns in which you will arrange your fields. After you add field you simply take a mouse and Drag&Drop the field that you need from the left column into show area.
The fields are created very easy. Press the button Add New -> and just enter the name of the field and select the necessary value for it. If it is a field for entering "data", such as "name", then select the "text value".
The very important: add new field you may only from "Add instance" layout. In other layouts you may use only the fields created in "Add instance" layout.
In order when you build a family tree that when you click on a person, detailed information about him or her will be revealed, we need to create a layout displaying the person with detailed information.. The scheme for creating Show Instance layout in Joomla page builder is exactly the same as in the previous section. So you can easily create a layout to show detailed information about a person. For create layout - Show person details we need go to Layout builder to menu Layouts ->press button "Add new" -> choose entity and select "Layout type" -> "Show instance".
For a visual example, we built the same structure - Show person - details, as in the family tree website template
For create a family tree with possibiliy to attach other persons (parents or children) to our main person, we create fields in Add person layout -> Attach Child Entities -> press button New and create new fields. Attach Child Entities helps you to make the connection between the main person and his parents or children. When we create a Attach Child Entities, we select the fields that will be displayed. The picture shows the creation of the link Mother and the selection of fields, her name and date of birth.
In order to display your family tree on the the site, you need show all your persons.
For a visual example, we built the same structure - Show all persons like in Family tree website template.
All person layout - frontend view
In order to show a lot of people at once on a page, we need to create a layout for "show All person" with short main information about one person (for example field: "name", "photo", "date of birth"). For this go to - Layouts ->press button "Add new" -> choose entity, that you created before (family tree)-> and select "Layout type" -> "Show instance". Next, just drag & drop the necessary fields that will display on your family tree when showing the person. I remember: there we create some simply "show one person layout" where we will show only main info about person.
Important: every "text field" or "Image field" you may configure for open or redirect to another layout. So for "image" and "person name" - we choose as layout for redirect "Show person details layout" which we created in website builder, before.
For your understanding, you can see with what fields each person was shown in Family tree website template
All person layout - backend view
Next in OrdaSoft Website builder in Layout builder, you need to create layout with "layout type" -> "show all instance". And there you add in loop the simply layout for show one person created before. For this at left panel under "attachment layout" you need select "Add new" and select created before "show one person layout" and with help Drag & Drop - move it to layout view grids
Key moment at time create "show all persons" layout: You need at left panel select "Attachment layout"
After creating a layout to show all our relatives, you can proceed to create a menu item on your website with a family tree! First step go to Joomla website Menu. Next step you need to enter a menu item name - its may be Family tree, how in our example. The next step is to choose a menu for your site that will display the family tree. This could be: main menu, footer menu or any else menu, that created on your website. Next -> "Add new menu" Item button, Next step you need to enter a menu item name - its may be "Family tree", how in our example. Following step will be press button select menu item type There you will need select "OS CCK" -> "Show All Instances Layout" (Please check attachment image).
After you need "choose layout" which you wish connect to this menu. -> open the tab Params -> and select your All Person Layout
An Instance (Person) is the smallest piece of content in CCK Joomla website builder. Add Instance in OrdaSoft website builder very simply. You will add an instance(person) by filling all fields with help "Add Instance layout" (add person layout) that you created before. All you have to do: to fill all the fields about all your persons and make connections between your relatives. For this go to Admin -> Components -> OS CCK -> Instance manager -> New
Now the structure of your genealogical tree is created and you can confidently fill in all the data about your relatives, add photos and establish connections between them. Also, the website builder gives you the opportunity to create the style of your family tree, as you want! Change colors, create frames, indentations - do whatever you want to make your family history web page play with the new colors!
In the same way, the Joomla page builder allows you to build a pedigree not only for people, but also for animals, You may create pedigree club website, and will be useful in professional kennels. By following this link: (Website builder) you may read about other possibilities of CCK Joomla website builder for building your websites.
More info about "How to build a family tree in your website with website builder" you may check in below video: