I recently put together a page with some wedding photos and I wanted to create something a little different than the standard web photo galleries you can find everywhere. I decided to lay out the thumbnails overlapping and clustered on the page, based on their subjects.

My first thought was to mock-up the page using Inkscape then copy and paste coordinates and sizes from its interface. Fortunately Inkscape's file format is dead-simple and all I had to do was write a little script and I could generate HTML and thumbnails straight from my Inkscape layout.

Here's a sample of the HTML and a set of thumbnails created with the script:

The script requires Python, Imagemagick and Templayer running on Linux, but may work with OSX or other Unixen.

1. Download and extract fixed_html_image_layout.tgz

2. Put the images you want to use into the img folder.

3. Open page_layout.svg with Inkscape

4. Make sure that the document is set to use px as default units (File | Document Preferences)

5. Import your images from the img directory into your document, adjusting and position them as you like

6. Save the document.

7. Run this command to create your thumbnails based on the image sizes in the document:

   python generate.py -i
   

8. Edit page_tmpl.html to taste and run this command to create index.html:

   python generate.py
   

9. Open index.html in your web browser. Rinse. Repeat.

The order that the thumbnails will be loaded by the browser depends on the stacking order in the document. If you're making a long page of images I recommend selecting groups of images at the top and moving them to the bottom of the order (Object | Lower to bottom) so that they appear first.

The size of the box in the index.html file is determined by page_tmpl.html, so if you change your page size in the document you need to change page_tmpl.html too.

Tags: Templayer