Tags

You are probably familiar with ordinary HTML tags. jAlbum also provides a set of special tags that can be used in your template files to help you with various tasks. These tags are executed as the album is generated and are not added to the final web page, only their resulting web code is added to the generated pages.

Testing for variable existence

Not all jAlbum variables are available at all times. If a variable is unavailable, it will show up empty or unexpanded (in the case of the $variable syntax) in the generated page. To prevent this from happening when one can't be certain if a variable exists, test for existence with the following construct. The example adds a link to the next slide in a slide show if there are more slides, if not, the text "at last page" is displayed instead:

<ja:if exists="nextPage">
    <a href="${nextPage}">Next</a>
</ja:if>
<ja:else>
    At last page
</ja:else>

This example test for existence of camera flash information:

<ja:if exists="flash">
    Flash used: ${flash}
</ja:if>
<ja:else>
    No flash information found
</ja:else>

General testing

Any condition can be tested with the follwing syntax:

<ja:if test="true">This will be included</ja:if>
<ja:if test="false">This will NOT be included</ja:if>
<ja:if test="${booleanVariable}">Test a boolean variable</ja:if>
<ja:if test="${variable}" value="4711">Test for a certain value</ja:if>
<ja:if not test="${variable}" value="4711">Test for any but a certain value</ja:if>
<ja:if test="<%=expression%>">General expression test (slower but flexible)</ja:if>
<ja:if test="<%= engine.isHighQualityScaling() %>">
    These images have been scaled with the high quality setting
</ja:if>

Switch tests

If you wish to take several different actions depending on several different values of a variable the ja:switch tag can be more convenient to use than the ja:if tag. This example should tell it all. The ja:default tag is optional:

<ja:switch test="${variable}">
    <ja:case value="one">Uno</ja:case>
    <ja:case value="two">Dos</ja:case>
    <ja:case value="three">Tres</ja:case>
    <ja:default>Otra numero</ja:default>
</ja:switch>

Page inclusion

It is common to want headers/footers/navigation bars or other web elements added to the generated album so that the album better fits to the existing site. This is easily done with the include tag:

<ja:include page="C:\mysite\header.inc" />
<ja:include page="header.inc">This text will show if the page does not exist</ja:include>

The page attribute can either be an absolute file path or a relative path. If it is relative, jAlbum will first search the image directory, then the current skin directory and finally the common "includes" directory.

Note, the path search above applies to .htt templates. When used in other templates, such as .css, the path is relative to the template unless explicitly stated, for example for an include file in the project's root folder
<:include page="${rootImageDirectory}/mycss.css" />

To include pages relative to the output directory, use scriptlets like this:

<ja:include page="<%=new File(outputDirectory, "header.inc")%>" />

Included pages may contain variables, scriptlets and other include tags. This example includes a text file carrying the same base name as an image. Image "foo.jpg" will get text from file "foo.txt" etc. This allows for simple comment inclusion or for adding special html to some images:

<ja:include page="<%= new File(imageDirectory, label+".txt") %>" />

There is also the "once" attribute to the include tag. This makes sure that the page is included one time only. This is suitable for including scriptlets with common code definitions. By only evaluating these scriptlets once, big speed gains can be achieved. Here's an example:

<ja:include once page="commonScripts.inc" />

Adding widget support

By adding the widget tag to a page, you control where jAlbum is to insert widgets into the generated code.

<ja:widget pageType="slide|index" />

If you omit this tag, jAlbum will automatically add a placeholder for widgets just before the closing body tag, unless the user has selected to switch off widget support or if you specify autoWidgetInjection=false as a property of the skin.properties file of your skin.

Iterator tags

Iterators are powerful tags that are central to album skins. They "iterate" or repeat over files or folders of an album. For each iteration or lap, the contents of an iterator is added to the generated page, but before that happens variables are expanded to the relevant values for that specific file and scripts are executed.

Before we continue, here is a minimal iterator example that prints the filenames of the files on the current index page:

<ja:fileiterator>
    ${fileName} <br>
</ja:fileiterator>

When used without the "start" attribute on an index page, the fileiterator only iterates over the files that apply to that web page, so if you've set jAlbum to display 4x4 thumbnails per index page, the fileiterator will iterate over 16 images at a time.

