Customize the "Create Web Site" Script

GEDitCOM II is installed with the "Web Site" extension that can easily create web sites (see web site creation tutorial for details). If you are happy with those web sites you are all set. If you would like something different, however, you have several options. First, you could write you own web site creation from scratch. You can literally design web pages from the ground up. Writing such complex scripts, however, is a difficult task and requires some advanced programming skills. An alternative is to start with the "Web Site" extension, make a copy (or download a copy here), and then edit that copy to get new features. The copy of the extension you intend to edit should be installed in user sections of your GEDItCOM II library (which can be done using the "Install Extensions..." menu command). Once the copy is installed, you open a script for editing by:

  1. Choose "Web Site" in the "Export Data" section of the "Extensions" menu while holding down the option key. The extension will open in the GEDitCOM Editor.
  2. Expand the "Properties" section and click on the "other files" item.
  3. Double click the "Create Web Site.applescript" to open that script for editing in AppleScript editor.

You can edit any script in the extension, but this tutorial assumes you are editing the "Create Web Site.applescript" script, which is for English web site and was written to make some modifications easy (editing the other scripts would be similar). This tutorial explains how to make the easy modifications and points out sections where you could make more elaborate modifications. The topics are:

Change events included in the web site

Event Properties
property eventOut : {"BAPM", "CHR", "CENS", "EMMI", "IMMI", "NATU", "BURI"}
property eventName : {"Baptism", "Christening", "Census", "Emigration", ¬
    "Immigration", "Naturalization", "Burial"}
property eventVerb : {"was baptized", "was christened", ¬
    "is recorded in the census done", "emigrated", "immigrated", ¬
    "was naturalized", "was buried"}

The start of the script defines some global properties that determine which events appear in the web sites. You can edit those properties to customize the events to be output.

The three list variables, eventOut, eventName, and eventVerb define the event output. The eventOut list has GEDCOM tag words for all individual events that will be processed for output. For each item in eventOut, the corresponding item in eventName should be the capitalized name for the event and the corresponding item in eventVerb should be a verb phase appropriate for the event. The verb will be used in a sentence such as "John Smith ______ on 15 May 1687," and the verb fills in the blank.

You can add or delete events, change their names, or change their verbs. You must be careful to have the items in the three lists correctly correspond to each other.

Change attributes included in the web site

Attribute Properties
property attrOut : {"DSCR", "EDUC", "NATI", "OCCU", "RELI", "TITL"}
property attrName : {"Description", "Education", "National or Tribal Origin", ¬
    "Occupation", "Religion", "Nobility Title"}

The start of the script defines some global properties that determine which attributes appear in the web sites. You can edit those properties to customize the attributes to be output.

The two list variables, attrOut and attrName define the attribute output. The attrOut list has GEDCOM tag words for all individual attributes that will be processed for output. For each item in attrOut, the corresponding item in attrName should be the capitalized name for the attribute.

You can add or delete attributes or change their names. You must be careful to have the items in the two lists correctly correspond to each other.

Change the types of image and movie files included in the web site

Image and Movie Types
property mmTypes : {"jpg", "jpeg", "gif", "tif", "tiff", "png", "mov"}
property movieTypes : {"mov"}

The "Create Web Site" script supports only image and movie multimedia files and then only outputs the ones you select in two global properties defined at the beginning of the script.

The list variables mmTypes list all types of multimedia files you want in the web site. This list should only include multimedia objects that browsers are capable of displaying. The movieTypes lists all those types in mmType that are movies rather than images. All others are assumed to be images.

You can add or delete image or movie types using their file type (usually the file extension). If you add a new movie type, be sure to add it to both lists.

Add new class of multimedia

You can include multimedia types other than images and movies, but it takes a little more work. The steps are:

New Class of Multimedia
-- Code from the GetMultimedia(indiRec) Subroutine
  -- button to link to multimedia page
  set mmOut to mmOut & "<td><a href='../media/" & mmHtml & "'>"
  if movieTypes contains mmForm then
    set mmOut to mmOut & "<center>Movie</center><br>"
  else if soundTypes contains mmForm then
    (insert text for button to open web page for sound object)
  else
    set mmOut to mmOut & "<img src='../media/" & mmName & "' ¬
        alt='media' width='96'/>"
  end if
  set mmOut to mmOut & "<br>" & mmTitle & "</a></td>" & return
  
-- Code from the CopyOBJEFile(objeRef) Subroutine
  -- show the object itself
  set mmtext to mmtext & "<br><center>" & return
  if movieTypes contains mmForm then
    set mmtext to mmtext & "<a href='" & mmName & ¬
        "'>Click to see movie</a>" & return
  else if soundTypes contains mmForm then
    (insert code to display and access the multimedia object)
  else
    set mmtext to mmtext & "<img class='mmobject' src='" & ¬
       mmName & "' alt='image' />" & return
  end if
  set mmtext to mmtext & "</center>" & return
  1. Add the type to the mmTypes variables. For example, to add sound files, you might add "mp3" to that list.
  2. Define a property to hold the list of all types in your new class. For example, you might define property soundTypes : {"mp3"}.
  3. Each multimedia object is output on its own page. The individuals have links to those pages. The first task is to support the new class of multimedia in the section that creates that link. The work is done in the GetMultimedia() subroutine (see section to the left). The initial script displays a link with the word "Movie" for movies and displays a thumbnail image (using an img element) for images. The text in red shows how to support a new class of multimedia objects. The code within the conditional branch should define the contents for the link to that object's page.
  4. Finally, the multimedia object is display or made accessible to the user in its own web page. The work is done in the CopyOBJEFile() subroutine (see section to the left). The initial script has a link to movie file or displays image files at full size. The text in green shows how to support a new class of multimedia objects. The code within the conditional branch should allow the user to access with file name in mmName but whatever methods works best.

Customize the output for an individual

You can completely customize the output for each individual, but this task is harder than all others in this tutorial. There are too many options to describe . Instead, here are the key sections of the script to edit to customize further:

Customize the web site's cascading style sheet

If you are proficient at editing cascading style sheets (CSS files), you can easily change all styles in the created web site. The process is:

  1. Create a web site containing all features you would like to change and open the web site in your browser.
  2. Open the file "gcweb.css" (found at the root level of the "GC Site" folder created in step #1) for editing in whatever tool you use for editing cascading style sheets.
  3. Edit the "gcweb.css" file and check your results in your browser until the web site has the appearance you prefer.
  4. Edit the "Create Web Site" script and replace the contents of the CSSText() subroutine with the contents of your new CSS file. Each line of the subroutine adds a line of the CSS file to the css variable.
  5. Save and test the new script