jAlbum as a site maker

We just released jAlbum 10.4. It should perhaps have been labeled jAlbum 11 cause it's packed with improvements and important bug fixes, but most of the changes go under the hood, so we decided to stay at 10.4. There is actually only one change you can notice in the user interface (hint: right click an empty area of an album project), but it opens the door to a whole world of possibilities:

jAlbum is now not only a tool for making awesome web albums. It's a site maker too :-).

The inspiration

I was passed a link to a website that has a particularly good album integration:

www.tedlansingphotography.com

What you see is a typical photographer's web site, where the images are in focus but there are also links to about, contact and blog pages.

jAlbum is now generic enough to support the making of these types of simple portfolio sites (all but the blog).  Here is a sample site. This is made possible by allowing users to mix .htt pages (html template pages) along with images in their album projects. The .htt files will get processed just like the template pages of skins, but they can contain any html, not just album specific html.

Here are the advantages:

• A user can easily create a custom landing page as an introduction to his album by putting a custom "index.htt" file in the root image folder. With that one present, jAlbum will ignore the skin's "index.htt" file for that folder (that produces the thumbnail overview). This behavior mirrors how web servers treat the existence vs lack of an index.html file in a folder.

• A user wanting to create a site looking like the example above would simply create sub-albums for each sub-section plus three more .htt pages called About.htt, Contact.htt and Blog.htt (the last one simply containing an iframe towards a blog service). To have consistent navigation added to the top of all generated pages, each .htt page includes a standard "page-header.inc" and "page-footer.inc" page provided by the skin (and ultimately generic ones provided by jAlbum if the skin lacks these files)

• To simplify creating these custom "About.htt", "Contact.htt" and "Blog.htt" files, jAlbum has a new context menu called "New page" that grabs an "empty-page.htt" file from the system folder. The template for the empty-page.htt looks like this (double click to open):

Skin developers can easily modify their skins to support full web sites by including a top-level navigation bar that links to the extra .htt pages users create. They should also provide custom "page-header.inc" and "page-footer.inc" files so that any extra pages made by users get the same look and feel and navigation that the album pages have. jAlbum provides code for a simple navigation bar, so a minimal code for skin developers to add can be:

<ja:if test="<%= JAlbumUtilities.hasWebPages(rootFolder) %>">
    <ja:include page="navigation-bar.inc" />
</ja:if>

Sorry for the tech look of that. It's only meant for skin developers. That code first checks if the user has added custom web pages to the top level of the album, and if so adds a navigation bar.

So far, the following skins include site support: Turtle 3.0, Base 2.0, Galleria and Minimal. All are bundled with jAlbum 10.4.

Resource files

A web site is not just about web pages and album images. You also want to include other resources, like a custom logo, favicon, about-page image, css and such. Put those files inside a folder you name "res" (stands for "resources") of your "album project". That folder will automatically be hidden so it's not visually included in the "album" you make, but the whole folder is copied to the final "album" (should be called "site", right?), and all resources within can be referred to via the ${resPath} variable, no matter where in the folder hierarchy you are. 

Conclusion

So does a final site look? Here is a sample made using the Base skin. Notice the new "About" and "Contact" pages. The user didn't have to write one line of html to accomplish that.

You can download and unzip this sample album project if you wish to see how this sample site was made. Just drop the unzipped project folder onto jAlbum 10.4 or above to open it.

I'm excited about the potential this brings! We're not trying to make jAlbum compete with Dreamweaver, but why not make it easy to produce simple, but self contained portfolio sites? As jAlbum albums aren't that well suited for integration with server side CMS tools, making jAlbum produce the full site will so to speak fulfill the initial needs for many photographers wanting their own portfolio site.

The plan is that the next major jAlbum version shall contain a list of "site templates" that pre-populates an album project with all files needed for a full blown web site, but until we're there, this post will probably trigger your feedback and our skin community to tweak their skins to support the making of full web sites too.

Now I'd like to hear what you think!