The XILG program is intended to automate the process of building simple thumbnail web pages. It has a very simple and (I hope) self explanatory user interface.

You are now ready to press the "Generate" button.

What happens behind the curtains

On pressing the button, the program will now:

1. Create the folder hierarchy based on your chosen destination folder
   
   
   • destination-folder\project-title
   • destination-folder\project-title\originals
   • destination-folder\project-title\thumbnails
     
     
2. Create the following files in destination-folder\project-title
   
   
   • project-title.css
   • project-title.xsl
   
   
   
3. Generate project-title.xml from the image files it finds in the folder given in the top edit box. The program recognises the following image types, by file extension:
   
   
   • JPG, JPEG.
   • GIF
   • TIF,TIFF
   • PNG
   • BMP
   
   
   
4. Use the files generated in steps 2 & 3, and MSXML version3 to create the file
   
   
   • project-title.html
   
   
   

   in the folder

   destination-folder\project-title

   

   
   
   
5. Copy the image files from the images folder indicated into the folder
   
   destination-folder\project-title\originals
   
   

   

6. Generate JPEG thumbnails of the images and write them into the folder
   
   destination-folder\project-title\thumbnails
   
   

   

7. If everything has gone well, there should be a folder tree containing a functional web site of thumbnails, which point to full-sized images.
   
   

   

   
   
   

The "View Page" button will load the new project-title.html into your default Web Browser for viewing.

Advanced Options

• You can customise the fonts and colour of the generated page using the Advanced menu. It is recommended that you experiment and check the results, before finalising your new page. Please note that the Font dialogs use your fonts, which may not be available to people viewing from other computers. If you wish to retain the default fonts, but merely change their colour - simply don't select a font in the dialog, just pick a colour and size.

  Take care when choosing a background colour to pick one which makes the text stand out (or not - if that's what you wish)!

• By default XILG converts all names to lower case - thereby limiting the chance of differing case-sensitivities in the chain from page designer's machine to the web server causing incorrect links. If this is not desired, checking the Preserve Case menu option will mean that the files and link names will retain their original case.

• XILG inserts CSS styles directly into the style element. If you wish to keep the stylesheet seperate, unchecking the menu option Internal CSS will create a CSS file without the stylesheet-wrapper tags and include the stylesheet by using

  @import url(project-name.css).

  This is part of an ongoing effort to make the XML/XSLT code more Mozilla friendly.

• You can tell XILG to preserve the aspect ratio of the images when creating thumbnails. It does this by figuring out which is the long dimension, scaling that to the requested size, then scaling the short dimension by the same amount.

  The minimum dimension for any side is still fixed at 32 pixels. Using this option on a folder of images of widely varying size can result in a generated page that looks quite dreadful. The height and width <img> attributes are not generated when this option is used - sorry.

• New in 2.10 - There is now the option to set a background image for your page. From the Advanced menu choose Background Image... and you will get the following dialog box.

  

  If you require more control over background image placement - then it really is time to get a good reference on Cascading Style Sheets.

Notes

Browser Compatibility

The project-title.html created is an XHTML version 1.0 document that uses a CSS level 1 trick to float the thumbnails in such a way as to avoid using a fixed width table. In browsers older than version 6 this may not work properly. Even more modern browsers may display it incorrectly if their CSS support is not quite perfect. (as of this documentation - 2nd February 2005 - Internet Explorer 6.0 Netscape 6/Mozilla 1.0/Firefox 1.0 and Opera Version 7.0+ work correctly.

Update Amaya 9.0 works much better now. Amaya 8.7 still displays the image layout incorrectly - Amaya is W3Cs's sort-of "reference", but not really browser/editor.

The project-title.xml file may be viewed directly in an XSLT supporting browser, e.g. Internet Explorer 5.5 and above, or Mozilla based browsers such as NetScape 7.0 and above and FireFox 1.0.

Version 2.12

The View button now works properly with non-Internet Explorer based browsers.

Filenames containing ampersands no longer cause HTML generation to fail.

Version 2.13

Fixed versioning and updated documentation.

OS requirements

This program only runs on Windows XP and Windows .NET Server. I suppose you could try to get it to work on Windows NT 4.0 SP6, Windows 2000 and Windows 98/Me, but it requires the GDI+ libraries from Microsoft and 9x/Me will also require the Microsoft Layer for Unicode. If you don't have Internet Explorer 6 or above, you will need to install MSXML v3. There may be other requirements too. Use XP.

Changing the appearance of the generated page

If you know XHTML and CSS you can hack the generated project-title.html to fine tune the appearance of the page. The CSS is embedded within the document's style element, unless the advanced option Internal CSS is disabled - then hacking the project-title.css file is the correct option. For example, to alter the background from the default black to the cute pale yellow that I use for these release notes, simply open project-title.html in a text editor (e.g. Notepad) and change the line that says

html { color : #ffffcc; background-color : black }

to

html {color : #663300; background-color : #ffffcc }

You need to change color as well, because that value is (as you can see) the default for the foreground text. #663300 is the value for this brown text. # means Hexadecimal (base 16) - don't worry too much - Windows Calc.exe can convert it to and from good, old-fashioned, base 10, decimal).

Truly brave souls can hack the XSL and CSS files, then use their favourite XSL tools to generate completely new pages. I recommend MSXSL from Microsoft and Xalan from Apache (although since MSXSL is 28kb and Xalan is around 24Mb, guess which I recommend for the merely curious - but to be fair, Xalan includes a full, open-source alternative to Microsoft's XML parser, called Xerxes, while MSXSL is a thin layer over the XML support built into Windows.)

Credits and Tools

Thanks to Matthew Kirrane for a bug report.
Thanks to Mark Lewis for a bug report.

The example above uses images from Al MacDonald's Diary of a Crazed Mimbanite. They are all copyrighted to Al MacDonald. Don't ask me for copies, go to his web site and laugh rather a lot.

This program is free. If you want the source, email me from my web site at www.maclogo.fsnet.co.uk. It was built using the June 2002 Platform SDK from Microsoft and Visual C++ 6.0 Professional (Service Pack 5).

Graeme P. Bell

---

Home.

Copyright © 2005 Graeme P. Bell. All rights reserved.