Move the current design templates in the "classic" subdir

Let's call this design a "classic" one.

8 files changed, 947 insertions, 0 deletions

diff --git a/templates/classic/Makefile.am b/templates/classic/Makefile.am
new file mode 100644
index 0000000..77cf852
--- /dev/null
+++ b/templates/classic/Makefile.am
@@ -0,0 +1,15 @@
+NULL =
+
+templatesdir = $(datadir)/cgg
+
+templates_DATA =			\
+	default.xml			\
+	template_album.html		\
+	template_index.html		\
+	template_picture.html		\
+	scripts-general.js		\
+	styles.css			\
+	emblems-readonly_120.png	\
+	$(NULL)
+
+EXTRA_DIST = $(templates_DATA)
diff --git a/templates/classic/default.xml b/templates/classic/default.xml
new file mode 100644
index 0000000..8cf709e
--- /dev/null
+++ b/templates/classic/default.xml
@@ -0,0 +1,163 @@
+<?xml version="1.0" encoding="utf-8"?>
+<design_setup version="2.0">
+
+  <!-- image size definitions -->
+  <image_sizes>
+    <!-- Every image size automatically corresponds to the <item> tag parameter
+         of the same name in album source files. E.g. image size named "hires"
+         would correspond to <item hires=".."> tags. Use the image size parameter
+         "tagname" to override that.   -->
+
+    <!-- "original", "preview" and "thumbnail" sizes are somewhat special here
+         in order to keep compatibility with previous versions.  -->
+
+    <!-- Meaning of "original" is shifted here from previous versions;
+         it's considered more like a bigger preview size for large screens now.
+         However it still serves the purpose of supplying metadata (EXIF etc.). -->
+    <!-- Corresponds with mandatory <item src> tag in album source file.  -->
+    <!-- Note that the series of legacy <nofullsize> and <fullsize> tags control
+         this image size availability on the page. -->
+    <size name="original">
+      <landscape w="1200" h="800" />
+      <portrait w="1024" h="1024" />
+      <quality value="97" />
+      <!-- With the 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 />
+      <!-- Normally an image is resized to the given dimensions from the original
+           image when an image is not supplied from the album XML file for the
+           particular image size. This tag tells the generator to use the fallback
+           image size instead when an image has not been supplied. Can be freely
+           combined with the <no_resize /> tags, in that case it only applies
+           to supplied images.  -->
+      <!-- In case when the "original" size is not available due to the legacy
+           <nofullsize> tag present, the "preview" size will be used instead.  -->
+      <fallback size="preview" />
+    </size>
+
+    <!-- The "preview" size is considered default and should be displayed
+         on a first visit.  -->
+    <size name="preview" tagname="preview">
+      <!-- Note that "preview" sizes can be further overriden by album legacy
+           <images> tag and also per-image by "width"/"height" <item> tag
+           attributes. Same goes for quality. -->
+      <landscape w="1067" h="600" />
+      <portrait w="800" h="800" />
+      <quality value="95" />
+      <!-- Similar to the "original" size where the image has to be always supplied,
+           the image won't get resized only when an image file is supplied by the
+           <item preview="..."> tag. Otherwise this tag is ignored and image will
+           be resized from the "original" size (backwards compatibility).
+           This rule applies also for any other optional image sizes.  -->
+      <no_resize />
+    </size>
+
+    <!-- Thumbnail section is mandatory. -->
+    <!-- The "type" attribute has to be set to "thumbnail" to be treated as such. -->
+    <!-- Note that thumbnail images are always resized even for custom supplied files.  -->
+    <!-- An optional "style" attribute affects cropping:
+           * normal  - image is resized to fit the dimension limits, maintaining
+                       aspect ratio without any crop (default)
+           * squared - image is cropped to a squared size and resized to fit
+           * fixed   - image is cropped to a specified dimension and cropped to
+                       fit the specified aspect ratio
+         An optional album item <thumbnail crop> tags may affect the crop area.  -->
+    <size name="thumbnail" type="thumbnail" style="normal">
+      <landscape w="180" h="120" />
+      <portrait w="120" h="180" />
+      <square size="180" />
+      <crop w="180" h="120" />   <!--  valid only for the "fixed" crop style  -->
+      <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">
+    <!-- Index pages may only contain thumbnails. 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>
+      <!-- specify thumbnail image size to be used here. -->
+      <thumbnail_size>thumbnail</thumbnail_size>
+      <!--  In case of a protected album, show special thumbnail (must be included
+            in supplemental_files). Comment out to use real thumbnail.  -->
+      <protected_thumbnail>emblems-readonly_120.png</protected_thumbnail>
+    </index>
+
+    <!-- Album definition is mandatory. -->
+    <album>
+      <template>template_album.html</template>
+      <target_filename>index.html</target_filename>
+      <!--  thumbnail_size is optional, omit it when thumbnails are not used on
+            album pages (will skip some tags substitution).  -->
+      <thumbnail_size>thumbnail</thumbnail_size>
+      <!--  Just like thumbnail_size, also picture_size is optional, omit it
+            when images in their full sizes are not used on album pages.  -->
+      <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
+         potential use within album pages. -->
+    <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
+      emblems-readonly_120.png
+    ]]></supplemental_files>
+
+    <!-- User defines, used in theme templates. Value is optional, empty string
+         will be used if value was requested but not specified. Defines can either
+         act as block conditionals (combo "ifdef(DEFINE_NAME)" and "endif(DEFINE_NAME)")
+         or as a value constant (specify "value(DEFINE_NAME)" to retrieve the value).
+         For "ifdef" negation, use "ifndef" or "else". -->
+    <!-- Some defines are added during runtime and take priority over custom defines
+         here. This way you can define default values which would get eventually
+         overriden by the generator. -->
+
+    <!--  image border style, overriden by <border style> tags from the album source file  -->
+    <define name="BORDER_STYLE" value="border_single" />
+    <!--  show EXIF table in single photo view (comment out to hide it)  -->
+    <define name="SHOW_EXIF_TABLE" />
+    <!--  show "Go Up..." links if not top-level  -->
+    <define name="SHOW_GO_UP" />
+
+    <!-- Other defines set by the generator:
+           IS_ROOT - indicates whether the index/album page is a main (root) page
+    -->
+  </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/classic/emblems-readonly_120.png b/templates/classic/emblems-readonly_120.png
new file mode 100644
index 0000000..c952c7e
--- /dev/null
+++ b/templates/classic/emblems-readonly_120.png
diff --git a/templates/classic/scripts-general.js b/templates/classic/scripts-general.js
new file mode 100644
index 0000000..c371bfa
--- /dev/null
+++ b/templates/classic/scripts-general.js
@@ -0,0 +1,21 @@
+function read_exif_table_cookie () {
+  var exif_table_cookie = document.cookie;
+  exif_table_cookie = exif_table_cookie.split ("=");
+  set_exif_table_visibility (exif_table_cookie[1]);
+}
+
+function write_exif_table_cookie (visible) {
+   var exif_table_cookie = "exif_table_visible=" + visible;
+   document.cookie = exif_table_cookie;
+}
+
+function set_exif_table_visibility (visible) {
+  document.getElementById('exif_table').style.display = visible == "yes" ? 'block' : 'none';
+  document.getElementById('exif_line').style.display = visible == "yes" ? 'none' : 'block';
+}
+
+function preload_image (src) {
+  img = new Image(); 
+  img.src = src;
+}
+
diff --git a/templates/classic/styles.css b/templates/classic/styles.css
new file mode 100644
index 0000000..ca7121d
--- /dev/null
+++ b/templates/classic/styles.css
@@ -0,0 +1,467 @@
+/******   GENERAL   ******/
+body {
+   margin: 0px;
+   font-family: "DejaVu Sans", "Bitstream Vera Sans", "Verdana", sans-serif;
+   font-size: 12px;
+   color: #EEEEEC;  
+   background: #43484A;
+}
+
+img {
+   border: 0px;
+}
+
+a:link {
+   color: #C9CED1;
+}
+
+a:visited {
+   color: #C9CED1;
+}
+
+a:hover {
+   color: #A3BED4;
+}
+
+div.master_content {
+   padding-top: 3.4em;
+   padding-bottom: 1.8em;
+}
+
+/******   NAVIGATION   ******/
+div.navigation {
+   position: fixed;
+   top: 0px;
+   overflow: hidden;
+   z-index: 1;
+   background-color: #606466;
+   width: 100%;
+   padding: 0.4em 0em 0.4em 0em;
+   font-size: 110%;
+   border-top: 0.8em solid #43484A;
+   border-bottom: 0.1em dotted #80878A;
+   height: 1.4em;
+   text-align: center;
+   display: block;
+   color: #EEEEEC;
+}
+
+div.navlinks {
+   padding-left: 1.2em;
+   float: left;
+}
+
+div.navexif {
+   color: #AAAAAA;
+}
+
+div.navposition {
+   padding-right: 1.2em;
+   float: right;
+}
+
+.navposnumber {
+   font-weight: bold;
+}
+
+.navposspacer {
+   padding: 1em;
+}
+
+
+/******   FOOTER   ******/
+div.footer {
+   position: fixed;
+   bottom: 0px;
+   overflow: hidden;
+   z-index: 1;
+   text-align: center;
+   background-color: #4F5659;
+   width: 100%;
+   padding: 0.2em;
+   font-size: 90%;
+   font-family: "Trebuchet MS", "DejaVu Sans", "Bitstream Vera Sans", sans-serif;
+   color: #9A9C97;
+   border-top: 0.1em dotted #7C8285;
+   height: 1.5em;
+   display: block;
+}
+
+div.footer a {
+   color: #B1B3AD;
+   text-decoration: none;
+}
+
+div.footer a:hover {
+   color: #C5C7C0;
+   text-decoration: underline;
+}
+
+
+/******   DESCRIPTION   ******/
+div.description {
+   margin: 1.5em 1.25em 3.2em 1.25em;
+   color: #D0D0D0;
+}
+
+div.desc_title {
+   font-size: 175%;
+   font-weight: bold;
+   color: #EEEEEC;
+}
+
+div.desc_text {
+   margin: 0.4em 3em 0em 0.8em;
+   line-height: 140%;
+}
+
+div.desc_go_up {
+   font-size: 80%;
+   margin-bottom: 3em;
+}
+
+div.desc_go_up a {
+   text-decoration: none;
+   border-bottom: 0.1em solid;
+}
+
+div.desc_go_up a:hover {
+   color: #C5C7C0;
+   border-bottom: 0.1em dotted;
+}
+
+
+/******   PREVIEW IMAGE (big)   ******/
+div.img_preview {
+   text-align: center;
+   padding-bottom: 0.75em;
+}
+div.img_preview_full {
+   padding-top: 0.75em;
+}
+
+
+/******   EXIF TABLE   ******/
+div.exif {
+   margin: 2.5em 0 0 1.25em;
+   color: #EEEEEC;
+}
+
+div.exif a {
+/*   color: #B1B3AD;  */
+   text-decoration: none;
+   font-weight: bold;
+   border-bottom: 0.1em solid;
+}
+
+div.exif a:hover {
+   color: #C5C7C0;
+   border-bottom: 0.1em dotted;
+}
+
+div.exif table {
+   padding: 1em 0 0 2.6em;
+   font-size: 80%;
+}
+
+div.exif tr td:first-child {
+   color: #BABDB6;
+   text-align: right;
+   font-weight: normal;
+}
+
+div.exif td {
+   padding-left: 0.2em;
+   font-weight: bold;
+}
+
+div.no_exif {
+   padding: 1em 0 0 2.6em;
+   font-size: 80%;
+}
+
+/******   GENERAL CLASSES   ******/
+div.position_marker {
+   position: relative;
+   top: -4.3em;
+}
+
+/******   ALBUM THUMBNAILS   ******/
+div.album_thumbs {
+   text-align: left;
+   padding: 0 1.7em 0 1.7em;
+   font-size: 90%;
+}
+
+div.album_item {
+   float: left;
+   width: 19.9em;
+   height: 21.4em;
+}
+
+div.album_item a {
+   position: relative;   /*  CSS positioning sucks  */
+   float: left;
+   width: 19em;
+   height: 20.5em;
+   text-align: center;
+   text-decoration: none;
+   border-radius: 0.5em;
+   -moz-border-radius: 0.5em;
+   -webkit-border-radius: 0.5em;
+   background-color: #232729;
+   margin: 1px;     /*  Needs to be changed below in a.album_item:hover */
+   border: 1px solid #6b6c69;  /*  Cannot use em units here otherwise the box will become jumpy  */
+}
+
+
+div.album_item a:hover {
+   background-color: #32332F;
+   margin: 0px;    /*  a.album_item->margin - 1px  */ 
+   border: 2px solid #A3BED4;
+}
+
+div.album_item img.landscape {
+   /* landscape */
+   padding-top: 2.25em;
+}
+
+div.album_item img.portrait {
+   /* portrait */
+   padding-top: 1em;
+}
+
+div.album_item img.squared {
+   /* squared */
+   padding-top: 1em;
+}
+
+.album_thumb_text {
+   /*  CSS positioning sucks^2  */ 
+   position: absolute;
+   bottom: 0.8em;
+   left: 5.7em;
+}
+
+
+/******   ALBUM/INDEX SEPARATORS   ******/
+div.separators {
+   float: left;
+   clear: both;
+   width: 100%;
+   text-align: left;
+   font-variant: small-caps;
+   font-family: "Trebuchet MS", "DejaVu Sans", "Bitstream Vera Sans", sans-serif;
+   color: #C0C0C0;
+}
+
+div.album_list_separator {
+   margin: 2.2em 0 0.65em 0;
+   font-size: 320%;
+   letter-spacing: 0.055em;
+   border-bottom: 0.04em solid #606060;
+}
+
+div.index_separator {
+   margin: 1.9em 0 0.6em 0;
+   font-size: 260%;
+   letter-spacing: 0.035em;
+   border-bottom: 0.05em solid #606060;
+}
+
+
+/******   ALBUM/INDEX INTERSPACES   ******/
+div.interspace {
+   float: left;
+   clear: both;
+   width: 100%;
+   text-align: left;
+   color: #D0D0D0;
+   margin: 0em 3em 0em 0.8em;
+}
+
+div.album_list_interspace {
+   margin: 0.65em 0 0.75em 0;
+   font-size: 125%;
+   line-height: 140%;
+}
+
+div.index_interspace {
+   margin: 0.6em 0 1.1em 0;
+   font-size: 110%;
+   line-height: 140%;
+}
+
+
+/******   FOOTNOTE   ******/
+div.footnote {
+   padding: 1em 1.25em 3.2em 1.25em;
+   color: #D0D0D0;
+   clear: both;
+}
+
+
+/******   INDEX THUMBNAILS   ******/
+div.index_thumbs {
+   text-align: left;
+   padding: 0 1.7em 0 1.7em;
+   font-size: 90%;
+}
+
+div.index_item {
+   float: left;
+   width: 53.5em;
+   height: 20em;
+   margin: 0.7em;
+}   
+
+div.index_item a {
+   position: relative;   /*  CSS positioning sucks  */
+   float: left;
+   width: 53em;
+   height: 19.5em;
+   text-align: left;
+   text-decoration: none;
+   border-radius: 0.5em;
+   -moz-border-radius: 0.5em;
+   -webkit-border-radius: 0.5em;
+   background-color: #232729;
+   margin: 1px;     /*  Needs to be changed below in a.index_item:hover */
+   border: 1px solid #6b6c69;  /*  Cannot use em units here otherwise the box will become jumpy  */
+   color: #BABDB6;
+}
+
+div.index_item a:hover {
+   background-color: #32332F;
+   margin: 0px;    /*  a.index_item->margin - 1px  */ 
+   border: 2px solid #A3BED4;
+   color: #A3BED4;
+}
+
+div.index_item img {
+   position: absolute;
+   left: 1.4em;
+   top: 1.4em;
+}
+
+.album_text_landscape {
+   font-size: 190%;
+   font-weight: bold;
+   position: relative;
+   left: 10.3em;
+/*   padding-right: 10.5em;  disabled --  word wrap  */
+   top: 0.65em;
+}
+
+.album_text_portrait {
+   font-size: 190%;
+   font-weight: bold;
+   position: relative;
+   left: 7.5em;
+/*   padding-right: 7.7em;  disabled --  word wrap  */
+   top: 0.65em;
+}
+
+.album_text_squared {
+   font-size: 190%;
+   font-weight: bold;
+   position: relative;
+   left: 10.3em;
+/*   padding-right: 10.5em;  disabled --  word wrap  */
+   top: 0.65em;
+}
+
+.album_subtext_landscape {
+   font-size: 150%;
+   position: relative;
+   left: 13.1em;
+/*   padding-right: 13.4em;  disabled --  word wrap  */
+   top: 2.5em;
+}
+
+.album_subtext_portrait {
+   font-size: 150%;
+   position: relative;
+   left: 9.5em;
+/*   padding-right: 9.8em;  disabled --  word wrap  */
+   top: 2.5em;
+}
+
+.album_subtext_squared {
+   font-size: 150%;
+   position: relative;
+   left: 13.1em;
+/*   padding-right: 13.4em;  disabled --  word wrap  */
+   top: 2.5em;
+}
+
+.album_note {
+   position: absolute;
+   right: 2.3em;
+   bottom: 1.9em;
+}
+
+.album_protected_note {
+   color: #c8bc00;
+   font-size: 65%;
+}
+
+/******   IMAGE BORDER STYLES   ******/
+img#border_single {
+   background-color: #6b6c69;
+   padding: 1px;
+}
+
+img#border_none {
+   padding: 0px;
+   margin: 0px;
+}
+
+img#frame_black {
+   background-color: #909090;
+   padding: 1px;
+   border: 20px solid black;
+}
+
+img#frame_white {
+   background-color: #444444;
+   padding: 1px;
+   border: 20px solid white;
+}
+
+img#frame_black_horiz {
+   background-color: #A0A0A0;
+   padding: 1px 0px 1px 0px;
+   border-top: 35px solid black;
+   border-bottom: 35px solid black;
+}
+
+img#frame_white_horiz {
+   background-color: #444444;
+   padding: 1px 0px 1px 0px;
+   border-top: 35px solid white;
+   border-bottom: 35px solid white;
+}
+
+img#frame_black_vert {
+   background-color: #A0A0A0;
+   padding: 0px 1px 0px 1px;
+   border-left: 40px solid black;
+   border-right: 40px solid black;
+}
+
+img#frame_white_vert {
+   background-color: #444444;
+   padding: 0px 1px 0px 1px;
+   border-left: 40px solid white;
+   border-right: 40px solid white;
+}
+
+img#border_black {
+   border: 15px solid black;
+}
+
+img#border_white {
+   border: 15px solid white;
+}
+
diff --git a/templates/classic/template_album.html b/templates/classic/template_album.html
new file mode 100644
index 0000000..fde340f
--- /dev/null
+++ b/templates/classic/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">
+    <!-- $(BEGIN_NAV_BAR) -->
+      <!-- $(BEGIN_NAV_BAR_FIRST) -->
+        <a href="$(NAV_BAR_ELEM_LINK)" rel="home"><!-- $(NAV_BAR_ELEM_TITLE) --></a> &gt; 
+      <!-- $(END_NAV_BAR_FIRST) -->
+      <!-- $(BEGIN_NAV_BAR_ELEM) -->
+        <a href="$(NAV_BAR_ELEM_LINK)"><!-- $(NAV_BAR_ELEM_TITLE) --></a> &gt; 
+      <!-- $(END_NAV_BAR_ELEM) -->
+      <!-- $(BEGIN_NAV_BAR_LAST) -->
+        <a href="$(NAV_BAR_ELEM_LINK)"><!-- $(NAV_BAR_ELEM_TITLE) --></a> &gt; 
+      <!-- $(END_NAV_BAR_LAST) -->
+      <!-- $(BEGIN_NAV_BAR_CURRENT) -->
+        <!-- $(NAV_BAR_ELEM_TITLE) -->
+      <!-- $(END_NAV_BAR_CURRENT) -->
+      <!-- $(BEGIN_NAV_BAR_CURRENT_ROOT) -->
+        <!-- $(NAV_BAR_ELEM_TITLE) -->
+      <!-- $(END_NAV_BAR_CURRENT_ROOT) -->
+    <!-- $(END_NAV_BAR) -->
+  </div>
+  <div class="navposition">
+    <span class="navposnumber"><!-- $(TOTAL_ITEMS) --> items</span>
+  </div>
+</div>
+
+
+<div class="master_content">
+  <!--  ##  Description  -->
+  <div class="description">
+    <!-- $(ifdef(SHOW_GO_UP)) --><!-- $(ifndef(IS_ROOT)) -->
+    <div class="desc_go_up">:. <a href="$(GO_UP_LINK)">Go Up</a></div>
+    <!-- $(endif(IS_ROOT)) --><!-- $(endif(SHOW_GO_UP)) -->
+    <div class="desc_title"><!-- $(TITLE) --></div>
+    <div class="desc_text"><!-- $(DESCRIPTION) --></div>
+  </div>
+
+  <!--  ##  Images  -->
+  <div class="album_thumbs">
+  <!-- $(BEGIN_IMG_LIST) -->
+    <!-- $(BEGIN_LIST_PICTURE) -->
+      <div class="album_item">
+        <div class="position_marker" id="$(IMG_POS_MARKER)"></div>
+        <a href="$(IMG_SUBPAGE)">
+          <img src="$(IMG_SRC_THUMB)" width="$(IMG_SIZE_THUMB_W)" height="$(IMG_SIZE_THUMB_H)" alt="$(IMG_TITLE)" class="$(THUMB_ORIENTATION)" />
+          <span class="album_thumb_text"><!-- $(IMG_FILENAME) --></span>
+        </a>
+      </div>
+    <!-- $(END_LIST_PICTURE) -->
+    <!-- $(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/classic/template_index.html b/templates/classic/template_index.html
new file mode 100644
index 0000000..36d4eec
--- /dev/null
+++ b/templates/classic/template_index.html
@@ -0,0 +1,90 @@
+<?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">
+    <!-- $(BEGIN_NAV_BAR) -->
+      <!-- $(BEGIN_NAV_BAR_FIRST) -->
+        <a href="$(NAV_BAR_ELEM_LINK)" rel="home"><!-- $(NAV_BAR_ELEM_TITLE) --></a> &gt; 
+      <!-- $(END_NAV_BAR_FIRST) -->
+      <!-- $(BEGIN_NAV_BAR_ELEM) -->
+        <a href="$(NAV_BAR_ELEM_LINK)"><!-- $(NAV_BAR_ELEM_TITLE) --></a> &gt; 
+      <!-- $(END_NAV_BAR_ELEM) -->
+      <!-- $(BEGIN_NAV_BAR_LAST) -->
+        <a href="$(NAV_BAR_ELEM_LINK)"><!-- $(NAV_BAR_ELEM_TITLE) --></a> &gt; 
+      <!-- $(END_NAV_BAR_LAST) -->
+      <!-- $(BEGIN_NAV_BAR_CURRENT) -->
+        <!-- $(NAV_BAR_ELEM_TITLE) -->
+      <!-- $(END_NAV_BAR_CURRENT) -->
+      <!-- $(BEGIN_NAV_BAR_CURRENT_ROOT) -->
+        <!-- $(NAV_BAR_ELEM_TITLE) -->
+      <!-- $(END_NAV_BAR_CURRENT_ROOT) -->
+    <!-- $(END_NAV_BAR) -->
+  </div>
+  <div class="navposition">
+    <span class="navposnumber"><!-- $(TOTAL_ITEMS) --> albums</span>
+  </div>
+</div>
+
+
+<div class="master_content">
+  <!--  ##  Description  -->
+  <div class="description">
+    <!-- $(ifdef(SHOW_GO_UP)) --><!-- $(ifndef(IS_ROOT)) -->
+    <div class="desc_go_up">:. <a href="$(GO_UP_LINK)">Go Up</a></div>
+    <!-- $(endif(IS_ROOT)) --><!-- $(endif(SHOW_GO_UP)) -->
+    <div class="desc_title"><!-- $(TITLE) --></div>
+    <div class="desc_text"><!-- $(DESCRIPTION) --></div>
+  </div>
+
+  <!--  ##  Albums  -->
+  <div class="index_thumbs">
+  <!-- $(BEGIN_IMG_LIST) -->
+    <!-- $(BEGIN_LIST_PICTURE) -->
+      <div class="index_item">
+        <div class="position_marker" id="$(IMG_POS_MARKER)"></div>
+        <a href="$(ALBUM_SUBPATH)">
+           <img src="$(IMG_SRC_THUMB)" width="$(IMG_SIZE_THUMB_W)" height="$(IMG_SIZE_THUMB_H)" alt="" />
+           <span class="album_text_$(THUMB_ORIENTATION)"><!-- $(IMG_TITLE) --></span><br />
+           <span class="album_subtext_$(THUMB_ORIENTATION)"><!-- $(IMG_DESCRIPTION) --><!-- $(ifdef(IS_PROTECTED)) --><span class="album_protected_note"><br /><br />(This album is password protected)</span><!-- $(endif(IS_PROTECTED)) --></span>
+           <span class="album_note">(<!-- $(ALBUM_NUM_ITEMS) --> items)</span>
+        </a>
+      </div>
+    <!-- $(END_LIST_PICTURE) -->
+    <!-- $(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/classic/template_picture.html b/templates/classic/template_picture.html
new file mode 100644
index 0000000..19f77d5
--- /dev/null
+++ b/templates/classic/template_picture.html
@@ -0,0 +1,103 @@
+<?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">
+    <!-- $(BEGIN_NAV_BAR) -->
+      <!-- $(BEGIN_NAV_BAR_FIRST) -->
+        <a href="$(NAV_BAR_ELEM_LINK)" rel="home"><!-- $(NAV_BAR_ELEM_TITLE) --></a> &gt; 
+      <!-- $(END_NAV_BAR_FIRST) -->
+      <!-- $(BEGIN_NAV_BAR_ELEM) -->
+        <a href="$(NAV_BAR_ELEM_LINK)"><!-- $(NAV_BAR_ELEM_TITLE) --></a> &gt; 
+      <!-- $(END_NAV_BAR_ELEM) -->
+      <!-- $(BEGIN_NAV_BAR_LAST) -->
+        <a href="$(NAV_BAR_ELEM_LINK)"><!-- $(NAV_BAR_ELEM_TITLE) --></a> &gt; 
+      <!-- $(END_NAV_BAR_LAST) -->
+      <!-- $(BEGIN_NAV_BAR_CURRENT) -->
+        <!-- $(NAV_BAR_ELEM_TITLE) -->
+      <!-- $(END_NAV_BAR_CURRENT) -->
+      <!-- $(BEGIN_NAV_BAR_CURRENT_ROOT) -->
+        <!-- $(NAV_BAR_ELEM_TITLE) -->
+      <!-- $(END_NAV_BAR_CURRENT_ROOT) -->
+    <!-- $(END_NAV_BAR) -->
+  </div>
+  <div class="navposition">
+    <span class="navposnumber"><!-- $(ITEM_INDEX) --></span> of <span class="navposnumber"><!-- $(TOTAL_ITEMS) --></span>
+    <span class="navposspacer"></span>
+    <a href="$(LINK_PREV)" rel="prev">&lt; Previous</a> :: <a href="$(LINK_NEXT)" rel="next">Next &gt;</a>
+  </div>
+  <!-- $(ifdef(HAVE_EXIF)) -->
+    <div class="navexif">ISO <!-- $(get_exif_value_fixed("Exif.Photo.ISOSpeedRatings")) --> :: <!-- $(get_exif_value_fixed("Exif.Photo.ExposureTime")) --> :: <!-- $(get_exif_value_fixed("Exif.Photo.FNumber")) --> :: <!-- $(get_exif_value_fixed("Exif.Photo.FocalLength")) --></div>
+  <!-- $(endif(HAVE_EXIF)) -->
+</div>
+
+
+<div class="master_content">
+  <!--  ##  Description  -->
+  <div class="description">
+    <div class="desc_title"><!-- $(IMG_TITLE) --></div>
+    <div class="desc_text"><!-- $(IMG_DESCRIPTION) --></div>
+  </div>
+
+  <!--  ##  Image  -->
+  <div class="img_preview">
+    <a href="$(LINK_NEXT)" rel="next"><img src="$(IMG_SRC)" width="$(IMG_SIZE_W)" height="$(IMG_SIZE_H)" alt="" id="$(value(BORDER_STYLE))" /></a>
+    <!-- $(ifdef(HAVE_FULLSIZE)) -->
+    <div class="img_preview_full">
+      <a href="$(IMG_SRC_FULLSIZE)">See original size (<!-- $(IMG_SIZE_FULLSIZE_W) -->x<!-- $(IMG_SIZE_FULLSIZE_H) -->)</a>
+    </div>  
+    <!-- $(endif(HAVE_FULLSIZE)) -->
+  </div>
+
+  <!-- $(ifdef(SHOW_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><br/>
+      <!-- $(ifdef(HAVE_EXIF)) -->
+      <table><tbody>
+        <tr><td>Date: </td>            <td><!-- $(get_exif_value_fixed("Exif.Photo.DateTimeOriginal")) --></td></tr>
+        <tr><td>Camera: </td>          <td><!-- $(get_exif_value_fixed("Exif.Image.Model")) --></td></tr>
+        <tr><td>ISO: </td>             <td><!-- $(get_exif_value_fixed("Exif.Photo.ISOSpeedRatings")) --></td></tr>
+        <tr><td>Focal length: </td>    <td><!-- $(get_exif_value_fixed("Exif.Photo.FocalLength")) --></td></tr>
+        <tr><td>Aperture value: </td>  <td><!-- $(get_exif_value_fixed("Exif.Photo.FNumber")) --></td></tr>
+        <tr><td>Exposure time: </td>   <td><!-- $(get_exif_value_fixed("Exif.Photo.ExposureTime")) --></td></tr>
+        <tr><td>Flash: </td>           <td><!-- $(get_exif_value_fixed("Exif.Photo.Flash")) --></td></tr>
+<!-- $(if (have_exif_key ("Exif.CanonSi.CameraTemperature"))) -->
+        <tr><td>Camera temperature: </td> <td><!-- $(get_exif_value_fixed("Exif.CanonSi.CameraTemperature")) --></td></tr>
+<!-- $(endif (have_exif_key ())) -->
+      </tbody></table>
+      <!-- $(else(HAVE_EXIF)) -->
+      <div class="no_exif">
+        No EXIF information available.
+      </div>
+      <!-- $(endif(HAVE_EXIF)) -->
+    </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>  
+  <!-- $(endif(SHOW_EXIF_TABLE)) -->
+
+  <!--  ##  Footnote, also acts as a bottom border  -->
+  <div class="footnote"></div>
+</div> <!-- end of master_content -->
+
+
+<!--  ##  Footer  -->
+<div class="footer"><!-- $(FOOTER) --></div>
+
+</body>
+</html>