Creating a FotoWeb template

Creating a FotoWeb template is basically no harder than creating a regular Html page with some JavaScript or Asp code. In this section, we will create a basic FotoWeb template to display images from an archive. We will create the template in small steps by adding an element or two in each step to illustrate the ease of design and how different FotoWeb elements 'hang' together.

3.1 The first step - an Html page

As mentioned earlier, FotoWeb templates are basically Html pages with FotoWeb tags and Fwx extension. So we start by creating a basic Html page.

<HTML>

<HEAD>

<TITLE>My First FotoWeb Template</TITLE>

</HEAD>

<BODY>

Hello World: This is my first FotoWeb template.

</BODY>

</HTML>

Example 34: Primary Fwx page.

Save the page in the site's document folder with an 'fwx' extension, e.g. 'MyGrid.fwx'. Access the page using your browser.

Screenshot 10: A FWX page containing only HTML code.

3.2 Adding the first tag

Now that we have a basic Html page set up, we can add our first FotoWeb tag to it. The tag we will add is 'ListArchives' that generates list of archives on the site.

Note! All new code entries in the examples will me marked blue for easy recognition.

<HTML>

<HEAD>

<TITLE>My First FotoWeb Template</TITLE>

</HEAD>

<BODY>

<H1>Archives on site</H1>

<%$ ListArchives %>

- <%$=archive.name%><BR />

<%$ /ListArchives %>

</BODY>

</HTML>

Example 35: Adding 'ListArchives' tag.

'ListArchives' is a non-empty tag that starts from the first archive on the site and repeats itself until all the archives are enumerated. Every time it is repeated, it holds the information about the archive being enumerated that can be accessed from the tag's variables and conditions in its context. In the example above, we access the 'archive.name' variable of the 'ListArchives' tag to get the name of the archive.

Screenshot 11: Adding 'ListArchives' tag.

Next, we will access some more variables of 'ListArchives' tag to create a better information display. At the same time, we will display the results in a table.

<HTML>

<HEAD>

<TITLE>My First FotoWeb Template</TITLE>

</HEAD>

<BODY>

<H1>Archives on site</H1>

<TR>

<TD><B>Description</B></TD>

</TR>

<%$ ListArchives %>

<TR>

<%$ /ListArchives %>

</TR>

</TABLE>

</BODY>

</HTML>

Example 36: Accessing variables of 'ListArchives' tag.

This time, we are retrieving archive id, name and description all at the same time.

Screenshot 12: Accessing variables of 'ListArchives' tag.

Next, we will evaluate a condition of the 'ListArchives' tag.

<HTML>

<HEAD>

<TITLE>My First FotoWeb Template</TITLE>

</HEAD>

<BODY>

<H1>Archives on site</H1>

<TR>

<TD><B>Description</B></TD>

<TD><B>Current user has access</B></TD>

</TR>

<%$ ListArchives %>

<TR>

<TD>

<%$ if archive.currentUserHasAccess %>

Yes

<%$ else %>

<%$ endif %>

</TD>

<%$ /ListArchives %>

</TR>

</TABLE>

</BODY>

</HTML>

Example 37: Accessing conditions of 'ListArchives' tag.

We are evaluating the 'archive.currentUserHasAccess' condition that informs us whether the currently logged on user has access to the archive or not. This condition can be used to decide whether to show this archive to the users or not

Screenshot 13: Accessing conditions of 'ListArchives' tag.

Finally, we will use the same information to create an archive list that can be displayed on top of the page. The archive names will be presented as links to the same page 'MyGrid.fwx' where the archive id is passed to the page through query string. The description of the archive will be presented as tool tip of the links. The condition 'archive.currentUserHasAccess' will be used to exclude the archives from the list where the currently logged on used does not have access.

<HTML>

<HEAD>

<TITLE>My First FotoWeb Template</TITLE>

</HEAD>

<BODY>

Available archives:

<%$ ListArchives %>

<%$ if archive.currentUserHasAccess %>

<a href="MyGrid.fwx?archiveId=<%$=archive.id %>"

title="<%$ InsertVariable encoding="html"

name="archive.description" /%>">

<%$ InsertVariable encoding="html" name="archive.name" /%> </a> | 

