From 75bb13e531654a561dc7baa2f2bc594aa4a8fc52 Mon Sep 17 00:00:00 2001
From: Tomas Bzatek <tbzatek@users.sourceforge.net>
Date: Sun, 29 May 2011 19:00:44 +0200
Subject: Introduce new theming system

This extends current templating system to another dimension,
bringing the possibility to have multiple themes generated
at once. The purpose is to be able to switch between multiple
designs, from PC to mobile, classic vs. flat view, slideshow, etc.

For the moment, only the classic theme is available.

Rules:
 * for switching between themes, place a link inside your template
   manually - it's not a cgg concern, only your theming infrastructure
 * don't forget to define different file names for index and album
   pages across different themes
 * it's recommended to keep default theme named as "index.*" to avoid
   showing directory listing on webserver

Notes:
 * some TODOs will be fixed when we have new theme using these advanced
   features (e.g. pictures in album pages)

 * TODO: introduce tag/block conditional system, allow custom user
         defines for each theme/page

 * TODO: deprecate <show_go_up>, <show_exif_table> and <border style>
         in favor of conditionals (these tags belong to theming)
---
 templates/Makefile.am              |  7 +--
 templates/default.xml              | 97 ++++++++++++++++++++++++++++++++++++++
 templates/template-album.tmpl      | 88 ----------------------------------
 templates/template-index.tmpl      | 94 ------------------------------------
 templates/template-view_photo.tmpl | 76 -----------------------------
 templates/template_album.html      | 88 ++++++++++++++++++++++++++++++++++
 templates/template_index.html      | 94 ++++++++++++++++++++++++++++++++++++
 templates/template_picture.html    | 76 +++++++++++++++++++++++++++++
 8 files changed, 359 insertions(+), 261 deletions(-)
 create mode 100644 templates/default.xml
 delete mode 100644 templates/template-album.tmpl
 delete mode 100644 templates/template-index.tmpl
 delete mode 100644 templates/template-view_photo.tmpl
 create mode 100644 templates/template_album.html
 create mode 100644 templates/template_index.html
 create mode 100644 templates/template_picture.html

(limited to 'templates')

diff --git a/templates/Makefile.am b/templates/Makefile.am
index 45c3baf..8826487 100644
--- a/templates/Makefile.am
+++ b/templates/Makefile.am
@@ -3,11 +3,12 @@ NULL =
 templatesdir = $(datadir)/cgg
 
 templates_DATA =			\
+	default.xml			\
+	template_album.html		\
+	template_index.html		\
+	template_picture.html		\
 	scripts-general.js		\
 	styles.css			\
-	template-album.tmpl		\
-	template-index.tmpl		\
-	template-view_photo.tmpl	\
 	$(NULL)
 
 EXTRA_DIST = $(templates_DATA)
