* Website Tree Diagrams with Hyperlinks

[ColeValleyGirl]

This development thread was stimulated by the Adding hyperlinks to pdf family tree charts (19902) discussion and a proposal for a Knowledge Base article on Website Tree Diagrams with Hyperlinks.

A question (for when I get round to looking at the whole subject -- next year I suspect). Would you be willing to build functionality into the "Improve Website..." plugin to 'stitch in' 3-generation trees to individuals' pages (in place of the relevant links currently at the top of each page)? And perhaps also to include a master navigation tree. (I'm assuming the tree generation happens elsewhere -- either in GedMill, a cutdown version of GedMill or SVG-FTG (although I suspect a Lua replacement for the specific elements of GedMill would not be impossible).

To me, it makes sense to put all the 'tinkering' with the website in as few places as possible, rather than have multiple processing steps. We might not be able to eliminate all external steps, but it would be nice to minimise them.

[tatewise]

Yes, that is a reasonable idea.
The 'Map Life Facts' plugin knows how to link its maps into each webpage, so stitching some tree code in the same position should be straightforward.
Adding ToC entries or a tab for larger navigation trees should be easy enough once we decide where they should go.

[ColeValleyGirl]

Thanks, Mike. When I get round to it, I'll update here. Unless you beat me to it

[Valkrider]

Mike & Helen

Is this the sort of tree you are talking about?

gedshow.png (60.91 KiB) Viewed 4758 times

This is an example from my Wordpress plugin. The code is in php but the display is standard CSS. If it would help I can email a copy of both bits of code if you want to use that as a starter. The CSS copes with up to 20 children

[ColeValleyGirl]

Colin, yes that's the type of thing.

[ColeValleyGirl]

Colin, can you send me the code please? I won't have time to look at it any time soon though.

[Valkrider]

Helen, on their way.

[tatewise]

Helen, I have tinkered with the GEDmill minitrees, as you probably knew I would.
They work well with the FH website 'Individual Summary Report (for Web, CD or DVD)' featured Page Type.
However, there are problems with the 'Family Group Sheet (for Web, CD or DVD)' featured Primary Page Type:-

1. GEDmill minitrees focus on Individuals, not Families, so an appropriate minitree for the Husband or Wife must be chosen. That is easy for single partnerships, but gets more complicated when there are multiple partners.
2. The minitree shows the 'current' Individual in a white box, so only the chosen Husband or Wife of a partnership is in a white box and their partner is in a straw box.
3. Only the parents and siblings of the chosen Husband or Wife are shown, and it can be complicated to switch to the parents or siblings of the other partner. This might a reason for keeping the 'See also' section in the web pages.

The process I've used to tinker with is as follows:-

1. Use the Publish > Website & Family Tree CD/DVDs... wizard to create a website package.
2. Run the 'Export Gedcom File' plugin in '(GWC) GEDmill Website Creator' mode to create a GEDCOM.
3. Run the GEDmill product on the Project ...\Public\Export\... GWC UTF8.ged file created above.
   The output is produced in the ...\Public\Export\GEDmill_Output\ folder by default.
4. Run the 'Improve Website or CD DVD HTML' plugin Version 3.1.1 Date 31 Oct 2021 attached ZIP file below.
   Choose the Project's .fh_data\Packages\website\data or equivalent HTML folder.
   On the 'Tree Diagrams' tab, click 'Add GEDmill minitrees to featured pages'.

I've only checked it with FH V7.0, so it may not work with FH V6.2, but the published version would fix that.

It centres the minitrees, but that can be reversed by commenting out plugin line 3973.
It removes the 'See also' section, but can be reversed by commenting out plugin lines 3984/5.
They could both be tick options in the published plugin.

Currently, such options can be changed and the plugin re-run without rebuilding webpages with the FH wizard.
The published version would only insert the minitrees once, but could have an option to remove them.

[ColeValleyGirl]

Mike,

Yes, Gedmill doesn't generate trees family group charts so including them is necessarily going to be a compromise. Ditto including multiple parents -- we might need an facility to select a different tree to navigate vie alternate parents...

As I think I've said before, I forked Gedmill to produce larger trees/boxes as display technology has moved on -- I can send you my forked version if you wish to try it.

However, Colin's code might offer us a way to include the tree generation in the plugin, using his logic and css? (Maybe also incorporating the same sort of details as Gedmill provides. However, that may be a bigger job that we want to contemplate.

