Recollector User’s Guide

 

Generating a Collection Web Site (with a wizard)

 

You can view your collection on your own computer, but if you want to share your collection with others, you might want to create a web site that displays the items in your collection. Once you put the pages of that web site onto a web server, it can be seen by anybody who is connected to the internet.

 

This section describes how you can generate a set of web pages that constitute a web site of either your entire collection or of a subset.  The set of generated web pages is referred to here as the “collection web site.”  Recollector lets you easily generate a collection web site by using a “wizard.” The wizard is invoked by selecting Generate Web Site (with wizard) from the File menu. This section of the User’s Guide describes the choices you can make in the wizard to customize the contents of your collection web site.

 

Note: This facility of Recollector generates local copies of a set of web pages that constitute the collection web site.  However, to share the web site with others the pages need to be uploaded to the server of a web hosting provider.  Setting up an account with a web hosting provider and uploading your local collection web site files to the provider’s web server are not described here and are not part of the functionality provided by Recollector.  If you do not yet utilize a web hosting service, there are many companies that offer this service, some for free or for a very modest fee.  (Try Googling free web hosting sites.)  These hosting services provide information on how to upload local web pages to the server, so that your web site can be accessed by anybody connected to the internet.  (If a hosting service does not describe how to upload pages to its server, then it is probably a hosting service that you want to avoid.)

 

A collection web site consists of two parts:

 

1)      The per-item pages.  There will be one web page generated for each record in the original collection (or each record in the collection subset, if you are creating a web site for just a subset).

2)      [Optional] An index page, allowing you to index the entries in the web site by one of the database’s fields.

 

The following image shows an example of a generated web page for one item from a collection:

As can be seen in this example, the web pages for individual collection items have an appearance very similar to the Item Details view within Recollector.  Most of the features of the Item Details view are carried over into the web pages:

·         Thumbnail images, that act as clickable hyperlinks to larger image displays.

·         Hyperlinks to other records and to footnote-style extended information displays.

·         Text formatting (e.g. underlining, italics, and bold text).

In addition, you can control which fields are shown in the web pages.  Within Recollector, the Item Details view usually displays all of the fields for which data are present.  When you want to share your collection more widely, by creating a publicly accessible web site, you may not want to share some of the pieces of information that you have.  For example, you may not want to share information about acquisition (who you acquired the item from, how much you paid, etc.).  The web site creation wizard lets you specify which fields to include and which to exclude.

After you pick Generate Web Site (with wizard) from the File menu, the wizard window will be shown. The wizard takes you through a sequence of steps, letting you provide the information needed to configure the web site pages you want. The following illustrations show the sequence of pages displayed by the wizard. You move from one page to the next by clicking on the Next button. You can also use the Back button to go back to an earlier step to modify selections made earlier. Only when you get to the last page is there a Finish button that will start the actual processing and generation of the files for the web site.

Initial wizard page (introduction):

Wizard page for step #1:

Specify a parent directory, where the folder containing the web site files will be placed.  Use the Browse button to navigate to and choose an existing directory.

All of the files that constitute the web site will be created within a folder (directory) located in the specified parent directory.  Use the Folder name field to choose a name for this folder.  The program will initially suggest a name based on the name of your collection.  The full pathname of the folder where the web site files will be created is formed by joining the parent directory and the folder name.  In the image shown below, the full pathname for the target folder is C:\Web Staging Area\Map Collection.  You will be warned if the specified folder already exists, since existing files in that folder may be overwritten.

Choose whether the generated web site should consist of HTML files (with .html filename extensions) or of PHP files (with .php extensions). The default choice is HTML files.  However, if you plan to integrate your web site into a larger web site environment that uses PHP, you can request the generation of PHP files. In addition to generating files with the requested filename extension, if you choose PHP then the generated files will also include code that allows customizing the appearance of the page using PHP.  This is discussed more fully in the section on customizing your pages at the end of this chapter.

