Tutorial: Create your own custom web style

Prerequisites

This is an advanced tutorial.  It is designed for users who are familiar with the basics of HTML, web sites and DPU.  You will need to know how to use notepad or similar text editor to edit html files as text.  You must be adept at navigating around your hard disk.  It will take approximately an hour.

How it works

WebGen creates a simple database for each web gallery that you generate.  The database contains the title of the gallery and a short description as well as the title and description for each image included in the web gallery.  This database is saved so that the data can be used later to make additions or changes to your gallery.  The first thing WebGen will ask you is where you would like to save your web gallery.  Wherever you choose to save it, a database file (*.dpuw) will be created and a folder will be created that will contain your web gallery HTML pages.  To get the information about each image for the database, WebGen will either prompt you by showing you a picture and giving you an opportunity to add a comment to it, copy information from the image metadata or use information form the database that was previously entered.  Because WebGen keeps a database of this information, if you add a few new images to your website in the future, WebGen will retrieve the previous titles and descriptions from the database and you will only have to add descriptions for new images.  Of course, you can always edit the old descriptions if you like as well.  Once you have responded to the prompts, in a matter of seconds, WebGen will create a set of web pages for you and open a web browser to show you the result.  These web pages are created from template folders stored on your hard drive.  To create your own style you will need to create one of these templates.

Creating your own Web Style

Advanced users can generate their own web styles to create a web gallery with a unique look and feel.  It is important first to understand the WebGen's process in more detail. 

WebGen goes through the following steps to generate a web gallery:

1. Prompt for a location for the database file. 

2. If the database file already exists, fill in the gallery title and description.

3. Collect the new or changed gallery title and description from the user.

4. If the database does not exists, create a data database file to store gallery title, description and all the text data for each image.  This database is in XML format.

5. Create a directory at the same location with same name as the gallery (only without the .dpuw extension)

6. Create a "images" directory under the main gallery directory

7. For each image to be processed, if the image already exists in the database, fill in the information from the database, otherwise fill in the data from the {image title} and {image comment} metadata. If this is also empty, suggest the file name as a title.  If the prompt checkbox is checked, prompt for information to be changed or added. 

8. Copy each image to the gallery "images" directory

9. Create a thumbnail image for each image and copy it to the "images" directory with "-tn" (for thumbnail) appended to the name.

10. Copy all the files from the style directory to the gallery directory and perform all general text substitutions.

11. Find files with {image name} in the name of the file and create a copy of this file for each image WebGen is processing.  Perform image specific text substitutions.

12. Open a web browser on {web home}

Style Folders

For each web style there is a corresponding folder under the DPU application folder(usually "C:/program files/Persnickety Products/Digital Photo Utilities") in the directory WebGen/Styles.  If you look inside a style folder you will see that it is essentially a template or prototype of the web pages that that style generates. 

Create a directory named "My Style" in the DPU application folder/WebGen/Styles folder.  Now when you drag and drop several images to create a web gallery using WebGen, there will be a new style named "My Style" in the list of web styles.  If you select it, enter "My Gallery" for the web gallery title and "A sample web gallery" for description.  Click on OK to generate a web gallery.   Once DPU is done generating the web gallery, it will attempt to open a web browser on the home page, but because there is no home page an error will be generated.  In a Windows explorer window, navigate to the your specified destination directory .  You will find that all your images and thumbnails are copied to a directory called "images" in the main "My Gallery" directory.  Other than that, your web gallery will be empty.  

Text Substitutions

Some of the main work WebGen performs is text substitution.  It looks for key phrases (marked with curly braces { and }) in the html code copied from the style folder and replaces them with information from the database and metadata before placing it in the destination folder. 

Create a file in your web styles directory named "My Style" from above.  Name it "{web home}.htm" (make sure this is the exact name).  Edit the file with notepad and enter the following text:

Now generate another web gallery using your new style by dragging and dropping several images on a WebGen Action.  This time you will see a simple web page appear.   If you choose the menu View and click on the item Source you will see something like the HTML source below:

