Changes

This is a Howto on how How to make a genealogy website with GRAMPS 2.2Gramps 4.x. and the NarrativeWeb plugin[[Gramps_4.1_Wiki_Manual_-_Reports_-_part_7#Narrated_Web_Site|Narrated Web Site]] report, from conception, to uploading your genealogical website to an internet service provider (ISP).

The This website will be made with the narrative website report, of which the interface is described atthe: [[Generating Gramps_4.1_Wiki_Manual_-_Reports_-_part_7#Narrated_Web_Site|User manual for the Narrated Web pagesSite]]. The goal is to offer a complete howto/tutorial on using this report, from conception, to uploading your genealogical website to an internet service provider (ISP). [[Category:Tutorials|Make a genealogy website with GRAMPS]][[Category:Documentation]]

You can easily generate a nice looking web site from within GRAMPSGramps.

Before you start you should have an idea about the data you want to have present on the website. If you are not careful, and generate a webpage from your complete databasefamily tree is large, the amount number of generated files can be '''huge''', as well as taking and possibly take up a lot of file storage space.

If you have a large database, it is wise to start with a [[filter]] to limit the number of personspeople: In the People view of GRAMPSGramps, go to the View menu, and activate the Filter sidebar. Next, go to ''{{man menu|Edit menu--> Person Filter Editor''}} menu, and make a suitable filter. Read the [http://gramps-project[Gramps_4.org/gramps1_Wiki_Manual_-manual/2.2/en/ch03s10.html_Filters#tools-util-cfe Custom_Filter_Editor|help manual]] if necessary. Once a filter is defined, you can test it in the People view, by selecting the filter in the Filter Sidebar, and clicking find. You can combine filters (yes, it helps if you have experience with some basic and/or logic) until you have a selection of all the people you want on your website.

Before you use the plugin ''NarrativeWebNarrated Web Site report'', you should make some custom pages with the information not yet in GRAMPSGramps: <!-- already part of report in Gramps 4? -->

{{man note|Note that GRAMPS |Gramps works with stylesheets[https://en.wikipedia.org/wiki/Style_sheet_%28web_development%29 style sheets], so the exact ordering, and look of the website is all contained in '''one''' file, the stylesheetstyle sheet, eg narrative.css. You should at this moment NOT concern yourself about style, only content, and some basic markup (paragraphs, italic/bold text, div sections, ...).}}

{{out of date|work differently in gramps 4 }}Go to the Media View in GRAMPSGramps, and click on the add icon. In the ''Select a media object'' dialog, you need to click on the option ''Internal Note'', and give a title, eg ''Home Page'', ''Footer'', ... 

If you know html, you can just type the text with the needed html codes. If you do not know html, consider making a page with a web editor like Bluefish, Quanta Plus, ... . These contain icons to dynamically create webpages. The html text created like this can then be copied in the note section of your ''Home Page'' GRAMPS Gramps media object. Tip: if you are experienced with style, you can use specific div tags in your pages, and edit the style sheet to contain your custom tags.

GRAMPS has some nice standard layout schemes. Those are kept Gramps provides seven built in so-called cascading style sheets (.css files). In GRAMPS 2.2.x, six are suppliedfor you to choose from to determine the appearance or your web pages. You are free to edit these files can choose between Basic (other lettertypesAsh, Blue, Cypress, other coloursLilac, Peach or Spruce color schemes), Mainz, or Nebraska styles...There is also the option of not including a stylesheet (No style sheet).

Whatever the style you choose, after generation, it will default to the ''narrative-screen.css'' file which will can be placed found in the dir you indicate. If you have some experience with websites you can easily customise this one file and without changing the content files, your web pages will be completely changed to the form, colours, etc. that you specified. Do backup these changes, as you might easily regenerate your website and overwrite this file by error<code>css</code> directory.

Examples of If you have some experience with websites you can easily customise this one file and without changing the 6 styles:*Modern - See example [http://familiemalengiercontent files, your web pages will be completely changed to the form, colours, etc.be/ Malengier]*Business - TODO*Certificate - TODO*Antique - See example [http://ancestrythat you specified.queervisionsDo backup these changes, as you might easily regenerate your website and overwrite this file by error.com/ The Coy Yaeger Ancestry Project] *Tranquil - TODO*Sharp - TODO

If you make a nice custom style sheet, please you would like to share with other GRAMPS Gramps users. You can do this by adding a link to your webpage in the examples below and adding to your custom css file and ensuring that its copyright is creative commons alike, and attaching to an feature request or you can send it to the developers on: gramps-devel <at> lists.sourceforge.netto be added.

In the Report menu, choose ''{{man menu|Reports > Web Page--Pages >Narrative Narrated Web Site''...}}.

Chose Choose a suitable directory where you want to generate your website locally. It is best to do this locally, and upload your website only afterwards.

In the '''Report Options Tab''' tab, set select the filter you created. Choose a ''Filter'GOOD'you created previously if any. Change the '' Web site title for your webpage. Choose file extension: html (the rest is for experienced users), Set character encoding '' to something more meaningful to Unicode (only use other encoding if you have very specific reasons)than "My Family Tree". Choose the style you want and set the copyright notice (use the footer for specific extra legalese necessary in your country). ''StyleSheet'Think about copyright!''' Ancestor graph generation relates to the how many ancestors will be visible on the people pages in a nice graphyou want (See [[Gramps_4. Try different settings for this1_Wiki_Manual_-_Reports_-_part_7#Report_Options|examples]]).

In the '''Page Generation Tab''' tab, choose the internal notes you created, as related above. I suggest It is recommended you suppress the GRAMPS "Suppress Gramps ID"'s, as visitors are not interested in this. Be careful with the option ''Include images and media objects''. '''Only choose this option if:# your Your Hosting site can be VERY bighas enough file storage space.# you You extensively use the private marker on sensitive data'''. {{man warn|Be careful with Sensitive data|Many people have burnt themselves with this option, publishing unintentionally published private email conversations they stored for research reasons in GRAMPSGramps, on the net without realisingrealizing.}}

The '''Privacy Tab '''tab {{man menu|is one of the most important settings''' }}. Make it a habit to never include private data, and restrict the information on living people. I suggest It is recommended you set leave the ''years to restrict Years from person's deathto consider living:'' to as the default of a '''minimum of 25 30 years'''! This will prevent grave mistakes having sour consequenceslessen the issue of revealing sensitive data on the internet of living people that may have legal ramifications for you. Many A number of genealogists have found themselves in disputes due to publication of information on living people. You have been warned. Also Please also take into account your local legislation (eg:very strict privacy law in eg Italy, France, ...).

Now To create the report you just click ok select '''OK''' and GRAMPS Gramps starts generating your web page '''Narrated Web Site''' pages : this will take some time depending on the size of your family tree, as a lot of files and directories will be made, so this will take some time. But when it is When completed you will be the proud owner of a complete structure ready to publish on the WWWinternet.

Every time you change make changes to your database family tree you need to regenerate your site to see the changes. Although GRAMPS will regenerate the entire site, '''only the pages with changed dataNarrated Web Site''' will be different. You therefore need not republish all the website report to the internet again, but can limit yourself to only upload the changed pages. Specific tools to do this exist, like sitecopy. See furthersee those changes.

Although Gramps will regenerate the entire site, '''Limitationonly the pages with changed data''': If you upgrade GRAMPSwill be different. You therefore need not republish all the website to the internet again, changes might have happened but can limit yourself to only upload the website generation, meaning all changed pages will have changed. Investigate Specific tools to do this before you upgradeexist, and consider the benefits of upgrading against this possible drawbacklike sitecopy. See further.

There are some free providers around: eg Lycos , but there are maybe better alternatives. Also GRAMPS offers '''free''' hosting of family website. Check out [[GRAMPS:Webhosting|webhosting by the GRAMPS project]].

*ftp/ssh: You can also use a wide range of ftp clients to upload your site. The easiest for new users is in GNOME/KDE, go to Remote Places, and click to add a new remote place. Choose the settings for your provider (ftp/ssh, login, password), and now you can drag and drop files in Nautilius/Konqueror, like on your own PC. You can also use one of the many specific ftp applications, like gFTP (it should be in the repositories of your distribution). Basically you transfer all the files to the server and that's it. However : as you have probably seen, you created with "NarrativeWeb" an awefull awful lot of directories and files, so transferring the vast amount of files will take some time! If you update your site often, consider learning sitecopy!

== Examples of websitesNarrated Web Sites==Feel free to add your with GRAMPS Gramps generated website Narrated Web Site here. Please, remove missing links if you encounter those. Style is one of the GRAMPS Gramps styles, or custom.

{|{{prettytable}} align="center"|- bgcolor="#8DA7D6" align="center" |'''!Site'''||'''Style'''||'''Language'''||'''Comment'''|-|[http://familiemalengier.be/ Malengier] ||Modern || Dutch

|[http://ancestryfamily.queervisionsdave.comorg.uk/ The Coy Yaeger Ancestry ProjectCross Family Tree] ||Antique Basic (Ash)|| English || version 23.2.65-1

|[http://familywww.davexs4all.org.uknl/~bosharst/gramps/ Cross Family TreeVan den Bos - Van der Harst]||Basic (AshSpruce)||EnglishDutch||version 34.1.04 1

There are two types of genealogy websites: static and dynamic. Static pages are ideal if you are limited with webspace, or want full control over your data. You have a genealogical database on your PC, and you select the data you want on a website, you upload this, and you are finished. GRAMPS Gramps website generation belongs in this category.

Dynamic websites have all the genealogical data on a server, and dynamically offer webpages, typically with javascript. This normally requires more disk space, however due to compression of the data, this might not be too bad. Dynamic websites are a great tool to collaborate on genealogical research with other people, as you normally have the option to change the data from within the website. For example, [httphttps://www.phpgedviewwebtrees.net/ PhpGedviewindex.php/en/ webtrees] is an open source project offering exactly this. A possible disadvantage is that for this too work, your service provider must offer you sufficient bandwith, or otherwise serving pages can be slow.

The beauty of open source is that you can choose the environment to work with, and the environment to generate your website with. The benefits of collaborating should also not be exaggerated, however, it might be a good idea to offer in the footer of your GRAMPS Gramps generated website the option to send you feedback, like the example on [https://web.archive.org/web/20061011043802/http://developers.gramps-project.org/tiki-index.php?page=MissingInformationReport this page].

As mentioned, with a standard text editor (gedit) you can adapt your css file. Not happy with the colours or fonts? Change them! The beauty of the cascading style sheet is that if you make a change here, all your pages will change. Dada! Now one thing to watch out for is that if you make changes and you finally obtained a good style sheet, that you save a backup in another directory than the one GRAMPS Gramps made. Why? The next time you let GRAMPS Gramps generate some webpages, the program will re-install the default narrative.css and bye bye changes. You can on regeneration of your website select the option in GRAMPS Gramps to NOT use a css, but this is easily overseen, especially if you generate different websites with different requirements

If everything went according to plan, you can repeat all the steps with a larger number of people. However, be cautious But hold your horses for just a sec First check out the amount of Mb MB this first attempt generated. This is important as your host limits the amount of data you can put on his server. Lycos for example (the free as in beer version) allows you a nifty 50 MbMB. But as your database can hold an unlimited amount of persons and pictures this is easily obtained. A very important parameter is the amount of images (media objects) you put on your site. If you have, say 50 images of 500 Kb KB then half of your diskspace is gone already.

What if your database is really really huge? I did not try this yet, but you could split your data, say ''the descendants of Jacobus Roelants'' on one Lycos site and the other part of the family ''the descendants of Sebadiah Johansson '' on another Lycos site and so on. It should be fairly easy to install links to switch between sites, eg in the home page, as the directory structure GRAMPS Gramps generates does not change. ===Integrate with WordPress==={{stub}} Integrating GRAMPS and WordPress is a very straightforward activity. Not a lot of special skills or tools are required in order to make this integration work smoothly. A couple of points worth remembering (knowing?) first: *Don’t expect to update your GRAMPS data through WordPress. GRAMPS works best from a data collection and manipulation perspective as a stand alone PC application.*Neither database is ever truly linked in this integration;this is good for a number of reasons:**Your GRAMPS database can be secured (remain private)**Breaking one system doesn’t break everything; a good feature for those of us prone to checking our systems recovery processes regularly.*Websites are better for sharing information than they are for updating it. This is especially true if you have constrained network bandwidth, lots of different media and files of varying sizes including many that are BIG! These conditions probably encompass most people doing genealogy. So on to the integration… there are basically 5 major steps: # Get an iframe plug for use in WordPress- I use and like Iframe Embedder from de77.com# Modify one of the pre-existing GRAMPS css templates used by GRAMPS NAVWEB to generate websites to blend with your site look & feel (I use Geany as my css editor)##rename and save the new CSS template in /usr/share/gramps/data/ (Linux path to the templates– maybe one of our readers can tell us what the Windows path might be)##you also need to add the new css option to constants.py in /usr/share/gramps/ReportBase (Linux path to the templates)##if you are running on Linux- like me- you will need root privs to perform the above 2 steps# Go to Reports-Web Pages–Narrated Web Site and generate a web site via this GRAMPS function.# Copy the GRAMPS NAVWEB website that is generated on to your WordPress site somewhere where you will find it.# Generate a Page in WordPress for your GRAMPS Website to be located. Add the following if you are using Iframe Embedder : [ iframe NAVWEB-url 100% 200]   ===Integration of NarrativeWeb in a CMS or MVS=== {{man warn| Warning |This section is a work in progress.}} The feature request was [https://gramps-project.org/bugs/view.php?id=5530 #0005530] :The NarrativeWeb generate flat html files.If you use a MVC or a CMS like itseasy, pmwiki, ... you can't return to the home page.You loose all the look and feel of your website.If we create some php files which include those html files ( mode_rewrite ), it doesn't work because we have headers and </html> in them. CMS=[Content Management System] and MVC=[ Model View Controller ] ====Patch for release 3.4 and 4.2==== The patchs are available and attached to the feature request : [https://gramps-project.org/bugs/view.php?id=5530 #0005530] ====For release 5.0 and above==== The patch will be integrated in 5.0. ====How it works ?==== The following show how to proceed with joomla (3.1.1): I suppose NAVWEB is the directory under your root web site in which you put all the gramps tree.  I suppose I only have html page for gramps. No other html application. The .htaccess in the root web directory has now only the following lines :  RewriteEngine on # rules for narrativeweb RewriteRule ^(.*)\.html$ http://%{HTTP_HOST}/index.php/tree?page=$1.html [QSA,R,L] RewriteRule ^(css/.*)\.css$ http://%{HTTP_HOST}/NAVWEB/$1.css [QSA,R,L] RewriteRule ^(thumb/.*)$ http://%{HTTP_HOST}/NAVWEB/$1 [QSA,R,L] RewriteRule ^((images|img|thumb)\/.*\.(jpeg|jpg|gif|png)$) http://%{HTTP_HOST}/NAVWEB/$1 [QSA,R,L] For Joomla, I installed the plugin : DirectPHP And I create an article named tree in which I put :  {source} <?php $rep = "/var/www/NAVWEB/"; // You can place PHP like this $page = JRequest::getVar('page'); // for security reason, don't allow .. in path $pageok = str_replace("..", "", $page); if ($pageok == "") $pageok = "index.html"; include($rep.$pageok); ?> {/source} ====What is necessary when creating the Narrative Web ?==== save as a tar file. In the Narrative web Report options menu, choose the "CMS inclusion" tab and select the only option of this tab : "Do we include these pages in a cms web ?"

# filename : replaceall # usage: .sh/replaceall X Y # no BACKUP with this script.-------------------------------------------------------

sed -i.BAK "s|$1|$2|g" $i > $i.tmp && mv $i.tmp $i

To name This will find all programs here and below, and changes all X to Y. This uses the -i (in-place edits) available on most sed editor programs. It also creates backup copies (ending in .BAK) of the files that change. You may need to use special escaping characters if you use replaceall.sh with more than just simple letters. Save this as a file named ''replaceall'', give him it executive rights(chmod +x). Then start the script at the root of web site generated by Gramps :

Which will change all instances of "Souche" with "Arbre" in all files ending in .html. To replace more than one word, use double quotes, like:  $ ./replaceall "Souche Family" "Arbre Family Tree" Source :  * [http://pascal.ledisque.free.fr/wordpress/?p=1122 Pascal Le Disqué]* Enhancement by D.S. Blank, Aug 18, 2009

* 5 line Line change on 'NarrativeWeb.py'

<JERpre> add the country icons, using the #PATH# trick # msg _ML = _([ 'Generated by <a href="http:/cgi-bin/gramps-project.orgchangelanguage?fr" title="page en français">' # 'GRAMPS</a> on img alt="drapeau français" title="drapeau français" ' 'src="%(datefr_fname)s') % { 'date' : value } msg = _('Generated by <a href="http://gramps-project.org">' 'GRAMPS</a> on %(date)s \n' , '<a href="/cgi-bin/changelanguage?frpl" title="page en françaisWersja Polska">' '<img srcalt="#PATH#../graphics/nav32x16_fr.pngPolska Flaga" alttitle="FRPolska Flaga"' 'src="%(pl_fname)s" /></a>\n' , '<a href="/cgi-bin/changelanguage?plen" title="Wersja PolskaPage in English">' '<img srcalt="English Flag" title="#PATH#../graphics /nav32x16_pl.pngEnglish Flag" alt' 'src="PL%(en_fname)s"/></a>\n' ' ] </pre> ...  <pre> elif 0 <a hrefcopy_nr < len(_CC): frfnm =os.path.join("graphics"/cgi-bin/changelanguage?en, "nav32x16_fr.png" title) frfnm = self.report.build_url_fname(frfnm, None, self.up) plfnm =os.path.join("graphics"Page in English, "nav32x16_pl.png"><img ) plfnm = self.report.build_url_fname(plfnm, None, self.up) src enfnm ="#PATH#os.path./join("graphics/", "nav32x16_en.png" alt) enfnm = self.report.build_url_fname(enfnm, None, self.up) fname =os.path.join("images", "ENsomerights20.gif"></a>\n) fname = self.report.build_url_fname(fname, None, self.up) text = '' text += _ML[0] % {'fr_fname' : frfnm} text += _ML[1] % {'pl_fname' : plfnm} ) text += _ML[2] % { 'dateen_fname' : value enfnm} msg text += msg_CC[copy_nr] % {'gif_fname' : fname} of.replacewrite('#PATH#\t<p id="copyright">%s</p>\n',path% text) #</JERpre>

BASEHOME='/home/jerome' SITE="$HOME/jerome/Genealgeneal/Sites" BASE="$SITE/www.chailloux.org/public/geneal/gramps' "  

OPT1="of=/home/jerome/jerome/Geneal/Sites$SITE,"

gramps -O $DB --action=report \ --options=name=navwebpage,target=$BASE/fr,$OPT1,$OPT2,$OPT3,$OPT4homenote=N1010,\title="Arbre des familles Chailloux - Å»elaskaŻelaska",homenote=N0100 $OPT

gramps -O $DB --action=report \ --options=name=navwebpage,target=$BASE/pl,$OPT1,$OPT2,$OPT3,$OPT4homenote=N1011,\ title="Drzewo rodziny Chailloux - Å»elaskichŻelaskich",homenote=N0101 $OPT

gramps -O $DB --action=report \ --options=name=navwebpage,target=$BASE/en,$OPT1,$OPT2,$OPT3,$OPT4homenote=N1012,\ title="Chailloux - Żelaska family tree",homenote=N0102 $OPT

[httpPatch on issue://www.gramps-project.org/bugs/view.php?id={{bug|2313 Patch] }} was shared on mailing list.

==Comments==[[Category:Tutorials|Make a genealogy website with Gramps]] If you have any comments, remarks, suggestions or alterations/adaptations or plain questions send me an e-mail frederik.de.richter at pandora.be. You could also edit this wiki page, or use the Talk page. It's free source so use it.[[Category:Documentation]]