The fileiterator has a number of optional attributes to control the iteraton:

  • category - iterate over specified categories (v14+). Categories are image, folder, video, audio, webPage, webLocation and other, usage is category="image, video, webPage"
  • include - same as category above (v14+).
  • exclude - exclude specified categories (v14+).
  • dirs - Iterate over directories / folders only
  • nodirs - Don't iteratate over directories / folders
  • start - Starting image number where "0" is the very first image. Relative values like "-1" or "+1" refer to previous or next file (slide.htt only)
  • count - Number of iterations to perform
  • step - How to move between iterations. Defaults to "1". Accepts negative numbers to move backwards

The fileiterator is safe in the regard that one cannot refer outside a set of files. Doing so will simply ignore that iteration.

Here is an example that can be added to a slide page. It prints a set of seven small thumbnails that are relative to the current image:

<ja:fileiterator start="-3" count="7">
    <a href="${closeupPath}"><img class="image" src="${thumbPath}" width="<%=thumbWidth/3%>" height="<%=thumbHeight/3%>" border="0" alt="${title}"></a>
</ja:fileiterator>

For index pages one can also use the older rowiterator and coliterator tags. These are practical to use together with tables. The content of the outer "row iterator" is repeated for each row of images and the content of the inner "column iterator" is repeated for each image. Image specific variables only exists within the column iterator:

<!-- Iterate through images and produce an index table -->
<table>
    <ja:rowiterator>
      <tr>
      <ja:coliterator>
        <tr valign="bottom">
          <a href="${closeupPath}">
            <ja:if exists="iconPath">
              <!-- No frames around icons like folders and movie files -->
              <img src="${iconPath}" width="${thumbWidth}" height="${thumbHeight}" border="0">
              <br >
            </ja:if>
            <ja:else>
              <img class="image" src="${thumbPath}"
               width="${thumbWidth}" height="${thumbHeight}" border="0"><br>
            </ja:else>
            <small>${label}</small>
          </a>
        </td>
      </ja:coliterator>
      </tr>
    </ja:rowiterator>
</table>

Enter tag

<ja:enter>
<ja:fileiterator>
    ...
</ja:fileiterator>
</ja:enter>

The enter tag instructs jAlbum to 'see' folder variables within <fileIterator> loops, normally they are not available.

Normally when in a file iterator within "index.htt", the hierarchy of variable scopes looks like this (from outer to inner):

Global variables

Page variables

Current object variables


When using the enter tag the hierarchy of variable scopes is:

Global variables

Current folder variables

Page variables

Current object variables

The safe way to test if the currently iterated object is a folder is to either write:

<ja:if test="${fileCategory}" value="folder">
.
.
</ja:if>

or use a shorter "test for category":

<ja:if category="folder">
.
.
</ja:if>

For example, if you have a top level Folder called A and it contains two subfolders, B and C. Now, when you ask for folderTitle you will get the folder title for the inner folders (B and C) as they hide the corresponding "folderTitle" from the outer context (A).

From version 14.1.10 on index pages you can use fileTitle to obtain the titles of folders B and C without having to use the 'enter' tag.

Commenting

You may naturally use the classic html comment syntax, but if you wish to write a commenty that shouldn't even make it to the genetated pages, use this syntax:

<%-- This comment won't appear in the generated pages --%>

Bypassing scriptlets

If you are generating album pages containing scriptlets that are to be processed by an ASP or JSP engine instead of jAlbum, you need to tell jAlbum to ignore those scriptlets and pass them on to the generated pages. This is done like this:

<ja:ignore>
    <% This could be some ASP code %>
</ja:ignore>

Linking correctly

jAlbum tries to allow flexible linking of images. The user interface allows three types of linkings:

  • Link to original images from index pages or slide pages
  • Link to original images via scaled down slide page
  • Link to scaled down images only

When designing a template, it's important that you use correct variables and existence tests in order for the linking to make sense. The code above shows an example of correct linking from an index page to a slide page or image by using the $closeupPath variable. For the slide page template, the linking should be like this:

<!-- Image, maybe with link to original -->
<ja:if exists=originalPath>
  <a href="${originalPath}">
    <img src="${imagePath}" width="${imageWidth}" height="${imageHeight}"
     border="0" alt="Original image">
  </a>
</ja:if>
<ja:else>
  <img src="${imagePath}" width="${imageWidth}" height="${imageHeight}">
</ja:else>

Creating a custom user interface

Page templates, such as About.htt and Contact.htt. make use of the

<ja:ui> </ja:ui>

You can read more about creating a user interface here.