You will notice that key phrases have been changed to the title and description of your web gallery.  The first line will become the title of the web followed by the HTML command for creating a new line, "<br>."   Similarly the second line becomes the description of the web followed by the new line command.  Finally, the third line will display "This is my first web style!"  You will also notice that the file that is created is named "default.htm" or whatever value you placed in the Home Page field of the web gallery definition.  Any HTML file with "{web home}" in the name will be renamed to the Home Page name when it is copied from the style folder to the destination folder.  It should be noted that other characters in the file name will be ignored.

Now edit your {web home}.htm file to make it look like this (cut and paste if you like):

This will generate a slightly more interesting web page that includes the text "click here" with a link to the first image.  By clicking on the link, the browser will be taken to the first image.  Examine the style source and corresponding web gallery source to understand each substitution.

This is all well and good, but these are very simple web pages.  Now we will try something a little more complex.  We will generate an HTML table with a cell for each image in our gallery.  To do this we use the {web table} key phrase. 

This phrase includes a parameter for the number of columns we would like to have in our table.  Lets say we would like 4 columns.  This means that if we drag 10 images onto the action to generate a Web Gallery using My Style, it will create an HTML table.  The first two rows will have four entries each and the last one will have two.  The next parameter is mysteriously called "cell definition."  The cell definition is the HTML code that will appear inside each table cell.  For example the code:

would generate a table with an "X" in each cell and the same number of cells as images in the drag and drop event.  If you replace the X with more complex code like:

Save the file and generate a web gallery.  You should see a web page with an HTML table of thumbnails which are linked to the full size images.  Try it with different numbers of images and looks and the resultant page's source to get a feeling for how it works.

This is getting more interesting, but its still not much of a gallery since it only has a single html page.  Lets try something a little more complex.  Create a new file called {image name}page.htm.  Edit it with note pad and put the following code in it (cut and paste if you like):

Save your changes.  Because this page has {image name} in the file name, it will be enumerated for each image in the web gallery.  It will generate a web page for each image.  For example, if you drag and drop 5 images (mypic1.jpg - mypic5.jpg) onto an action with this web style five web pages will be generated in the destination folder mypic1page.htm, mypic2page.htm, mypic3page.htm, mypic4page.htm, mypic5page.htm.  The code looks complex, but it isn't too bad.  The first and last line together simply center everything on the page.  The next line will display the title of the image.  Because this page will be generated for each image in the web gallery, it is legal to use image key phrases here.

The third line displays the full sized image.  The fourth line displays the image description.  The fifth line creates a date based on the metadata stored in the image.  Click here for more information on the different parameters available to you.  Substitutions specific to WebGen are listed here.  Finally, the sixth through eighth lines create links to the previous image, home and next image.  There are a couple of things to note here.  First, in the context of web galleries, "previous" or "next" may be used in the same way as "image" for image key phrases that correspond to the image before or after the current image.  For example {previous artist} will generate the metadata corresponding to the artist of the image that came before this image.  Also note that {previous name} and {next name} (and {image name} too for that matter) are image file names without any extension (no .jpg or .htm).  This allows you to create refer to more than one file per image.  One might be "{image name}page.htm" and the other may be "{image name}page2.htm"  You can easily refer to either of these in your code.  However {web home} is a complete file name with extension.  There is only one web gallery home page.

Lets return to our {web home}.htm file and clean up a few final things.  Edit it to look like this:

All we have changed is that the contents of the page is centered, and the link on the thumbnail image now refers to {image name}page.htm file we just created instead of the image itself.  Save your work and generate a new web gallery or two.  Look at the generated HTML code and of course at the gernerated web gallery.  Not bad for two simple files. 

You now have the tools required to generate arbitrarily complex web style or modify the existing web styles.  To see a complete list of key phrases look here and don't forget the WebGen specific key phrases listed here.  You can generate pages with your favorite HTML editor and edit a few items to convert it to a web style template.  Enjoy!

A note about HTML editors and DPU web styles

Web page editors such as Microsoft FrontPage and others can be very powerful and complex.  Sometimes they are a little too powerful for their own good.  In this case, there is a danger that web editors can cause errors in your web page templates.  The behavior is usually that you have a theme that is working, you edit it with your HTML editor and suddenly some items stop getting proper text substitutions.  The common cause of this is that the HTML editor has either added a carriage return/line feed in the middle of a key phrase, or it has substituted a "%20" for a space in a key phrase.  Both of these are problems that currently confuse the text substitution algorithms of DPU.