SVG-FTG would offer us even more flexibility but at the cost of a learning curve for us and for plugin users.

[tatewise]

The GEDmill minitrees option in the plugin would need caveats to say it is not perfect for Family Group Sheets.

Yes, send me your forked Gedmill and I'll give it a try.

Larger family trees would certainly be beneficial, but the minitree on each page helps visualise the family group without having to switch to another web page. If the minitree was more like a small All Relatives diagram, with perhaps extra generations for grandparents and grandchildren, then maybe the larger trees are not needed.

[ColeValleyGirl]

Sent.

SVG-FTG would be the best choice if we want more generations -- GedMill would need a whole lot of work to do the same thing...

[tatewise]

I have updated the GEDmill.exe but cannot see much difference in the treeI%d.gif/png files produced.
It is version 1.6.6340.16230 size 508 KB (520,192 bytes). What should I expect to see?

I have changed my strategy with 'Family Group Sheet' pages and now include the minitree for both the husband and wife.
That ensures that all siblings and parents are shown albeit in two minitrees one above the other!

SVG-FTG will have to wait for later....

[ColeValleyGirl]

Original GedMill:

gedmill screenshot.jpg (34.97 KiB) Viewed 4563 times

My forked version:

HSW screenshot.png.jpg (82.94 KiB) Viewed 4563 times

The difference is even more visible when the Original GedMill image isn't scaled up to have the same dimensions.

[ColeValleyGirl]

I think that's a great proof of concept, Mike -- if we decide to go the GedMill route I can tweak the images some more if necessary (if I can remember how to do it )

However, before either of us do any more work, I think we ought to review the options and what we're trying to achieve.

IMO, the ideal solution:

• Would not require the user to run two separate programs (and so require them to manually co-ordinate the selection of images, and colour settings, etc.)
• Would cater for a variety of Primary page types (although clearly it isn't feasible to cater for them all).
• Would not dominate the Primary pages (which might push us down the line of vertical trees and/or pop-over trees that appear when you click on an icon, as large families/horizontally oriented trees such as GedMill produces can result in very wide pages (or possibly scroll bars on the tree.)
• Will produce trees that work on a wide variety of websites -- so html, css and js only.

Anything else you can think of?

[tatewise]

I think your ideal solution is fine except that 'Primary' page type should also say 'Secondary' page type.
e.g. Primary may be Family Group Sheet and Secondary may be Individual Summary Report.

However, I suspect users may prefer to have something working now, even if less than ideal, rather than wait months/years.

See the attached Improve Website or CD DVD HTML plugin Version 3.1.2 Date 01 Nov 2021 ZIP file below.
IMO it solves the Family Group Sheet minitrees problems by inserting the Husband's minitree below his name and the Wife's minitree below her name. That shows their respective parents & siblings quite neatly, and neater than All Relatives.
( Currently, it does not handle all scenarios, such as single parent and same-sex partnerships, but illustrates the concept. )

This is what your forked GEDmill produces for me and look just like the original GEDmill:

GEDmill-minitree.png (67.2 KiB) Viewed 4533 times

[Valkrider]

I would suggest that you reconsider the type of display. If you have a large number of children the left right scroll becomes an issue particularly on small screened devices. This is why I created the tree as I did in Gedshow.

[ColeValleyGirl]

Thanks, Colin -- I agree vertical trees are best (which rules out GedMill without major recoding).

[tatewise]

I am not entirely convinced that vertical trees are always better than horizontal ones.
It somewhat depends on which relationships are included, how many generations, and how many in each generation.

What I like about the GEDmill minitrees is that they show all spouses and all siblings of the focus person.
That makes navigating around the family much easier and offers what the FH Family Group Sheet does not provide.
e.g.
In the Anthony Edward MUNRO and Susan Isabel DOWLING Family Group Sheet, how do you switch to each sibling of Anthony and to the other spouses of Anthony and Susan (i.e. Julia and Nigel respectively)?
The GEDmill minitrees offer those links directly.

If those links were added to a vertical tree then I suspect it may not be better than a horizontal tree, and might need vertical scroll bars. In the majority of cases, where the number of children is in single figures, I suspect horizontal trees use the space more efficiently.

I'm not sure viewing FH web pages on a small screen device is going to be easy whatever we do.

[Valkrider]

Mike

All I can say is that it was a criticism that I got from the early version of my plugin and as a result I changed to a vertical tree layout. As more and more website visitors use tablets and phones, particularly those who are not researchers who we share our data with, they are more used to vertical scrolling than horizontal scrolling as this is easier to do.

[tatewise]

Was that use of your trees embedded in the FH generated web pages as discussed here, or some other website design?

[Valkrider]

Was that use of your trees embedded in the FH generated web pages as discussed here, or some other website design?

Mike
As I said when I originally posted about this and the code I offered to share is that this is my experience with my Wordpress plugin. For me the FH fixed web display leaves much to be desired I prefer the dynamic display offered by a php type of solution that only requires the updating of the gedcom file (a small upload) to all the fixed html files generated by FH.

[ColeValleyGirl]

I am not entirely convinced that vertical trees are always better than horizontal ones.
It somewhat depends on which relationships are included, how many generations, and how many in each generation.

GedSite only supports a vertical presentation for the pedigree chart on an individual page (although it's broken on my website at present and on a few others I've checked, but not all of them -- no time to investigate why). TNG offers a choice, as does Ancestry and FamilySearch. SVG probably supports either presentation, but Colin may know better. GedMill only offers horizontal.

I much prefer vertical presentation, with scroll-bars if necessary. Viewing small trees is easy enough vertically or horizontally on a typical PC screen, but large trees cry out for vertical presentation (my brother-in-law is the 17th child of two parents who each had 13 siblings -- a GedMill tree for that family is so wide I need scrollbars even full-width on a 34" screen.)

So vertical presentation (if we were only to provide one option) is the option less likely to produce problematic trees for edge cases. (And as Colin says, it's better for small screens).

The technology involved is a red herring (PHP -- as in TNG, Colin's code and I suspect Ancestry, FamilySearch and the like -- versus HTML/css/js) as in GedSite, GedMill, naked FH and SVG ), except that our solution needs to cater for users who don't have PHP to align with the FH website output.

We may want to support multiple options:

• Horizontal trees (generated in Lua)
• Vertical trees (generated in Lua)
• Externally generated trees (leaving the choice of generator to the slightly more adventurous user, e.g. GedMill or SVG)

We have examples of the logic we can convert to Lua for options 1 and 2 in GedMill and Colin's code, and example css/js for both, so the Lua would not be starting from scratch. Option 3 would have to provide Indi files with a specific naming convention, and some css/js and is probably a documentation exercise, because Mike has already done the bulk of the work to insert the trees into pages, and this will be re-usable for the other options.

[tatewise]

I agree that multiple options is probably the way to go, so users have a choice of tree styles.

As it was close to fully working, I've developed the Improve Website or CD DVD HTML plugin to a state that could be published.
It seems to satisfy the ideal solution, apart from the constraint that GEDmill must be run beforehand.
It supports all likely Primary/Secondary Page types, such as Family Group Sheet, Individual Summary Report, Narrative Reports, Outline Reports, and Record Detail Reports - Individual.
For all the Individual reports it inserts one minitree for the focus person.
For Family Group Sheets, it inserts one minitree under the Husband's name and another under the Wife's name.
It copes with single-parent families and same-sex partnerships, and allows for foreign language versions of reports.
There are options to retain/remove the 'See also' section, left or centre align the minitree, and insert/remove the minitrees.
The plugin minitrees work with websites produced by FH v7.0 and FH v6.2 and probably FH v5.1 too.
The GEDmill program only needs to be re-run if the people & relationships included in the website change significantly.
The plugin simply omits minitrees from any webpages, where they have not been created by GEDmill.

[ississi]

As a user I definitely agree that vertical trees are best - especially if they're wide (eg 13 children), especially if you're sharing your trees with family.

I've been stumped by the fact that free wordpress doesn't enable scripting or plugins as I can't afford to pay for the full version. I'd love the facility to have one big tree and then 3-generation trees on individual/family pages .

Many thanks for thinking about this

[Valkrider]

I've been stumped by the fact that free wordpress doesn't enable scripting or plugins as I can't afford to pay for the full version. I'd love the facility to have one big tree and then 3-generation trees on individual/family pages .

Do you mean a free wordpress.com site? If you have your own webserver then you can run the free wordpress.org version and add whichever plugins you like. There are many cheap webserver providers some as low as $12 a year which would allow you to run a self-hosted version of Wordpress.