<%$ endif %>

<%$ /ListArchives %>

</BODY>

</HTML>

Example 38: Creating archive list with links and tool tips.

Notice the use of 'InsertVariable' tag that performs an Html encoding on the archive name and description before outputting the results.

Screenshot 14: Creating archive list with links and tool tips.

3.3 Adding 'ImageList' tag

Now we go over to the most important tag in FotoWeb's tag arsenal, 'ImageList' tag. This tag creates image list of the specified archive. The usage of this tag as simple as the 'ListArchives', but this tag offers a much larger collection of variables and conditions and it must be combined with some other tags to get full advantage of it.

We will explore this tag by expanding the previously started example.

<HTML>

<HEAD>

<TITLE>My First FotoWeb Template</TITLE>

</HEAD>

<BODY>

Available archives:

<%$ ListArchives %>

<%$ if archive.currentUserHasAccess %>

<a href="MyGrid.fwx?archiveId=<%$=archive.id %>"

title="<%$ InsertVariable encoding="html"

name="archive.description" /%>">

<%$ InsertVariable encoding="html" name="archive.name" /%> </a> | 

<%$ endif %>

<%$ /ListArchives %>

<%$ ImageList rows=”2” columns=”4” enforceDefault=”rows, columns” %>

You are browsing archive <b>

<%$ InsertVariable encoding="html" name="imageList.currentArchive.name" /%></b>.

<%$ /ImageList %>

</BODY>

</HTML>

Example 39: Adding 'ImageList' tag.

We define 'ImageList' tag with 2 rows and 4 columns through its attributes. We also use 'endforeDefault' attribute to enforce the values of 'rows' and 'columns' attributes as they are specified in the tag definition. This option will ignore these attributes if they are specified through query string or posted data. We did not define the 'archiveId' attribute, therefore, the tag will automatically locate the first archive where the logged on user has access. In our example, it is 'Sample Images' archive. The 'imageList.currentArchive.name' variable gives us the name of the archive that is being processed by the 'ImageList' tag.

Screenshot 15: Adding 'ImageList' tag.

Now comes the interesting part. As you recall, we created the archive list with links to the same page where archive id is passed in as query string parameter. This means that clicking on an archive link on top of the page will navigate back to this page with an addition of '?archiveId=XXXX' in the page URL. When that is done, the 'ImageList' tag will recognize the query string parameter 'archiveId' and work with the archive specified by this parameter rather than using the first archive where the currently logged on user has access. So, if we click on 'Raw Library' in the archive list, the 'ImageList' tag will process this archive and display its name.

Screenshot 16: Adding 'ImageList' tag and using with archive list.

Notice the query string parameter in the URL and the archive name reported by the 'ImageList' tag.

Next we will perform a change and an addition in our template. We will change it by expanding the context of 'ImageList' tag to the whole template. Then we will use some conditions and variables of 'ImageList' tag to display a little more information about the archive.

<%$ ImageList rows=”2” columns=”4” enforceDefault=”rows, columns” %>

<HTML>

<HEAD>

<TITLE>My First FotoWeb Template</TITLE>

</HEAD>

<BODY>

Available archives:

<%$ ListArchives %>

<%$ if archive.currentUserHasAccess %>

<a href="MyGrid.fwx?archiveId=<%$=archive.id %>"

title="<%$ InsertVariable encoding="html"

name="archive.description" /%>">

<%$ InsertVariable encoding="html" name="archive.name" /%> </a> | 

<%$ endif %>

<%$ /ListArchives %>

You are browsing archive <b><%$ InsertVariable encoding="html" name="imageList.currentArchive.name" /%></b>.<BR />

This archive has <%$=imageList.imageCount.inArchive%> images.<BR /> This archive is <%$ ifnot imageList.isSearchable %>not <%$ endif

%>searchable.

</BODY>

</HTML>

<%$ /ImageList %>

Example 40: Expanding context of 'ImageList' tag.

Screenshot 17: Expanding context of 'ImageList' tag.

Since the 'ImageList' is the main tag in this page, we should be able to access its variables anywhere in the page. This flexibility is achieved by expanding the tag's context to the entire template. Now we can even display the archive name in the Html title of the page. In addition, the 'ListArchives' tag can now (internally) get information from the 'ImageList' tag about which archive is currently being processed and set its 'listArchives.isCurrent' condition. We can use this condition to mark the archive in the archive list.