In this step of the wizard you can also choose whether to create a web site from your full collection, or only from the records contained in a particular subset. (See the section of the User’s Guide on Subsetting the Collection to learn about subsets and how to create them.)  Note: If a search subset is currently in effect, it will not influence the records chosen for inclusion in the report. Only regular subsets can be used to limit the set of records included in a report.

The following image shows this step of the wizard after having specified a parent directory and after having requested that the web site be based on the records of a particular subset:

Wizard page for step #2:

Choose which fields to include in the web site’s pages, and also choose the order in which the fields will be listed on each page.

Once you are familiar with generating a web site and have found a format that you are happy with and that you expect to re-use in the future, it makes good sense to define a Field Profile that reflects the set of fields (and their order) that you want to use.  (See the section on Creating and using Field Profiles for details on how to define a Field Profile.)  Once you have created an appropriate Field Profile, it is easy to complete this step in the wizard: Just select the fourth radiobutton and then select the particular Field Profile from the drop-down list.

This page in the wizard also lets you make size choices for thumbnail images. If your selection of fields contains any image fields, these will be displayed as thumbnails in the web pages. Specify the maximum height and width for thumbnail images. (Each thumbnail image on a web page itself acts as a hyperlink which, when clicked on, will bring up a full-resolution version of the image in the user’s web browser.  So the size specification for the thumbnail does not affect the resolution with which your images can be seen on the web site.  The thumbnail size specification simply lets you control how much space on each individual web page thumbnail images are allowed to occupy.)

If, in the Item Details view for your collection, an image field’s name is hidden (because you have parenthesized the field name, as described in the Adding a Field section of the Modifying a Collection’s Fields page of the User’s Guide), then the image field name will also be hidden in the generated web page (as shown, for example, in the image at the top of this page).  Also, if you have requested that unlabeled images be centered in the Item Details view (which you can request on the Item Details tab of the Preferences dialog), they will also be centered in the generated web pages (also as shown in the image at the top of this page).

Wizard page for step #3:

Choose how you want the pages in the web site to be ordered. Each web page contains Previous and Next links that allow the user to step through the set of pages.  The sort order specified here controls that chain of links; it has no other effect. You can either use the current sort order of the List view, or you can choose any field as the sorting field (whether or not the field is one of those selected, in the prior step, for inclusion in the web site’s pages), as well as choosing ascending or descending order.

Wizard page for step #4:

In addition to the one-page-per-item part of the web site, you can also create an index page (named index.html or index.php). If you want your web site to contain an index page, specify that here. The index page consists of a table whose rows are links to the pages for the individual items.You can specify up to three fields to be displayed in the rows of the table on the index page.  The rows in the index page are sorted by the first of the selected fields.  All of the entries in the index page are hyperlinks to the corresponding pages.  If you have specified more than one field for the index page display, all of the fields on any given row will act identically as hyperlinks to the same page.

You can choose to include one or more image fields for the any of the three index fields. If you do that, then the index will show a thumbnail, rather than text, in the cell of the index table. If a record has links to more than one image in an image field use in the index, the first two images found will be shown. (Additional images, if you have more than two for a single field of a given record, will not be shown in the index page, but will be shown on the details page for the record.) The thumbnail images on the index page behave, like texts, as hyperlinks to the details page for the given record.  By default, the thumbnail images on the index page are scaled to a height of 100 pixels. You can change this to any value between 10 and 500.

The following image shows an index page (with all index fields containing text):

Note that long text values may be truncated (with ellipses … added) when displayed in the index.

After you have gone through the pages of the wizard and made your choices, click the Finish button. The program will ask whether you want to proceed to a full run, or whether you would like to generate just one page, as a test of the choices you have made:

As you can see from the information displayed in this dialog, if you request a test page then only one web page will be generated, and no index page will be generated. The test page will be displayed in your web  browser and then the program will ask whether to go ahead and execute a full run, or whether to re-enter the wizard to make adjustments to your choices. If you choose to go back into the wizard, all of the choices will be as they were when you previously completed the wizard's steps, so you will only need to make selections for anything that you now want to change. On pages where no changes are needed, just click Next to move to the next page, and repeat until you get to the last page and can click Finish.