diff --git a/templates/default.xml b/templates/default.xml
new file mode 100644
index 0000000..67470c0
--- /dev/null
+++ b/templates/default.xml
@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="utf-8"?>
+<design_setup>
+
+  <!-- image size definitions -->
+  <image_sizes>
+    <!-- "original", "preview" and "thumbnail" sizes are somewhat special here
+         in order to keep compatibility with previous versions. In case when
+         "original" size is not available due to <nofullsize> tag present,
+         the "preview" size will be used instead.  -->
+
+    <!-- Meaning of "original" is shifted here from previous versions;
+         it's considered more like a bigger preview size for large screens now. -->
+    <!--  corresponds with mandatory <item src> tag in album source file  -->
+    <size name="original">
+      <landscape w="1200" h="800" />
+      <portrait w="1024" h="1024" />
+      <quality value="97" />
+      <!-- With presence of the "no_resize" tag, no resizing will be done and
+           image file will be copied as is (this is a default for backwards
+           compatibility). -->
+      <no_resize />
+    </size>
+
+    <!--  corresponds with optional <item preview> tag in album source file  -->
+    <size name="preview">
+      <landscape w="1067" h="600" />
+      <portrait w="800" h="800" />
+      <quality value="95" />
+    </size>
+
+    <!-- Thumbnail section is mandatory. -->
+    <!--  corresponds with optional <item thumbnail> tag in album source file  -->
+    <size name="thumbnail">
+      <landscape w="180" h="120" />
+      <portrait w="120" h="180" />
+      <square size="180" />
+      <quality value="80" />
+    </size>
+
+    <!-- Here you can define custom sizes which will be generated from the file
+         defined in <item src> tag. Currently, there's no way how to supply custom
+         sized images from album source file (might be changed in the future). -->
+    <size name="mobile">
+      <landscape w="320" h="240" />
+      <portrait w="240" h="320" />
+      <quality value="90" />
+    </size>
+  </image_sizes>
+
+  <!-- Global support files, common files used by several themes. -->
+  <supplemental_files><![CDATA[
+  ]]></supplemental_files>
+
+
+  <!--  particular design setup  -->
+  <theme enabled="yes">
+    <!-- When the <index> structure is missing, album design will be used for
+         both list of albums and list of pictures. -->
+    <index>
+      <template>template_index.html</template>
+      <target_filename>index.html</target_filename>
+    </index>
+
+    <!-- This is mandatory. -->
+    <album>
+      <template>template_album.html</template>
+      <target_filename>index.html</target_filename>
+      <!--  which picture size to use for XXX tags (TODO)  -->
+      <picture_size>preview</picture_size>
+    </album>
+
+    <!-- When the <picture> structure is missing, no pages for the particular
+         images will be generated. Images are processed in either case, for use
+         with album alone. -->
+    <picture>
+      <template>template_picture.html</template>
+      <!--  '%s' will be replaced with actual picture filename  -->
+      <target_filename>%s.html</target_filename>
+      <!--  which picture size to use  -->
+      <picture_size>preview</picture_size>
+    </picture>
+
+    <!--  support files for current theme                                 -->
+    <!--  should include all used CSS styles, images, scripts...          -->
+    <!--  subdirectories are allowed and will be mirrored to destination  -->
+    <supplemental_files><![CDATA[
+      styles.css
+      scripts-general.js
+    ]]></supplemental_files>
+  </theme>
+
+  <!-- Here you can define another theme, with different templates etc.
+       The purpose is to allow switching between them or as a result of
+       device capabilities autodetection. Don't forget to change target
+       filenames to avoid conflicts.  -->
+
+</design_setup>
diff --git a/templates/template-album.tmpl b/templates/template-album.tmpl
deleted file mode 100644
index 9f31fb3..0000000
--- a/templates/template-album.tmpl
+++ /dev/null
@@ -1,88 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head profile="http://www.w3.org/2005/10/profile">
-	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-	<title>$(PAGE_TITLE)</title>
-<!-- $(CGG_META_TAGS) -->
-<!-- $(CGG_ATOM_FEED_TAGS) -->
-	<link href="$(TEMPLATES_PATH)styles.css" type="text/css" rel="stylesheet" media="screen, print" />
-	<script type="text/javascript" src="$(TEMPLATES_PATH)scripts-general.js"> </script>
-</head>
-<body>
-
-
-<!--  ##  Navigation bar  -->
-<div class="navigation">
-  <div class="navlinks"><!-- $(NAV_BAR) --></div>
-  <div class="navposition">
-    <span class="navposnumber"><!-- $(TOTAL_ITEMS) --> items</span>
-  </div>
-</div>
-
-
-<div class="master_content">
-  <!--  ##  Description  -->
-  <div class="description">
-    <!-- $(BEGIN_GO_UP) -->
-    <div class="desc_go_up">:. <a href="$(GO_UP_LINK)">Go Up</a></div>
-    <!-- $(END_GO_UP) -->
-    <div class="desc_title"><!-- $(TITLE) --></div>
-    <div class="desc_text"><!-- $(DESCRIPTION) --></div>
-  </div>
-
-  <!--  ##  Images  -->
-  <div class="album_thumbs">
-  <!-- $(BEGIN_IMG_LIST) -->
-    <!-- $(BEGIN_IMG_LIST_LANDSCAPE) -->
-      <div class="album_item">
-        <div class="position_marker" id="$(IMG_LIST_ID)"></div>
-        <a href="$(IMG_SUBPAGE)">
-          <img src="$(IMG_THUMBNAIL)" width="$(IMG_SIZE_THUMB_W)" height="$(IMG_SIZE_THUMB_H)" alt="$(IMG_TITLE)" />
-          <span class="album_thumb_text"><!-- $(IMG_FILENAME) --></span>
-        </a>
-      </div>
-    <!-- $(END_IMG_LIST_LANDSCAPE) -->
-    <!-- $(BEGIN_IMG_LIST_PORTRAIT) -->
-      <div class="album_item">
-        <div class="position_marker" id="$(IMG_LIST_ID)"></div>
-        <a href="$(IMG_SUBPAGE)">
-          <img src="$(IMG_THUMBNAIL)" width="$(IMG_SIZE_THUMB_W)" height="$(IMG_SIZE_THUMB_H)" alt="$(IMG_TITLE)" class="portrait" />
-          <span class="album_thumb_text"><!-- $(IMG_FILENAME) --></span>
-        </a>
-      </div>
-    <!-- $(END_IMG_LIST_PORTRAIT) -->
-    <!-- $(BEGIN_IMG_LIST_SQUARED) -->
-      <div class="album_item">
-        <div class="position_marker" id="$(IMG_LIST_ID)"></div>
-        <a href="$(IMG_SUBPAGE)">
-          <img src="$(IMG_THUMBNAIL)" width="$(IMG_SIZE_THUMB_W)" height="$(IMG_SIZE_THUMB_H)" alt="$(IMG_TITLE)" class="squared" />
-          <span class="album_thumb_text"><!-- $(IMG_FILENAME) --></span>
-        </a>
-      </div>
-    <!-- $(END_IMG_LIST_SQUARED) -->
-    <!-- $(BEGIN_LIST_SEPARATOR) -->
-      <div class="separators">
-        <div class="index_separator"><!-- $(LIST_SEPARATOR_TITLE) --></div>
-      </div>
-    <!-- $(END_LIST_SEPARATOR) -->
-    <!-- $(BEGIN_LIST_INTERSPACE) -->
-      <div class="interspace">
-        <div class="index_interspace"><!-- $(LIST_INTERSPACE_TITLE) --></div>
-      </div>
-    <!-- $(END_LIST_INTERSPACE) -->
-  <!-- $(END_IMG_LIST) -->
-  </div>
-
-  <!--  ##  Footnote, also acts as a bottom border  -->
-  <div class="footnote">
-    <div class="desc_text"><!-- $(FOOTNOTE) --></div>
-  </div>
-</div> <!-- end of master_content -->
-
-
-<!--  ##  Footer  -->
-<div class="footer"><!-- $(FOOTER) --></div>
-
-</body>
-</html>
diff --git a/templates/template-index.tmpl b/templates/template-index.tmpl
deleted file mode 100644
index 01de113..0000000
--- a/templates/template-index.tmpl
+++ /dev/null
@@ -1,94 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head profile="http://www.w3.org/2005/10/profile">
-	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-	<title>$(PAGE_TITLE)</title>
-<!-- $(CGG_META_TAGS) -->
-<!-- $(CGG_ATOM_FEED_TAGS) -->
-	<link href="$(TEMPLATES_PATH)styles.css" type="text/css" rel="stylesheet" media="screen, print" />
-	<script type="text/javascript" src="$(TEMPLATES_PATH)scripts-general.js"> </script>
-</head>
-<body>
-
-
-<!--  ##  Navigation bar  -->
-<div class="navigation">
-  <div class="navlinks"><!-- $(NAV_BAR) --></div>
-  <div class="navposition">
-    <span class="navposnumber"><!-- $(TOTAL_ITEMS) --> albums</span>
-  </div>
-</div>
-
-
-<div class="master_content">
-  <!--  ##  Description  -->
-  <div class="description">
-    <!-- $(BEGIN_GO_UP) -->
-    <div class="desc_go_up">:. <a href="$(GO_UP_LINK)">Go Up</a></div>
-    <!-- $(END_GO_UP) -->
-    <div class="desc_title"><!-- $(TITLE) --></div>
-    <div class="desc_text"><!-- $(DESCRIPTION) --></div>
-  </div>
-
-  <!--  ##  Albums  -->
-  <div class="index_thumbs">
-  <!-- $(BEGIN_IMG_LIST) -->
-    <!-- $(BEGIN_IMG_LIST_LANDSCAPE) -->
-      <div class="index_item">
-        <div class="position_marker" id="$(IMG_LIST_ID)"></div>
-        <a href="$(ALBUM_SUBPATH)">
-           <img src="$(IMG_THUMBNAIL)" width="$(IMG_SIZE_THUMB_W)" height="$(IMG_SIZE_THUMB_H)" alt="" />
-           <span class="album_text"><!-- $(IMG_TITLE) --></span><br />
-           <span class="album_subtext"><!-- $(IMG_DESCRIPTION) --></span>
-           <span class="album_note">(<!-- $(ALBUM_NUM_ITEMS) --> items)</span>
-        </a>
-      </div>
-    <!-- $(END_IMG_LIST_LANDSCAPE) -->
-    <!-- $(BEGIN_IMG_LIST_PORTRAIT) -->
-      <div class="index_item">
-        <div class="position_marker" id="$(IMG_LIST_ID)"></div>
-        <a href="$(ALBUM_SUBPATH)">
-           <img src="$(IMG_THUMBNAIL)" width="$(IMG_SIZE_THUMB_W)" height="$(IMG_SIZE_THUMB_H)"  alt="" />
-           <span class="album_text_portrait"><!-- $(IMG_TITLE) --></span><br />
-           <span class="album_subtext_portrait"><!-- $(IMG_DESCRIPTION) --></span>
-           <span class="album_note">(<!-- $(ALBUM_NUM_ITEMS) --> items)</span>
-        </a>
-      </div>
-    <!-- $(END_IMG_LIST_PORTRAIT) -->
-    <!-- $(BEGIN_IMG_LIST_SQUARED) -->
-      <div class="index_item">
-        <div class="position_marker" id="$(IMG_LIST_ID)"></div>
-        <a href="$(ALBUM_SUBPATH)">
-           <img src="$(IMG_THUMBNAIL)" width="$(IMG_SIZE_THUMB_W)" height="$(IMG_SIZE_THUMB_H)"  alt="" />
-           <span class="album_text_squared"><!-- $(IMG_TITLE) --></span><br />
-           <span class="album_subtext_squared"><!-- $(IMG_DESCRIPTION) --></span>
-           <span class="album_note">(<!-- $(ALBUM_NUM_ITEMS) --> items)</span>
-        </a>
-      </div>
-    <!-- $(END_IMG_LIST_SQUARED) -->
-    <!-- $(BEGIN_LIST_SEPARATOR) -->
-      <div class="separators">
-        <div class="album_list_separator"><!-- $(LIST_SEPARATOR_TITLE) --></div>
-      </div>
-    <!-- $(END_LIST_SEPARATOR) -->
-    <!-- $(BEGIN_LIST_INTERSPACE) -->
-      <div class="interspace">
-        <div class="album_list_interspace"><!-- $(LIST_INTERSPACE_TITLE) --></div>
-      </div>
-    <!-- $(END_LIST_INTERSPACE) -->
-  <!-- $(END_IMG_LIST) -->
-  </div>
-
-  <!--  ##  Footnote, also acts as a bottom border  -->
-  <div class="footnote">
-    <div class="desc_text"><!-- $(FOOTNOTE) --></div>
-  </div>
-</div> <!-- end of master_content -->
-
-
-<!--  ##  Footer  -->
-<div class="footer"><!-- $(FOOTER) --></div>
-
-</body>
-</html>
diff --git a/templates/template-view_photo.tmpl b/templates/template-view_photo.tmpl
deleted file mode 100644
index 7557846..0000000
--- a/templates/template-view_photo.tmpl
+++ /dev/null
@@ -1,76 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head profile="http://www.w3.org/2005/10/profile">
-	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-	<title>$(PAGE_TITLE)</title>
-<!-- $(CGG_META_TAGS) -->
-<!-- $(CGG_ATOM_FEED_TAGS) -->
-	<link href="$(TEMPLATES_PATH)styles.css" type="text/css" rel="stylesheet" media="screen, print" />
-	<script type="text/javascript" src="$(TEMPLATES_PATH)scripts-general.js"> </script>
-</head>
-<body onload="javascript: read_exif_table_cookie(); preload_image('$(IMG_SRC_PRELOAD)');">
-
-
-<!--  ##  Navigation bar  -->
-<div class="navigation">
-  <div class="navlinks"><!-- $(NAV_BAR) --></div>
-  <div class="navposition">
-    <span class="navposnumber"><!-- $(FILE_NO) --></span> of <span class="navposnumber"><!-- $(TOTAL_ITEMS) --></span>
-    <span class="navposspacer"></span>
-    <a href="$(LINK_PREV)">&lt; Previous</a> :: <a href="$(LINK_NEXT)">Next &gt;</a>
-  </div>
-  <div class="navexif">ISO <!-- $(EXIF_ISO) --> :: <!-- $(EXIF_TIME) --> :: <!-- $(EXIF_APERTURE) --> :: <!-- $(EXIF_FOCAL_LENGTH) --></div>
-</div>
-
-
-<div class="master_content">
-  <!--  ##  Description  -->
-  <div class="description">
-    <div class="desc_title"><!-- $(TITLE) --></div>
-    <div class="desc_text"><!-- $(DESCRIPTION) --></div>
-  </div>
-
-  <!--  ##  Image  -->
-  <div class="img_preview">
-    <a href="$(LINK_NEXT)"><img src="$(IMG_SRC_BIG)" width="$(IMG_SIZE_BIG_W)" height="$(IMG_SIZE_BIG_H)" alt="" id="$(IMG_BORDER_STYLE)" /></a>
-    <!-- $(BEGIN_IMG_FULLSIZE_LINK) -->
-    <div class="img_preview_full">
-      <a href="$(IMG_SRC_FULL)">See original size (<!-- $(IMG_SIZE_ORIG_W) -->x<!-- $(IMG_SIZE_ORIG_H) -->)</a>
-    </div>  
-    <!-- $(END_IMG_FULLSIZE_LINK) -->
-  </div>
-
-  <!-- $(BEGIN_EXIF_TABLE) -->
-  <!--  ##  EXIF  -->
-  <div class="exif">
-    <div id="exif_table" style="display: none;">
-      :: <a href="javascript: set_exif_table_visibility('no'); write_exif_table_cookie('no');">Hide EXIF</a>
-      <table><tbody>
-        <tr><td>Date: </td>            <td><!-- $(EXIF_DATE) --></td></tr>
-        <tr><td>Camera: </td>          <td><!-- $(EXIF_CAMERA_MODEL) --></td></tr>
-        <tr><td>ISO: </td>             <td><!-- $(EXIF_ISO) --></td></tr>
-        <tr><td>Focal length: </td>    <td><!-- $(EXIF_FOCAL_LENGTH) --></td></tr>
-        <tr><td>Aperture value: </td>  <td><!-- $(EXIF_APERTURE) --></td></tr>
-        <tr><td>Exposure time: </td>   <td><!-- $(EXIF_TIME) --></td></tr>
-        <tr><td>Flash: </td>           <td><!-- $(EXIF_FLASH) --></td></tr>
-      </tbody></table>
-    </div>
-    <div id="exif_line" style="display: block;">
-      :: <a href="javascript: set_exif_table_visibility('yes'); write_exif_table_cookie('yes');">Show EXIF</a>
-    </div>
-  </div>  
-  <!-- $(END_EXIF_TABLE) -->
-
-  <!--  ##  Footnote, also acts as a bottom border  -->
-  <div class="footnote">
-    <div class="desc_text"><!-- $(FOOTNOTE) --></div>
-  </div>
-</div> <!-- end of master_content -->
-
-
-<!--  ##  Footer  -->
-<div class="footer"><!-- $(FOOTER) --></div>
-
-</body>
-</html>
diff --git a/templates/template_album.html b/templates/template_album.html
new file mode 100644
index 0000000..9f31fb3
--- /dev/null
+++ b/templates/template_album.html
@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head profile="http://www.w3.org/2005/10/profile">
+	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+	<title>$(PAGE_TITLE)</title>
+<!-- $(CGG_META_TAGS) -->
+<!-- $(CGG_ATOM_FEED_TAGS) -->
+	<link href="$(TEMPLATES_PATH)styles.css" type="text/css" rel="stylesheet" media="screen, print" />
+	<script type="text/javascript" src="$(TEMPLATES_PATH)scripts-general.js"> </script>
+</head>
+<body>
+
+
+<!--  ##  Navigation bar  -->
+<div class="navigation">
+  <div class="navlinks"><!-- $(NAV_BAR) --></div>
+  <div class="navposition">
+    <span class="navposnumber"><!-- $(TOTAL_ITEMS) --> items</span>
+  </div>
+</div>
+
+
+<div class="master_content">
+  <!--  ##  Description  -->
+  <div class="description">
+    <!-- $(BEGIN_GO_UP) -->
+    <div class="desc_go_up">:. <a href="$(GO_UP_LINK)">Go Up</a></div>
+    <!-- $(END_GO_UP) -->
+    <div class="desc_title"><!-- $(TITLE) --></div>
+    <div class="desc_text"><!-- $(DESCRIPTION) --></div>
+  </div>
+
+  <!--  ##  Images  -->
+  <div class="album_thumbs">
+  <!-- $(BEGIN_IMG_LIST) -->
+    <!-- $(BEGIN_IMG_LIST_LANDSCAPE) -->
+      <div class="album_item">
+        <div class="position_marker" id="$(IMG_LIST_ID)"></div>
+        <a href="$(IMG_SUBPAGE)">
+          <img src="$(IMG_THUMBNAIL)" width="$(IMG_SIZE_THUMB_W)" height="$(IMG_SIZE_THUMB_H)" alt="$(IMG_TITLE)" />
+          <span class="album_thumb_text"><!-- $(IMG_FILENAME) --></span>
+        </a>
+      </div>
+    <!-- $(END_IMG_LIST_LANDSCAPE) -->
+    <!-- $(BEGIN_IMG_LIST_PORTRAIT) -->
+      <div class="album_item">
+        <div class="position_marker" id="$(IMG_LIST_ID)"></div>
+        <a href="$(IMG_SUBPAGE)">
+          <img src="$(IMG_THUMBNAIL)" width="$(IMG_SIZE_THUMB_W)" height="$(IMG_SIZE_THUMB_H)" alt="$(IMG_TITLE)" class="portrait" />
+          <span class="album_thumb_text"><!-- $(IMG_FILENAME) --></span>
+        </a>
+      </div>
+    <!-- $(END_IMG_LIST_PORTRAIT) -->
+    <!-- $(BEGIN_IMG_LIST_SQUARED) -->
+      <div class="album_item">
+        <div class="position_marker" id="$(IMG_LIST_ID)"></div>
+        <a href="$(IMG_SUBPAGE)">
+          <img src="$(IMG_THUMBNAIL)" width="$(IMG_SIZE_THUMB_W)" height="$(IMG_SIZE_THUMB_H)" alt="$(IMG_TITLE)" class="squared" />
+          <span class="album_thumb_text"><!-- $(IMG_FILENAME) --></span>
+        </a>
+      </div>
+    <!-- $(END_IMG_LIST_SQUARED) -->
+    <!-- $(BEGIN_LIST_SEPARATOR) -->
+      <div class="separators">
+        <div class="index_separator"><!-- $(LIST_SEPARATOR_TITLE) --></div>
+      </div>
+    <!-- $(END_LIST_SEPARATOR) -->
+    <!-- $(BEGIN_LIST_INTERSPACE) -->
+      <div class="interspace">
+        <div class="index_interspace"><!-- $(LIST_INTERSPACE_TITLE) --></div>
+      </div>
+    <!-- $(END_LIST_INTERSPACE) -->
+  <!-- $(END_IMG_LIST) -->
+  </div>
+
+  <!--  ##  Footnote, also acts as a bottom border  -->
+  <div class="footnote">
+    <div class="desc_text"><!-- $(FOOTNOTE) --></div>
+  </div>
+</div> <!-- end of master_content -->
+
+
+<!--  ##  Footer  -->
+<div class="footer"><!-- $(FOOTER) --></div>
+
+</body>
+</html>
diff --git a/templates/template_index.html b/templates/template_index.html
new file mode 100644
index 0000000..01de113
--- /dev/null
+++ b/templates/template_index.html
@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head profile="http://www.w3.org/2005/10/profile">
+	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+	<title>$(PAGE_TITLE)</title>
+<!-- $(CGG_META_TAGS) -->
+<!-- $(CGG_ATOM_FEED_TAGS) -->
+	<link href="$(TEMPLATES_PATH)styles.css" type="text/css" rel="stylesheet" media="screen, print" />
+	<script type="text/javascript" src="$(TEMPLATES_PATH)scripts-general.js"> </script>
+</head>
+<body>
+
+
+<!--  ##  Navigation bar  -->
+<div class="navigation">
+  <div class="navlinks"><!-- $(NAV_BAR) --></div>
+  <div class="navposition">
+    <span class="navposnumber"><!-- $(TOTAL_ITEMS) --> albums</span>
+  </div>
+</div>
+
+
+<div class="master_content">
+  <!--  ##  Description  -->
+  <div class="description">
+    <!-- $(BEGIN_GO_UP) -->
+    <div class="desc_go_up">:. <a href="$(GO_UP_LINK)">Go Up</a></div>
+    <!-- $(END_GO_UP) -->
+    <div class="desc_title"><!-- $(TITLE) --></div>
+    <div class="desc_text"><!-- $(DESCRIPTION) --></div>
+  </div>
+
+  <!--  ##  Albums  -->
+  <div class="index_thumbs">
+  <!-- $(BEGIN_IMG_LIST) -->
+    <!-- $(BEGIN_IMG_LIST_LANDSCAPE) -->
+      <div class="index_item">
+        <div class="position_marker" id="$(IMG_LIST_ID)"></div>
+        <a href="$(ALBUM_SUBPATH)">
+           <img src="$(IMG_THUMBNAIL)" width="$(IMG_SIZE_THUMB_W)" height="$(IMG_SIZE_THUMB_H)" alt="" />
+           <span class="album_text"><!-- $(IMG_TITLE) --></span><br />
+           <span class="album_subtext"><!-- $(IMG_DESCRIPTION) --></span>
+           <span class="album_note">(<!-- $(ALBUM_NUM_ITEMS) --> items)</span>
+        </a>
+      </div>
+    <!-- $(END_IMG_LIST_LANDSCAPE) -->
+    <!-- $(BEGIN_IMG_LIST_PORTRAIT) -->
+      <div class="index_item">
+        <div class="position_marker" id="$(IMG_LIST_ID)"></div>
+        <a href="$(ALBUM_SUBPATH)">
+           <img src="$(IMG_THUMBNAIL)" width="$(IMG_SIZE_THUMB_W)" height="$(IMG_SIZE_THUMB_H)"  alt="" />
+           <span class="album_text_portrait"><!-- $(IMG_TITLE) --></span><br />
+           <span class="album_subtext_portrait"><!-- $(IMG_DESCRIPTION) --></span>
+           <span class="album_note">(<!-- $(ALBUM_NUM_ITEMS) --> items)</span>
+        </a>
+      </div>
+    <!-- $(END_IMG_LIST_PORTRAIT) -->
+    <!-- $(BEGIN_IMG_LIST_SQUARED) -->
+      <div class="index_item">
+        <div class="position_marker" id="$(IMG_LIST_ID)"></div>
+        <a href="$(ALBUM_SUBPATH)">
+           <img src="$(IMG_THUMBNAIL)" width="$(IMG_SIZE_THUMB_W)" height="$(IMG_SIZE_THUMB_H)"  alt="" />
+           <span class="album_text_squared"><!-- $(IMG_TITLE) --></span><br />
+           <span class="album_subtext_squared"><!-- $(IMG_DESCRIPTION) --></span>
+           <span class="album_note">(<!-- $(ALBUM_NUM_ITEMS) --> items)</span>
+        </a>
+      </div>
+    <!-- $(END_IMG_LIST_SQUARED) -->
+    <!-- $(BEGIN_LIST_SEPARATOR) -->
+      <div class="separators">
+        <div class="album_list_separator"><!-- $(LIST_SEPARATOR_TITLE) --></div>
+      </div>
+    <!-- $(END_LIST_SEPARATOR) -->
+    <!-- $(BEGIN_LIST_INTERSPACE) -->
+      <div class="interspace">
+        <div class="album_list_interspace"><!-- $(LIST_INTERSPACE_TITLE) --></div>
+      </div>
+    <!-- $(END_LIST_INTERSPACE) -->
+  <!-- $(END_IMG_LIST) -->
+  </div>
+
+  <!--  ##  Footnote, also acts as a bottom border  -->
+  <div class="footnote">
+    <div class="desc_text"><!-- $(FOOTNOTE) --></div>
+  </div>
+</div> <!-- end of master_content -->
+
+
+<!--  ##  Footer  -->
+<div class="footer"><!-- $(FOOTER) --></div>
+
+</body>
+</html>
diff --git a/templates/template_picture.html b/templates/template_picture.html
new file mode 100644
index 0000000..413d348
--- /dev/null
+++ b/templates/template_picture.html
@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head profile="http://www.w3.org/2005/10/profile">
+	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+	<title>$(PAGE_TITLE)</title>
+<!-- $(CGG_META_TAGS) -->
+<!-- $(CGG_ATOM_FEED_TAGS) -->
+	<link href="$(TEMPLATES_PATH)styles.css" type="text/css" rel="stylesheet" media="screen, print" />
+	<script type="text/javascript" src="$(TEMPLATES_PATH)scripts-general.js"> </script>
+</head>
+<body onload="javascript: read_exif_table_cookie(); preload_image('$(IMG_SRC_PRELOAD)');">
+
+
+<!--  ##  Navigation bar  -->
+<div class="navigation">
+  <div class="navlinks"><!-- $(NAV_BAR) --></div>
+  <div class="navposition">
+    <span class="navposnumber"><!-- $(FILE_NO) --></span> of <span class="navposnumber"><!-- $(TOTAL_ITEMS) --></span>
+    <span class="navposspacer"></span>
+    <a href="$(LINK_PREV)">&lt; Previous</a> :: <a href="$(LINK_NEXT)">Next &gt;</a>
+  </div>
+  <div class="navexif">ISO <!-- $(EXIF_ISO) --> :: <!-- $(EXIF_TIME) --> :: <!-- $(EXIF_APERTURE) --> :: <!-- $(EXIF_FOCAL_LENGTH) --></div>
+</div>
+
+
+<div class="master_content">
+  <!--  ##  Description  -->
+  <div class="description">
+    <div class="desc_title"><!-- $(TITLE) --></div>
+    <div class="desc_text"><!-- $(DESCRIPTION) --></div>
+  </div>
+
+  <!--  ##  Image  -->
+  <div class="img_preview">
+    <a href="$(LINK_NEXT)"><img src="$(IMG_SRC)" width="$(IMG_SIZE_W)" height="$(IMG_SIZE_H)" alt="" id="$(IMG_BORDER_STYLE)" /></a>
+    <!-- $(BEGIN_IMG_FULLSIZE_LINK) -->
+    <div class="img_preview_full">
+      <a href="$(IMG_SRC_FULL)">See original size (<!-- $(IMG_SIZE_ORIG_W) -->x<!-- $(IMG_SIZE_ORIG_H) -->)</a>
+    </div>  
+    <!-- $(END_IMG_FULLSIZE_LINK) -->
+  </div>
+
+  <!-- $(BEGIN_EXIF_TABLE) -->
+  <!--  ##  EXIF  -->
+  <div class="exif">
+    <div id="exif_table" style="display: none;">
+      :: <a href="javascript: set_exif_table_visibility('no'); write_exif_table_cookie('no');">Hide EXIF</a>
+      <table><tbody>
+        <tr><td>Date: </td>            <td><!-- $(EXIF_DATE) --></td></tr>
+        <tr><td>Camera: </td>          <td><!-- $(EXIF_CAMERA_MODEL) --></td></tr>
+        <tr><td>ISO: </td>             <td><!-- $(EXIF_ISO) --></td></tr>
+        <tr><td>Focal length: </td>    <td><!-- $(EXIF_FOCAL_LENGTH) --></td></tr>
+        <tr><td>Aperture value: </td>  <td><!-- $(EXIF_APERTURE) --></td></tr>
+        <tr><td>Exposure time: </td>   <td><!-- $(EXIF_TIME) --></td></tr>
+        <tr><td>Flash: </td>           <td><!-- $(EXIF_FLASH) --></td></tr>
+      </tbody></table>
+    </div>
+    <div id="exif_line" style="display: block;">
+      :: <a href="javascript: set_exif_table_visibility('yes'); write_exif_table_cookie('yes');">Show EXIF</a>
+    </div>
+  </div>  
+  <!-- $(END_EXIF_TABLE) -->
+
+  <!--  ##  Footnote, also acts as a bottom border  -->
+  <div class="footnote">
+    <div class="desc_text"><!-- $(FOOTNOTE) --></div>
+  </div>
+</div> <!-- end of master_content -->
+
+
+<!--  ##  Footer  -->
+<div class="footer"><!-- $(FOOTER) --></div>
+
+</body>
+</html>
-- 
cgit v1.2.3