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:

 

Make generic web pages with jAlbum

 

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):
<ja:include page="page-header.inc" /> <%-- Keep this --%>

<%-- Replace this with your html --%>
    <h1>${title}</h1>
    <div>${comment}</div>

<ja:include page="page-footer.inc" /> <%-- Keep this --%>

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!

 

 

Sign in to post
Add your comment
Post comment
Mark Kelcinski

Mark Kelcinski 9 years ago

I like it. I came up with the idea the other day and googled it and found this thread. I do NOT want to become a web programmer. This reminds me of the days when wordperfect was just a blue screen with white letters and a blinking white cursor. Things have come some far. But I still don't find ANYTHING easy about making a website. The capabilities of jalbum excite me in the sense that I may actually enjoy coming up with an appropriate type of site made totally with jalbum. I figure- why reinvent the wheel? If someone makes the right software to help me get where I wanna be,,,then I'm happy.

acompanhantes sp

acompanhantes sp 9 years ago

That would be actually an interesting research topic, how digital has changed the way people read and write.

Anders Callertun

Anders Callertun 10 years ago

The "view full site" link is only available on the jalbum-site pages and unfortunately not in albums where you currently is forced to use the mobile skin on phones. We have on the todo to handle this better.

With "link domainname" you mean that you would like to use a domain like "kummod.ch" instead of kummod.jalbum.net? That is something we have discussed too....

Widgets should currently have their own css. What do you mean?

adrian schüpbach

adrian schüpbach 10 years ago

the mobile version is unusable at the portfolio pages.
I would like to use a power account for customers for their website.
I can not make it so.

In addition, the following is desirable:
-link domainname directly with album. without iframe.

-widgets with their own css. clean integrated. not somewhere down on the edge.

Laca Molnar

Laca Molnar 10 years ago

Hi,

The skin has nothing to do with the mobile version, which is sent by jalbum server to mobile devices (only on albums hosted on jalbum.net). At the bottom of the page there is a "view full site" link you should click to see the non-mobile version. It is supposed to work for albums too.

/Laza

adrian schüpbach

adrian schüpbach 10 years ago

Look at your portfolio on an iphone.
The mobile version should be able to disable it in the skin.
I have again the problem always.

Laca Molnar

Laca Molnar 10 years ago

You should never edit a page made with jAlbum. One thing is you always lose the edits after a new Make, but you can completely screw up jAlbum web pages by editing in DW. Edit the skin templates (Ctrl-Shift-E) or use code hooks available in some skins.

justmyvision

justmyvision 10 years ago

Very good news! But... When I make a new page and edit the html with for example dreamweaver, jalbum overwrites this changes when I make the album and uploads it. How can I prevent this?

Laca Molnar

Laca Molnar 10 years ago

Gonzalo: I have added this feature now to Base skin. You can try it now: http://jalbum.net/en/skins/skin/Base

Gonzalo

Gonzalo 10 years ago

Is there any way of hiding the file name of the pic (for example, "DSC_0185") while using the Base skin?

I tried using the same color for the text and the page, but it still shows the name on the thumbnail of the browser anyway. Any solution?

Thank you!

Looll

Looll 11 years ago

Thanks Anders, that should do the trick.

Anders Callertun

Anders Callertun 11 years ago

Looll: Uncheck http://jalbum.net/en/users/Looll/settings -> Email notifications -> Show -> New comments on blog posts previously commented on

Looll

Looll 11 years ago

I am already sorry I placed a comment here. Now I get flooded with e-mail notifications I never asked for and cannot switch off. And NO I do not have any watches set.

AndreWolff

AndreWolff 11 years ago

Thanks for the advice David, however the buttons with the links to other albums are made with html:
Tussen de Slufter en de Muy
which has as advantage that they adapt to the text width.
I will replace the slide navigation buttons for png files in a next version.

David Ekholm

David Ekholm 11 years ago

Great Wolff,
PS. Try converting your navigation buttons to png format. Then they blend better with the background as PNGs support transparency. It looks far better than GIF images that aren't produced for the currently used background color.