When the wizard has completed and the web site has been generated, the program returns to wherever it was before you invoked the wizard.  Any choices you made in the wizard, with regard to fields, subsets, thumbnail size, etc., are changed only for the duration of producing the web site, and the program’s prior settings are reverted to automatically when the generation is complete.

Web site structure

The generated web site is located within the folder specified in the first step of the wizard.  Within that folder will be found the following:

·         Files for the individual pages corresponding to the items in the collection.  If your collection uses the ID # field and has discrete ID # values for each record, then the filenames will be derived from the ID # values.  For example, if a record has an ID # value of 123, then the web page generated for this record will be named 123.html (or 123.php).  If, however, your collection records do not have discrete ID # values, the program will simply assign sequential, numerical filenames for the individual files for the web site (i.e., 1.html, 2.html, etc., or 1.php, 2.php, etc.).

·         An index file, named index.html (or index.php).  This file will only be generated if you requested an index in the fourth step of the wizard.

·         Several javascript and other support files for the web site.  The following files will be present (and must accompany the other files if you move your web site to a server):

o   bg-pup.png

o   header.js

o   footer.js

o   jquery.js

o   popup.js

o   popupstyles.css

o   header.php   [only present if you requested the generation of PHP files]

o   footer.php    [only present if you requested the generation of PHP files]

·         A folder named images.  This folder contains the full-resolution versions of any images contained in your web site’s pages.

·         A folder named thumbnails.  This folder contains the thumbnail-sized versions of any images contained in your web site’s pages.

If you move your web site to the server of a web hosting provider, you must move all of the files in the above list, and you must maintain the directory structure (with images and thumbnails as sub-folders).  The only exception is the case of a web site without images (or thumbnails).  If the images and thumbnails sub-folders are empty, they do not need to be present on the server.

Customizing the appearance of the web pages

Most of the customization in the design of the web site’s pages is done in the second step of the wizard.  In particular, this is where the selection of the fields, and their order of appearance, is determined, and this is also where the size of thumbnail images is set.  However, you can also specify additional content that should appear at the top (header) or at the bottom (footer) of each of your web site’s pages.  This is done by editing the header.js and footer.js files that are found in the web site’s folder.  These javascript files allow you to specify lines of text (including HTML formatting codes) that should appear before or after the rest of the page’s contents.  A typical use for this would be to put a general title atop each page (e.g. John Smith’s Shell Collection).  These javascript files can be edited in any text editor (for example, notepad), and they contain an instructional comment at the top, to help explain their use.  Here is the contents of header.js:

/*
Insert any lines of HTML content you want at the top (header)
of each web page.  Each line must be in the form of a document.write
statement, with double-quoted contents, terminated with a semicolon, such as:

           document.write("<h1 align=\"center\">John Doe's Gem Collection</h1>");

Note, as in the example above, that you must escape any double-quote characters
(by preceding each with a backslash character) that are part of the content
you are including.

The document.write lines can include either simple text or text along
with HTML tags (as in the example above).

You may include as many document.write lines as you want. An empty one
is shown below, as an example. */

document.write("");

To implement the title example shown above (John Smith’s Shell Collection, shown as a large-font [“h2” is “Heading 2”, that implies a moderately large font size], centered title), you could edit the header.js file and add the following line at the end:

document.write("<h2 align=\"center\">John Smith's Shell Collection</h2>");

Similarly, to add custom content to the bottom of the page, edit the footer.js file.

If you are generating files for a PHP web site, then there are two additional header/footer customization files: header.php and footer.php.  These files are included at the top and bottom of each of the individual .php files that are generated.  Initially these files have no active content.  Here is header.php:

<?php
/* This is where you can enter whatever is needed to add a custom header to your page */
?>

You can include whatever PHP code you want (including requests to include other .php files at this point), in order to customize the appearance of the web page.


Back to: Using the Collection

Back to: Recollector - Home Page