<%$ ImageList rows=”2” columns=”4” enforceDefault=”rows, columns” %>

<HTML>

<HEAD>

<TITLE>Viewing archive '<%$ InsertVariable encoding="html" name="imageList.currentArchive.name" /%>'</TITLE>

</HEAD>

<BODY>

Available archives:
<%$ ListArchives %>

<%$ if archive.currentUserHasAccess %>

<a href="MyGrid.fwx?archiveId=<%$=archive.id %>"

title="<%$ InsertVariable encoding="html"

name="archive.description" /%>"><%$ if listArchives.isCurrent %><b><%$ endif %>

<%$ InsertVariable encoding="html" name="archive.name" /%> <%$ if listArchives.isCurrent %></b><%$ endif %>

</a> | 

<%$ endif %>

<%$ /ListArchives %>

You are browsing archive <b><%$ InsertVariable encoding="html" name="imageList.currentArchive.name" /%></b>.<BR />

This archive has <%$=imageList.imageCount.inArchive%> images.<BR /> This archive is <%$ ifnot imageList.isSearchable %>not <%$ endif

%>searchable.

</BODY>

</HTML>

<%$ /ImageList %>

Example 41: Using variables and conditions of 'ImageList' tag with other tags.

Screenshot 18: Using variables and conditions of 'ImageList' tag with other tags.

3.4 Displaying images

The images are displayed with 'Image' tag. This tag, however, can only exist in the context of 'ImageList', 'ShoppingCartList' and some other tags. These are called 'parent' tags of the 'Image' tag. See 'FotoWeb 7.0 Tag Reference' document for complete lists of parents for 'Image' and other tags.

When 'ImageList' is called with 'rows' and 'columns' attributes, it immediately prepares rows X columns images to be displayed. To actually display these prepares images, the 'ImageRow' and 'Image' tags are used. The 'ImageRow' tag creates the rows for us, just like the '<TR>' tag in Html, while the 'Image' tag works similar to the '<TD>' tag in Html.

Note! For the remainder of this example, we will mostly only display the relevant code snippet of the template. Thus, it should be assumed that these snippets are to be inserted in the main template in correct context.

<%$ ImageList rows=”2” columns=”4” enforceDefault=”rows, columns” %>

. . .

<%$ ImageRow %>

<TR>

<%$ Image %>

<%$ InsertVariable encoding="html" name="image.fileInfo.fileName" /%>

</TD>

<%$ /Image %>

</TR>

<%$ /ImageRow %>

</TABLE>

. . .

<%$ /ImageList %>

Example 42: Displaying images with 'ImageRow' and 'Image' tags.

Screenshot 19: Displaying images with 'ImageRow' and 'Image' tags.

Next, we will utilize the 'preview.fwx' at “<FOTOWEB>/cmdrequest/rest/Preview.fwx” folder to display a preview of the image using the 'foxtoken' created by the 'Image' tag.

<%$ ImageList rows=”2” columns=”4” enforceDefault=”rows, columns” %>

. . .

<%$ ImageRow %>

<TR>

<%$ Image %>

<img src="fotoweb/cmdrequest/rest/Preview.fwx?D=<%$=image.thumbnail.id %>" width="<%$=image.thumbnail.width %>"

height="<%$=image.thumbnail.height %>" border="0"><BR />

<%$ InsertVariable encoding="html" name="image.fileInfo.fileName" /%>

</TD>

<%$ /Image %>

</TR>

<%$ /ImageRow %>

</TABLE>

. . .

<%$ /ImageList %>

Example 43: Using 'preview .dll' to show thumbnails.

Screenshot 20: Using 'preview .dll' to show thumbnails.

Next, we want to add an add-to-album link to the images. To create this link, we need to evaluate the 'currentUser.canModifyAlbums' condition. The link will be created using the default FotoWeb icon. An image is a added to the album using the 'AddToAlbum' command request.

<%$ ImageList rows=”2” columns=”4” enforceDefault=”rows, columns” %>

. . .

<%$ ImageRow %>

<TR>

<%$ Image %>

<img src="fotoweb/cmdrequest/rest/Preview.fwx?D=<%$=image.thumbnail.id %>" width="<%$=image.thumbnail.width %>" height="<%$=image.thumbnail.height %>" border="0"><BR />

<%$ InsertVariable encoding="html" name="image.fileInfo.fileName" /%><BR />

<%$ if currentUser.canModifyAlbums %>

<a href="cmdrequest/AddToAlbum.fwx?f=<%$=image.foxToken %>&SuccessURL=/fotoweb/ViewAlbum.fwx&ErrorURL=/fotoweb/ViewAlbum.fwx">

</a>

<%$ endif %>

</TD>

<%$ /Image %>

</TR>

<%$ /ImageRow %>

</TABLE>

. . .

<%$ /ImageList %>

Example 44: Adding conditional actions to images.

Screenshot 21: Adding conditional actions to images.

3.5 Creating page navigation

We have now set up a basic template that displays

• List of available archives.

• Basic information about the selected archive.

• An image list with thumbnails, file names and option to add an image to the album.

So far so good, but it would be nice to be able to see more than first 8 images of the archives. To do so, we need to utilize the 'PageNavigation' tag. This tag provides navigational data that can be used to create 'go to page' links and 'previous' and 'next' links to navigate through the archives.

. . .

<%$ ifnot imageList.isOnlyPage %>

<%$ PageNavigation maxElements="10" %>

<a href="MyGrid.fwx?position=<%$=page.position %>&archiveid=<%$=imageList.currentArchive.id%>&sorting=ModifiedTimeAsc&search=">

</a>

<%$ if page.isCurrent %><b><%$ endif %>

<%$=page.number %>

<%$ if page.isCurrent %></b><%$ endif %>

<%$ ifnot page.isLast %> | <%$ else %> <%$ endif %> <%$ /PageNavigation %>

<%$ endif %>

</DIV>

Example 45: Adding 'PageNavigation' tag.

Note that we are passing two additional attributes of 'ImageList' tag to 'MyGrid.fwx'. These attributes are 'sorting' and 'search'. Even that we are not using these attributes at this time, we start adding them here for future convenience. These attributes inform 'ImageList' tag about the search criteria to use when retrieving images from Index Manager and the sorting scheme to apply to the final image list.

Screenshot 22: Adding 'PageNavigation' tag.

The page navigation can be even more improved if incorporated with 'ImageList' conditions such as 'imageList.isFirstPage' and 'imageList.islastPage'.

. . .

<%$ ifnot imageList.isOnlyPage %>

<%$ PageNavigation maxElements="10" %>

<a href="MyGrid.fwx?position=<%$=page.position %>&

archiveid=<%$=imageList.currentArchive.id %>&sorting=ModifiedTimeAsc&search=">

<%$ if page.isCurrent %><b><%$ endif %>

<%$=page.number %>

<%$ if page.isCurrent %></b><%$ endif %>

</a>

<%$ ifnot page.isLast %> | <%$ else %> <%$ endif %>

<%$ /PageNavigation %>

<%$ PageNavigation maxElements="1" %>

<%$ if imageList.isFirstPage %>

First | Previous

<%$ else %>

<a href="MyGrid.fwx?position=0&archiveid=<%$=imageList.currentArchive.id %>&sorting=ModifiedTimeAsc&search=">First</a>

<a href="MyGrid.fwx?position=<%$=page.backPosition%>&archiveId=<%$=imageList.currentArchive.id%>&sorting=ModifiedTimeAsc&search=">Previous</a>

<%$ endif %>

<%$ if imageList.isLastPage %>

next | Last

<%$ else %>

<a href="MyGrid.fwx?position=<%$=page.forwardPosition%>&archiveId=<%$=imageList.currentArchive.id%>&sorting=ModifiedTimeAsc&search=">Next</a>

<a href="MYGrid.fwx?position=<%$=imageList.imageCount.availableMatches %>&archiveid=<%$=imageList.currentArchive.id%>&sorting=ModifiedTimeAsc&search=">Last</a>

<%$ endif %>

<%$ /PageNavigation %>

<%$ endif %>

</DIV>

Example 46: Improving page navigation.

Screenshot 23: Improving page navigation.