summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--configure.ac1
-rw-r--r--templates/Makefile.am2
-rw-r--r--templates/fluid/CREDITS14
-rw-r--r--templates/fluid/Makefile.am15
-rw-r--r--templates/fluid/README18
-rw-r--r--templates/fluid/emblems-readonly_120.pngbin0 -> 5668 bytes
-rw-r--r--templates/fluid/fluid.xml97
-rw-r--r--templates/fluid/fonts.css3
-rw-r--r--templates/fluid/scripts.js351
-rw-r--r--templates/fluid/styles.css757
-rw-r--r--templates/fluid/template_album.html109
-rw-r--r--templates/fluid/template_index.html77
12 files changed, 1443 insertions, 1 deletions
diff --git a/configure.ac b/configure.ac
index 4e7ceaf..7add77b 100644
--- a/configure.ac
+++ b/configure.ac
@@ -132,6 +132,7 @@ AC_CONFIG_FILES([
src/Makefile
templates/Makefile
templates/classic/Makefile
+ templates/fluid/Makefile
sample/Makefile
])
AC_OUTPUT
diff --git a/templates/Makefile.am b/templates/Makefile.am
index 150d7e2..2b03c64 100644
--- a/templates/Makefile.am
+++ b/templates/Makefile.am
@@ -1,3 +1,3 @@
NULL =
-SUBDIRS = classic
+SUBDIRS = classic fluid
diff --git a/templates/fluid/CREDITS b/templates/fluid/CREDITS
new file mode 100644
index 0000000..316224e
--- /dev/null
+++ b/templates/fluid/CREDITS
@@ -0,0 +1,14 @@
+This template was heavily inspired by flickriver.com and fluidr.com portals:
+ Flickriver viewer software © 2007-2016 Flickriver.com
+ Fluidr.com Copyright by Sidath Senanayake
+
+
+The CSS breadcrumb navigation is a heavily modified example from
+ http://thecodeplayer.com/walkthrough/css3-breadcrumb-navigation
+ Copyright 2014 TheCodePlayer. All Rights Reserved.
+
+
+Portions of the JavaScript code was taken from Prototype JavaScript framework:
+ Copyright (c) 2005-2008 Sam Stephenson
+ Prototype is freely distributable under the terms of an MIT-style license.
+ For details, see the Prototype web site: http://www.prototypejs.org/
diff --git a/templates/fluid/Makefile.am b/templates/fluid/Makefile.am
new file mode 100644
index 0000000..edfc559
--- /dev/null
+++ b/templates/fluid/Makefile.am
@@ -0,0 +1,15 @@
+NULL =
+
+templatesdir = $(datadir)/cgg/fluid
+
+templates_DATA = \
+ fluid.xml \
+ fonts.css \
+ styles.css \
+ scripts.js \
+ template_album.html \
+ template_index.html \
+ emblems-readonly_120.png \
+ $(NULL)
+
+EXTRA_DIST = $(templates_DATA)
diff --git a/templates/fluid/README b/templates/fluid/README
new file mode 100644
index 0000000..268a911
--- /dev/null
+++ b/templates/fluid/README
@@ -0,0 +1,18 @@
+The fluid template is an attempt to create modern-looking interactive view mode.
+It's targeted for a stream-like presentation as opposed to single picture pages.
+
+There's a strong emphasis for an album to tell a story and drive the viewer's
+attention through it till the end.
+
+
+Navigation
+----------
+
+To start the photostream mode, use <Left> or <Right> arrow keys or press
+<Space>. To quit the photostream mode, press <Esc>, <Top> or <Down> arrow keys
+or simply scroll the mouse.
+
+Special shortcuts:
+ D - toggles EXIF panel visibility for all items
+ A - toggles animations (experimental, default=off)
+ F - toggles fullscreen mode (experimental)
diff --git a/templates/fluid/emblems-readonly_120.png b/templates/fluid/emblems-readonly_120.png
new file mode 100644
index 0000000..c952c7e
--- /dev/null
+++ b/templates/fluid/emblems-readonly_120.png
Binary files differ
diff --git a/templates/fluid/fluid.xml b/templates/fluid/fluid.xml
new file mode 100644
index 0000000..b4e528b
--- /dev/null
+++ b/templates/fluid/fluid.xml
@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="utf-8"?>
+<design_setup version="2.0">
+
+ <image_sizes>
+ <size name="original">
+ <landscape w="1423" h="800" />
+ <portrait w="1000" h="1000" />
+ <quality value="95" />
+ <no_resize />
+ <fallback size="preview" />
+ </size>
+
+ <size name="preview" tagname="preview">
+ <landscape w="1067" h="600" />
+ <portrait w="800" h="800" />
+ <quality value="95" />
+ <no_resize />
+ </size>
+
+ <size name="thumbnail" type="thumbnail" style="fixed">
+ <crop w="495" h="330" />
+ <quality value="70" />
+ </size>
+
+ <size name="hires">
+ <landscape w="1897" h="1067" />
+ <portrait w="1200" h="1200" />
+ <quality value="95" />
+ <no_resize />
+ <fallback size="original" />
+ </size>
+ </image_sizes>
+
+ <supplemental_files><![CDATA[
+ styles.css
+ fonts.css
+ scripts.js
+ emblems-readonly_120.png
+ ]]></supplemental_files>
+
+
+ <theme enabled="yes">
+ <index>
+ <template>template_index.html</template>
+ <target_filename>index.html</target_filename>
+ <thumbnail_size>thumbnail</thumbnail_size>
+ <protected_thumbnail>emblems-readonly_120.png</protected_thumbnail>
+ </index>
+
+ <album>
+ <template>template_album.html</template>
+ <target_filename>index.html</target_filename>
+ <picture_size>preview</picture_size>
+ </album>
+
+ <define name="THEME_SIZE_PREVIEW" />
+ <define name="BORDER_STYLE" value="border_single" />
+ </theme>
+
+ <theme enabled="yes">
+ <index>
+ <template>template_index.html</template>
+ <target_filename>index_big.html</target_filename>
+ <thumbnail_size>thumbnail</thumbnail_size>
+ <protected_thumbnail>emblems-readonly_120.png</protected_thumbnail>
+ </index>
+
+ <album>
+ <template>template_album.html</template>
+ <target_filename>index_big.html</target_filename>
+ <picture_size>original</picture_size>
+ </album>
+
+ <define name="THEME_SIZE_BIG" />
+ <define name="BORDER_STYLE" value="border_single" />
+ </theme>
+
+ <theme enabled="yes">
+ <index>
+ <template>template_index.html</template>
+ <target_filename>index_hires.html</target_filename>
+ <thumbnail_size>thumbnail</thumbnail_size>
+ <protected_thumbnail>emblems-readonly_120.png</protected_thumbnail>
+ </index>
+
+ <album>
+ <template>template_album.html</template>
+ <target_filename>index_hires.html</target_filename>
+ <picture_size>hires</picture_size>
+ </album>
+
+ <define name="THEME_SIZE_HIRES" />
+ <define name="BORDER_STYLE" value="border_single" />
+ </theme>
+
+</design_setup>
+
diff --git a/templates/fluid/fonts.css b/templates/fluid/fonts.css
new file mode 100644
index 0000000..eac5540
--- /dev/null
+++ b/templates/fluid/fonts.css
@@ -0,0 +1,3 @@
+@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
+
+@import url(http://fonts.googleapis.com/css?family=Hind:400,300,500,600,700|Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700&subset=latin,cyrillic-ext,latin-ext,cyrillic);
diff --git a/templates/fluid/scripts.js b/templates/fluid/scripts.js
new file mode 100644
index 0000000..7c9bb97
--- /dev/null
+++ b/templates/fluid/scripts.js
@@ -0,0 +1,351 @@
+
+/****************************** EXIF TABLE *********************************/
+
+var exif_all_visible = false;
+
+function set_exif_params (table, icon, visible) {
+ if (visible) {
+ table.style.display = 'block';
+ icon.style.opacity = 1.0;
+ } else {
+ table.style.display = 'none';
+ icon.style.opacity = 0.23;
+ }
+}
+
+function toggle_exif_visibility (id) {
+ var table = document.getElementById ('exif_table-' + id);
+ var icon = document.getElementById ('exif_icon-' + id);
+ set_exif_params (table, icon, icon.style.opacity != 1.0);
+}
+
+function toggle_exif_all_visibility () {
+ exif_all_visible = !exif_all_visible;
+ for (var i = 1; table = document.getElementById ("exif_table-" + i); i++) {
+ var icon = document.getElementById ('exif_icon-' + i);
+ set_exif_params (table, icon, exif_all_visible);
+ }
+}
+
+
+/**************************** FULLSCREEN MODE *****************************/
+
+/* https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode */
+/* FIXME: scrollbar reset in Chromium 40 */
+/* TODO: retain stream mode if active */
+function toggleFullScreen() {
+ if (!document.fullscreenElement && // alternative standard method
+ !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods
+ if (document.documentElement.requestFullscreen) {
+ document.documentElement.requestFullscreen();
+ } else if (document.documentElement.msRequestFullscreen) {
+ document.documentElement.msRequestFullscreen();
+ } else if (document.documentElement.mozRequestFullScreen) {
+ document.documentElement.mozRequestFullScreen();
+ } else if (document.documentElement.webkitRequestFullscreen) {
+ document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+ }
+ } else {
+ if (document.exitFullscreen) {
+ document.exitFullscreen();
+ } else if (document.msExitFullscreen) {
+ document.msExitFullscreen();
+ } else if (document.mozCancelFullScreen) {
+ document.mozCancelFullScreen();
+ } else if (document.webkitExitFullscreen) {
+ document.webkitExitFullscreen();
+ }
+ }
+}
+
+
+/****************************** PHOTOSTREAM *******************************/
+
+/* PHOTOSTREAM - INSTRUCTIONS:
+ * - photos should be embedded in <div id="photos">
+ * - every photo should have id="photo-XXX" where XXX is index starting with 1
+ * - total number of photos needs to be defined in the NUM_PHOTOS variable
+ */
+
+var current_idx = 0;   
+var photostream_mode = false;
+var scroll_timeout = 0;
+var ignore_scroll_event = false;
+
+var enable_animations = false;
+var animation_duration = 175; /* ms */
+var animation_steps = 17;
+
+   
+   
+/* Portions of code taken from Prototype JavaScript framework
+ * Copyright (c) 2005-2008 Sam Stephenson
+ * Prototype is freely distributable under the terms of an MIT-style license.
+ * For details, see the Prototype web site: http://www.prototypejs.org/
+ */
+
+function hasClassName (element, className) {
+ var elementClassName = element.className;
+ return (elementClassName.length > 0 && (elementClassName == className ||
+ new RegExp("(^|\\s)" + className + "(\\s|$)").test(elementClassName)));
+}
+
+function addClassName (element, className) {
+ if (!hasClassName(element, className))
+ element.className += (element.className ? ' ' : '') + className;
+ return element;
+}
+
+function removeClassName (element, className) {
+ element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), ' ').replace(/^\s+/, '').replace(/\s+$/, '');
+ return element;
+}
+
+function cumulativeOffset (element) {
+ var valueT = 0, valueL = 0;
+ do {
+ valueT += element.offsetTop || 0;
+ valueL += element.offsetLeft || 0;
+ element = element.offsetParent;
+ } while (element);
+ return [valueL, valueT];
+}
+
+
+/* http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js */
+/* http://matthewlein.com/experiments/easing.html */
+function fadein (el) {
+ var op = 0.35;
+ var t = 0;
+ var handler = setInterval (function () {
+ if (op >= 1.0)
+ clearInterval (handler);
+ el.style.opacity = op;
+ op += 1.0 / animation_steps;
+ t += animation_duration / animation_steps;
+ var c = 1.0 / animation_steps;
+ var d = animation_duration;
+ var b = 0.0;
+// op += c - c * Math.cos(t/d * (Math.PI/2)); /* easeInSine */
+// op += c*(t/=d)*t + b; /* easeInQuad */
+ }, animation_duration / animation_steps);
+}
+
+
+function do_show_photo (do_show, id) {
+ var elem = document.getElementById (id);
+ if (! elem)
+ return;
+
+ if (do_show) {
+ addClassName (elem, "photostream-force-show");
+ if (enable_animations) {
+ elem.style.opacity = 0.0;
+ fadein (elem);
+ } else {
+ elem.style.opacity = 1.0;
+ }
+ } else {
+ removeClassName (elem, "photostream-force-show");
+ elem.style.opacity = 1.0;
+ }
+}
+
+function start_photostream_mode () {
+  photostream_mode = true;
+
+ if (NUM_PHOTOS <= 0)
+ return;
+
+  var l = document.getElementsByClassName('photostream-hide');
+ for (var i = 0; i < l.length; i++)
+ addClassName (l[i], "photostream-force-hide");
+
+ var elem = document.getElementById ("photostream-close");
+ if (elem)
+ removeClassName (elem, "photostream-force-hide");
+
+ var elem = document.getElementById ("photostream-position-label");
+ if (elem)
+ removeClassName (elem, "photostream-force-hide");
+}
+
+function cancel_photostream_mode () {
+ if (photostream_mode) {
+ photostream_mode = false;
+ do_show_photo (false);
+
+    var l = document.getElementsByClassName('photostream-hide');
+ for (var i = 0; i < l.length; i++)
+ removeClassName (l[i], "photostream-force-hide");
+
+ var elem = document.getElementById ("photostream-close");
+ if (elem)
+ addClassName (elem, "photostream-force-hide");
+
+ var elem = document.getElementById ("photostream-position-label");
+ if (elem)
+ addClassName (elem, "photostream-force-hide");
+ }
+}
+
+function update_position_label () {
+ var elem = document.getElementById ("photostream-position-label");
+ if (elem)
+ elem.innerHTML = current_idx + " / " + NUM_PHOTOS;
+}
+
+function scroll_to_photo (elem) {
+ var window_height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight;
+ var off = cumulativeOffset (elem);
+
+ off[1] += (elem.offsetHeight - window_height) / 2;
+ /* Dirty workaround to ignore subsequent onScroll events */
+ ignore_scroll_event = true;
+ setTimeout (function () {ignore_scroll_event=false;}, 200);
+ window.scrollTo (off[0], off[1]);
+}
+
+function set_position (inc) {
+ var idx;
+ var elem;
+
+ if (! photostream_mode)
+ start_photostream_mode ();
+
+ idx = current_idx + inc;
+ if (idx < 1)
+ idx = 1;
+ if (idx > NUM_PHOTOS)
+ idx = NUM_PHOTOS;
+
+ elem = document.getElementById ("photo-" + idx);
+ if (! elem)
+ return;
+
+ do_show_photo (false, "photo-" + current_idx);
+ do_show_photo (false, "photo-" + current_idx + "-sep");
+ do_show_photo (false, "photo-" + current_idx + "-ispc");
+
+ scroll_to_photo (elem);
+ do_show_photo (true, "photo-" + idx);
+ do_show_photo (true, "photo-" + idx + "-sep");
+ do_show_photo (true, "photo-" + idx + "-ispc");
+
+ current_idx = idx;
+ update_position_label ();
+}
+
+function check_position () {
+ var win_pos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
+ var window_height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight;
+ var elem;
+
+ current_idx = 0;
+ for (var i = 1; elem = document.getElementById ("photo-" + i); i++) {
+ /* Display the first photo when scrolled to the very top of the page */
+ if (i == 1 && elem.offsetTop > win_pos + window_height / 2 - elem.clientHeight / 2 + 4) {
+ current_idx = 0;
+ break;
+ }
+ if (elem.offsetTop > win_pos + window_height / 2)
+ break;
+ current_idx = i;
+ }
+
+ /* Update size buttons' anchors */
+  var l = document.getElementsByClassName('size-button');
+ for (var i = 0; i < l.length; i++) {
+ l[i].href = l[i].href.replace(/(#.*)/, '');
+ if (current_idx > 0)
+ l[i].href += '#i' + current_idx;
+ }
+ update_position_label ();
+}
+
+function schedule_check_position () {
+ clearTimeout (scroll_timeout);
+ scroll_timeout = setTimeout (check_position, 100);
+}
+
+
+/* Movement */
+function stop_event (event) {
+  event.preventDefault ();
+  event.stopPropagation ();
+}
+
+function onKeyEvent (event) {
+  if (!event)
+   event = window.event;
+  if (!event)
+   return;
+  if (event.ctrlKey || event.altKey || event.metaKey)
+   return;
+
+ var c = event.which ? event.which : event.keyCode;
+
+ switch (c) {
+ case 32: /* Space */
+ case 39: /* Right arrow */
+ set_position (1);
+ stop_event (event);
+ break;
+ case 8: /* Backspace */
+ if (photostream_mode) {
+ set_position (-1);
+ stop_event (event);
+ }
+ break;
+ case 37: /* Left arrow */
+ set_position (-1);
+ stop_event (event);
+ break;
+ case 27: /* Escape */
+ if (photostream_mode) {
+ cancel_photostream_mode ();
+ stop_event (event);
+ }
+ schedule_check_position ();
+ break;
+ case 68: /* d */
+ toggle_exif_all_visibility ();
+ onResize (null);
+ break;
+ case 65: /* a */
+ enable_animations = ! enable_animations;
+ break;
+ case 70: /* f */
+ toggleFullScreen();
+ break;
+ }
+}
+
+function onScroll (event) {
+ if (ignore_scroll_event)
+ return;
+ if (photostream_mode) {
+ cancel_photostream_mode ();
+ stop_event (event);
+ }
+ schedule_check_position ();
+}
+
+function onResize (event) {
+ if (photostream_mode) {
+ var elem = document.getElementById ("photo-" + current_idx);
+ if (! elem)
+ return;
+ scroll_to_photo (elem);
+ }
+}
+
+function onLoad () {
+ document.addEventListener ("keydown", onKeyEvent, false);
+  window.addEventListener ("scroll", onScroll, false);
+  window.addEventListener ("resize", onResize, false);
+  schedule_check_position ();
+}   
+
+/* this should perform initialization while the page is still loading */
+onLoad();
diff --git a/templates/fluid/styles.css b/templates/fluid/styles.css
new file mode 100644
index 0000000..547ff6f
--- /dev/null
+++ b/templates/fluid/styles.css
@@ -0,0 +1,757 @@
+@import url(fonts.css);
+
+html, body {
+ margin-top: 0;
+ margin-bottom: 0;
+ padding: 0;
+ height: 100%;
+ background: #000000;
+}
+
+/* for the footer to stay down */
+div.content-wrapper {
+ min-height: 100%;
+ position: relative;
+}
+
+div.content {
+ padding: 15px;
+}
+
+div.content div.title {
+ padding-top: 50px;
+ font-weight: 600;
+ font-family: 'Hind', sans-serif;
+ font-size: 46px;
+ color: #EEEEEE;
+/* text-shadow: rgba(240, 230, 199, 0.5) 0 0 2px; */
+}
+
+/* Size buttons tend to show color frame in Firefox */
+a:active, a:visited {
+ color: rgba(0, 255, 0, 0);
+}
+
+div.content div.title a,
+div.content div.text a,
+div.photo div.photo-title a,
+div.photo div.photo-text a,
+div.interspace a,
+div.separator a,
+div.albums div.footnote a {
+ color: #CCCCCC;
+ text-decoration: underline;
+ transition-property: color, text-shadow;
+ transition-duration: 0.5s;
+}
+
+div.content div.title a:hover,
+div.content div.text a:hover,
+div.photo div.photo-title a:hover,
+div.photo div.photo-text a:hover,
+div.interspace a:hover,
+div.separator a:hover,
+div.albums div.footnote a:hover {
+ color: #D0D0D0;
+ text-decoration: underline;
+ text-shadow: 0 0 4px rgba(240, 230, 220, 1.0);
+}
+
+div.content div.text {
+ padding-top: 15px;
+ padding-left: 25px;
+ padding-right: 50px;
+ padding-bottom: 50px;
+ font-family: 'Open Sans', sans-serif;
+ font-size: 14px;
+ color: #C3C3C3;
+}
+
+
+/******************************* NAVIGATION *******************************/
+
+div.navigation {
+ font-size: 14px;
+ font-family: 'Open Sans', sans-serif;
+ background-color: rgba(50, 50, 50, 1.0);
+ color: #E0E0E0;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+div.navigation div.navbar {
+ position: fixed;
+ z-index: 100;
+ top: 0;
+ left: 0;
+ line-height: 36px;
+ text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7);
+ border-right: 1px solid rgba(100, 100, 100, 1.0);
+ border-bottom: 1px solid rgba(100, 100, 100, 1.0);
+ border-bottom-right-radius: 6px;
+ -moz-border-radius: 0 0 6px 0;
+ -webkit-border-radius: 0 0 6px 0;
+ box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.4);
+ -moz-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.4);
+ -webkit-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.4);
+ background: linear-gradient(top, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%);
+ background: -webkit-linear-gradient(top, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%);
+ background: -moz-linear-gradient(top, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%);
+ background: -o-linear-gradient(top, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%);
+ transition: box-shadow 0.3s;
+}
+
+div.navigation div.navbar:hover {
+ box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6);
+ -moz-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6);
+ -webkit-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6);
+}
+
+div.navigation div.nav-right {
+ position: fixed;
+ z-index: 100;
+ top: 0;
+ right: 0;
+ padding: 8px;
+ text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7);
+ border-left: 1px solid rgba(100, 100, 100, 1.0);
+ border-bottom: 1px solid rgba(100, 100, 100, 1.0);
+ border-bottom-left-radius: 6px;
+ -moz-border-radius: 0 0 0 6px;
+ -webkit-border-radius: 0 0 0 6px;
+ box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.4);
+ -moz-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.4);
+ -webkit-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.4);
+ background: linear-gradient(top, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%);
+ background: -webkit-linear-gradient(top, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%);
+ background: -moz-linear-gradient(top, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%);
+ background: -o-linear-gradient(top, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%);
+ transition: box-shadow 0.3s;
+}
+
+div.navigation div.nav-right:hover {
+ box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6);
+ -moz-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6);
+ -webkit-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6);
+}
+
+/* The following navbar code is a heavily modified example from
+ * http://thecodeplayer.com/walkthrough/css3-breadcrumb-navigation
+ * Copyright 2014 TheCodePlayer. All Rights Reserved.
+ */
+div.navbar a {
+ text-decoration: none;
+ float: left;
+ color: white;
+ padding: 0 8px 0 27px;
+ position: relative;
+}
+
+div.navbar .nav-current {
+ float: left;
+ color: #CACACA;
+ padding: 0 14px 0 4px;
+}
+
+div.navbar:hover .nav-current,
+div.navbar .nav-current.av {
+ padding-left: 27px;
+}
+
+div.navbar .nav-current.nav-root,
+div.navbar:hover .nav-current.nav-root {
+ padding-left: 12px;
+}
+
+div.navbar .nav-hidden,
+div.navbar:hover .nav-revhidden {
+ display: none;
+}
+
+div.navbar .nav-revhidden,
+div.navbar:hover .nav-hidden {
+ display: inline;
+}
+
+div.navbar a:first-child {
+ padding-left: 12px;
+}
+
+div.navbar a:hover {
+ background: linear-gradient(top, rgba(128, 128, 128, 1.0) 30%, rgba(60, 60, 60, 1.0) 100%);
+ background: -webkit-linear-gradient(top, rgba(128, 128, 128, 1.0) 30%, rgba(60, 60, 60, 1.0) 100%);
+ background: -moz-linear-gradient(top, rgba(128, 128, 128, 1.0) 30%, rgba(60, 60, 60, 1.0) 100%);
+ background: -o-linear-gradient(top, rgba(128, 128, 128, 1.0) 30%, rgba(60, 60, 60, 1.0) 100%);
+}
+
+div.navbar a:hover:after {
+ background: linear-gradient(325deg, rgba(128, 128, 128, 1.0) 30%, rgba(60, 60, 60, 1.0) 100%) !important;
+ background: -webkit-linear-gradient(325deg, rgba(128, 128, 128, 1.0) 30%, rgba(60, 60, 60, 1.0) 100%) !important;
+ background: -moz-linear-gradient(325deg, rgba(128, 128, 128, 1.0) 30%, rgba(60, 60, 60, 1.0) 100%) !important;
+ background: -o-linear-gradient(325deg, rgba(128, 128, 128, 1.0) 30%, rgba(60, 60, 60, 1.0) 100%) !important;
+}
+
+div.navbar a:nth-child(n+2):after,
+div.navbar:hover a:first-child:after,
+div.navbar a.av:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: -17px;
+ width: 34px;
+ height: 34px;
+ transform: scale(0.707) rotate(45deg);
+ -webkit-transform: scale(0.707) rotate(45deg);
+ -moz-transform: scale(0.707) rotate(45deg);
+ -o-transform: scale(0.707) rotate(45deg);
+ z-index: 2;
+ background: linear-gradient(325deg, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%);
+ background: -webkit-linear-gradient(325deg, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%);
+ background: -moz-linear-gradient(325deg, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%);
+ background: -o-linear-gradient(325deg, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%);
+ box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
+ -webkit-box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
+ -moz-box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
+ border-radius: 0 5px 0 50px;
+ -webkit-border-radius: 0 5px 0 50px;
+ -moz-border-radius: 0 5px 0 50px;
+}
+
+div.navbar a .vert-sep {
+ display: inline-block;
+ position: absolute;
+ top: 6px;
+ right: 6px;
+ width: 1px;
+ height: 23px;
+ background-image: linear-gradient(top, rgba(120, 120, 120, 1.0) 35%, rgba(50, 50, 50, 1.0) 100%);
+ background-image: -webkit-linear-gradient(top, rgba(120, 120, 120, 1.0) 35%, rgba(50, 50, 50, 1.0) 100%);
+ background-image: -moz-linear-gradient(top, rgba(120, 120, 120, 1.0) 35%, rgba(50, 50, 50, 1.0) 100%);
+ background-image: -o-linear-gradient(top, rgba(120, 120, 120, 1.0) 35%, rgba(50, 50, 50, 1.0) 100%);
+ background-repeat: no-repeat;
+}
+
+/* navbar icons */
+div.navbar i.fa {
+ font-size: 24px;
+ opacity: 0.7;
+ transition: opacity 0.3s;
+}
+
+div.navbar:hover a i.fa {
+ opacity: 1.0;
+}
+
+div.navbar i.fa-home {
+ position: relative;
+ top: 2px;
+}
+
+
+/******************************* FOOTER ***********************************/
+
+div.footer {
+ clear: both;
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ text-align: center;
+ padding-top: 5px;
+ padding-bottom: 16px;
+ font-size: 13px;
+ font-family: 'Open Sans', sans-serif;
+ line-height: 1.4;
+ color: #A0A0A0;
+}
+
+div.footer a {
+ color: #CCCCCC;
+ text-decoration: none;
+ transition-property: color, text-shadow;
+ transition-duration: 0.5s;
+}
+
+div.footer a:hover {
+ color: #D0D0D0;
+ text-decoration: underline;
+ text-shadow: 0 0 4px rgba(240, 230, 220, 1.0);
+}
+
+div.footer hr {
+ margin-left: 150px;
+ margin-right: 150px;
+ border: 0;
+ height: 1px;
+ background-image: linear-gradient(left, rgba(128, 128, 128, 0), rgba(128, 128, 128, 0.75) 25%, rgba(128, 128, 128, 0.75) 75%, rgba(128, 128, 128, 0));
+ background-image: -webkit-linear-gradient(left, rgba(128, 128, 128, 0), rgba(128, 128, 128, 0.75) 25%, rgba(128, 128, 128, 0.75) 75%, rgba(128, 128, 128, 0));
+ background-image: -moz-linear-gradient(left, rgba(128, 128, 128, 0), rgba(128, 128, 128, 0.75) 25%, rgba(128, 128, 128, 0.75) 75%, rgba(128, 128, 128, 0));
+ background-image: -o-linear-gradient(left, rgba(128, 128, 128, 0), rgba(128, 128, 128, 0.75) 25%, rgba(128, 128, 128, 0.75) 75%, rgba(128, 128, 128, 0));
+}
+
+div.footer i.fa {
+ padding-right: 3px;
+}
+
+
+/******************************* BUTTONS **********************************/
+
+div.buttons {
+ position: fixed;
+ overflow: hidden;
+ bottom: 30px;
+ left: 30px;
+ z-index: 1;
+ font-size: 13px;
+ box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.3);
+ -webkit-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.3);
+ -moz-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.3);
+ border: solid 1px rgba(100, 100, 100, 1.0);
+ border-radius: 3px;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ transition: box-shadow 0.3s;
+}
+
+div.buttons:hover {
+ box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.45);
+ -webkit-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.45);
+ -moz-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.45);
+}
+
+div.buttons a {
+ width: 30px;
+ height: 30px;
+ text-decoration: none;
+ white-space: nowrap;
+ position: relative;
+ float: left;
+ background-color: #404040;
+ background: linear-gradient(top, rgba(70, 70, 70, 1.0) 15%, rgba(5, 5, 5, 1.0) 100%);
+ background: -webkit-linear-gradient(top, rgba(70, 70, 70, 1.0) 15%, rgba(5, 5, 5, 1.0) 100%);
+ background: -moz-linear-gradient(top, rgba(70, 70, 70, 1.0) 15%, rgba(5, 5, 5, 1.0) 100%);
+ background: -o-linear-gradient(top, rgba(70, 70, 70, 1.0) 15%, rgba(5, 5, 5, 1.0) 100%);
+ border-right: solid 1px rgba(90, 90, 90, 1.0);
+}
+
+div.buttons a:last-child {
+ border-right: none;
+}
+
+div.buttons a i.fa {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ margin: auto;
+ color: white;
+ text-align: center;
+ vertical-align: middle;
+ line-height: 30px;
+ opacity: 0.3;
+ transition: opacity 0.3s;
+}
+
+div.buttons a i.fa.small {
+ font-size: 80%;
+}
+
+div.buttons a i.fa.big {
+ font-size: 120%;
+}
+
+div.buttons a i.fa.active {
+ opacity: 0.75;
+}
+
+div.buttons a:hover i.fa {
+ opacity: 1.0;
+ text-shadow: 0 0 4px rgba(240, 230, 199, 0.8);
+}
+
+
+/******************************* IMAGES ***********************************/
+
+.position_marker {
+ position: relative;
+ top: -100px;
+}
+
+div.photos {
+ text-align: center;
+ padding-bottom: 50px;
+}
+
+div.photos div.photo {
+ margin-top: 60px;
+ margin-bottom: 80px;
+ display: inline-block;
+ text-align: left;
+}
+
+div.photo img {
+ display: block;
+ margin-bottom: 4px;
+}
+
+div.photo div.photo-title {
+ font-family: 'Open Sans', sans-serif;
+ text-align: center;
+ color: #E0E0E0;
+ font-size: 17px;
+ float: left;
+ display: block;
+ margin-top: 4px;
+ margin-bottom: 4px;
+}
+
+div.photo a.exif-icon {
+ text-decoration: none;
+ float: right;
+ display: block;
+ color: #EEEEEE;
+ padding-right: 2px;
+ padding-top: 2px;
+ padding-bottom: 4px;
+ opacity: 0.3;
+ transition-property: opacity, text-shadow;
+ transition-duration: 0.3s;
+}
+
+div.photo a.exif-icon:hover {
+ opacity: 1.0 !important;
+ text-shadow: 0 0 4px rgba(240, 230, 199, 0.8);
+}
+
+div.photo div.photo-text {
+ font-family: 'Open Sans', sans-serif;
+ color: #B0B0B0;
+ font-size: 13px;
+ clear: both;
+ margin-top: 3px;
+ margin-bottom: 3px;
+}
+
+div.photo div.photo-exif {
+ display: none;
+ clear: both;
+ margin-top: 7px;
+ margin-bottom: 2px;
+ background: #303030;
+}
+
+/* this is nested in order to have the parent div fully expanded according
+ to the image width (including variable border size) */
+div.photo div.photo-exif-sub {
+ font-family: 'Open Sans', sans-serif;
+ color: #CCCCCC;
+ font-size: 13px;
+ padding-top: 4px;
+ padding-bottom: 4px;
+}
+
+div.photo div.photo-exif-sub .seg {
+ padding-left: 10px;
+ padding-right: 12px;
+ display: inline-block;
+ white-space: nowrap;
+ line-height: 1.7;
+ transition: color 0.3s;
+}
+
+div.photo div.photo-exif-sub .seg:last-child {
+ padding-right: 3px;
+}
+
+div.photo div.photo-exif-sub .seg i.fa {
+ padding-right: 5px;
+}
+
+div.photo div.photo-exif-sub .seg:hover {
+ color: #E0E0E0;
+}
+
+div.photo div.photo-exif-sub a {
+ color: #D0D0D0;
+ text-decoration: none;
+ transition-property: color, text-shadow;
+ transition-duration: 0.5s;
+}
+
+div.photo div.photo-exif-sub a:hover {
+ color: #E0E0E0;
+ text-decoration: underline;
+ text-shadow: 0 0 4px rgba(240, 230, 220, 1.0);
+}
+
+
+/*************************** IMAGE BORDER STYLES **************************/
+
+div.photo img#border_single {
+ border: solid 1px rgb(128, 128, 128);
+}
+
+div.photo img#border_none {
+}
+
+div.photo img#frame_black {
+ background-color: #909090;
+ padding: 1px;
+ border: 20px solid black;
+}
+
+div.photo img#frame_white {
+ background-color: #444444;
+ padding: 1px;
+ border: 20px solid white;
+}
+
+div.photo img#frame_black_horiz {
+ background-color: #A0A0A0;
+ padding: 1px 0 1px 0;
+ border-top: 35px solid black;
+ border-bottom: 35px solid black;
+}
+
+div.photo img#frame_white_horiz {
+ background-color: #444444;
+ padding: 1px 0 1px 0;
+ border-top: 35px solid white;
+ border-bottom: 35px solid white;
+}
+
+div.photo img#frame_black_vert {
+ background-color: #A0A0A0;
+ padding: 0 1px 0 1px;
+ border-left: 40px solid black;
+ border-right: 40px solid black;
+}
+
+div.photo img#frame_white_vert {
+ background-color: #444444;
+ padding: 0 1px 0 1px;
+ border-left: 40px solid white;
+ border-right: 40px solid white;
+}
+
+div.photo img#border_black {
+ border: 15px solid black;
+}
+
+div.photo img#border_white {
+ border: 15px solid white;
+}
+
+
+/******************************* SEPARATORS *******************************/
+
+div.separator {
+ clear: both;
+ text-align: left;
+ font-variant: small-caps;
+ font-family: 'Open Sans', sans-serif;
+ font-size: 32px;
+ color: #EEEEEE;
+/* text-shadow: rgba(240, 230, 199, 0.6) 0 0 2px; */
+ margin-top: 50px;
+ margin-left: 20px;
+ margin-right: 50px;
+ border-bottom: 1px solid #606060;
+}
+
+div.albums div.separator {
+ padding-top: 40px;
+ margin-left: 0;
+ margin-right: 10px;
+}
+
+div.interspace {
+ clear: both;
+ text-align: left;
+ margin-left: 30px;
+ margin-right: 60px;
+ margin-top: 10px;
+ font-family: 'Open Sans', sans-serif;
+ font-size: 14px;
+ color: #CACACA;
+}
+
+div.albums div.interspace {
+ padding-bottom: 35px;
+ margin-left: 15px;
+ margin-right: 20px;
+}
+
+div.albums div.footnote {
+ clear: both;
+ text-align: left;
+ padding-bottom: 35px;
+ padding-top: 10px;
+ margin-left: 15px;
+ margin-right: 20px;
+ font-family: 'Open Sans', sans-serif;
+ font-size: 14px;
+ color: #CACACA;
+}
+
+
+/******************************* INDEX ITEMS ******************************/
+
+div.albums {
+ text-align: left;
+}
+
+div.index_item {
+ display: block;
+ overflow: hidden;
+ float: left;
+ margin: 20px;
+ border-radius: 8px;
+ -moz-border-radius: 8px;
+ -webkit-border-radius: 8px;
+ border: 1px solid #6b6c69;
+ background-position: 50% 50%;
+ background-repeat: no-repeat;
+ box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.3);
+ -moz-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.3);
+ -webkit-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.3);
+ transition-property: box-shadow;
+ transition-duration: 0.3s;
+}
+
+div.index_item:hover {
+ border: 1px solid #AAAAAA;
+ box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6);
+ -moz-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6);
+ -webkit-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6);
+}
+
+div.index_item a {
+ display: block;
+ position: relative;
+ width: 495px;
+ height: 330px;
+ text-align: left;
+ text-decoration: none;
+ background: linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%);
+ background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%);
+ background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%);
+ background: -o-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%);
+ transition-property: background;
+ transition-duration: 0.3s;
+}
+
+div.index_item a:hover {
+ background: linear-gradient(top, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.0) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%);
+ background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.0) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%);
+ background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.0) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%);
+ background: -o-linear-gradient(top, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.0) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%);
+}
+
+div.index_item span.album_text {
+ font-family: 'Hind', sans-serif;
+ font-size: 34px;
+ font-weight: 700;
+ color: #F3F3F3;
+ text-shadow: 0 0 2px rgba(0, 0, 0, 1);
+ position: absolute;
+ bottom: 55px;
+ left: 15px;
+ line-height: 1.1;
+ padding-right: 15px;
+ transition-property: text-shadow, color;
+ transition-duration: 0.3s;
+}
+
+div.index_item a:hover .album_text {
+ color: #FFFFFF;
+}
+
+div.index_item .album_subtext {
+ font-family: 'Open Sans', sans-serif;
+ font-size: 15px;
+ color: #D0D0D0;
+ text-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
+ position: absolute;
+ top: 277px;
+ left: 15px;
+ padding-right: 15px;
+ line-height: 1.3;
+ transition-property: color;
+ transition-duration: 0.3s;
+}
+
+div.index_item:hover .album_subtext {
+ color: #E9E9E9;
+}
+
+div.index_item .album_note {
+ font-family: 'Open Sans', sans-serif;
+ font-size: 11px;
+ color: #B0B0B0;
+ text-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
+ position: absolute;
+ right: 12px;
+ bottom: 10px;
+}
+
+div.index_item .album_protected_note {
+ font-family: 'Open Sans', sans-serif;
+ color: #c8bc00;
+ font-size: 80%;
+ position: absolute;
+ bottom: 7px;
+ left: 15px;
+}
+
+
+/****************************** PHOTOSTREAM *******************************/
+
+.photostream-force-show {
+ visibility: visible !important;
+}
+.photostream-force-hide {
+ visibility: hidden !important;
+}
+
+.photostream-hide {
+}
+
+#photostream-close {
+ position: fixed;
+ z-index: 100;
+ top: 10px;
+ right: 15px;
+ font-size: 32px;
+ text-decoration: none;
+ color: #EEEEEE;
+ opacity: 0.4;
+ transition-property: opacity, text-shadow;
+ transition-duration: 0.3s;
+}
+
+#photostream-close:hover {
+ text-shadow: 0 0 7px rgba(240, 230, 199, 0.8);
+ opacity: 1;
+}
+
+#photostream-position-label {
+ position: fixed;
+ z-index: 101;
+ bottom: 15px;
+ right: 15px;
+ font-family: 'Open Sans', sans-serif;
+ font-weight: 600;
+ font-size: 12px;
+ text-decoration: none;
+ color: #EEEEEE;
+ opacity: 0.5;
+ transition-property: opacity, text-shadow;
+ transition-duration: 0.3s;
+}
+
+#photostream-position-label:hover {
+ opacity: 1;
+ text-shadow: 0 0 7px rgba(240, 230, 199, 0.4);
+}
+
diff --git a/templates/fluid/template_album.html b/templates/fluid/template_album.html
new file mode 100644
index 0000000..0552074
--- /dev/null
+++ b/templates/fluid/template_album.html
@@ -0,0 +1,109 @@
+<?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">var NUM_PHOTOS = $(TOTAL_ITEMS);</script>
+ <script type="text/javascript" src="$(TEMPLATES_PATH)scripts.js">onLoad();</script>
+</head>
+<body>
+
+
+<!-- ## Navigation bar -->
+<div class="navigation photostream-hide">
+ <div class="navbar">
+ <!-- $(BEGIN_NAV_BAR) -->
+ <!-- $(BEGIN_NAV_BAR_FIRST) -->
+ <a href="$(NAV_BAR_ELEM_LINK)" class="av" rel="home"><i class="fa fa-home"></i> <!-- $(NAV_BAR_ELEM_TITLE) -->&nbsp;</a>
+ <!-- $(END_NAV_BAR_FIRST) -->
+ <!-- $(BEGIN_NAV_BAR_ELEM) -->
+ <a href="$(NAV_BAR_ELEM_LINK)"><!-- $(NAV_BAR_ELEM_TITLE) --></a>
+ <!-- $(END_NAV_BAR_ELEM) -->
+ <!-- $(BEGIN_NAV_BAR_LAST) -->
+ <a href="$(NAV_BAR_ELEM_LINK)"><!-- $(NAV_BAR_ELEM_TITLE) --></a>
+ <!-- $(END_NAV_BAR_LAST) -->
+ <!-- $(BEGIN_NAV_BAR_CURRENT) -->
+ <span class="nav-current av"><!-- $(NAV_BAR_ELEM_TITLE) --></span>
+ <!-- $(END_NAV_BAR_CURRENT) -->
+ <!-- $(BEGIN_NAV_BAR_CURRENT_ROOT) -->
+ <span class="nav-current nav-root"><i class="fa fa-home"></i> <!-- $(NAV_BAR_ELEM_TITLE) --></span>
+ <!-- $(END_NAV_BAR_CURRENT_ROOT) -->
+ <!-- $(END_NAV_BAR) -->
+ </div>
+ <div class="nav-right"><!-- $(TOTAL_ITEMS) --> photos</div>
+</div>
+
+<div class="content-wrapper">
+<div class="content">
+ <div class="title photostream-hide"><!-- $(TITLE) --></div>
+ <div class="text photostream-hide"><!-- $(DESCRIPTION) --></div>
+
+<div class="photos photostream-hide">
+ <!-- $(BEGIN_IMG_LIST) -->
+ <!-- $(BEGIN_LIST_PICTURE) -->
+ <div class="photo" id="photo-$(ITEM_INDEX)">
+ <div class="position_marker" id="i$(ITEM_INDEX)"></div>
+ <img src="$(IMG_SRC)" width="$(IMG_SIZE_W)" height="$(IMG_SIZE_H)" alt="" id="$(value(BORDER_STYLE))"/>
+ <div class="photo-title"><!-- $(IMG_TITLE) --></div>
+ <a href="javascript: toggle_exif_visibility($(ITEM_INDEX));" class="exif-icon" id="exif_icon-$(ITEM_INDEX)" title="Show/hide metadata information"><i class="fa fa-info"></i></a>
+ <div class="photo-text" style="max-width: $(IMG_SIZE_W)px;"><!-- $(IMG_DESCRIPTION) --></div>
+ <div class="photo-exif" id="exif_table-$(ITEM_INDEX)">
+ <div class="photo-exif-sub" style="max-width: $(IMG_SIZE_W)px;">
+ <a href="#i$(ITEM_INDEX)"><span class="seg" title="Image reference link"><i class="fa fa-anchor"></i><!-- $(IMG_FILENAME) --></span></a>
+ <!-- $(ifdef(HAVE_EXIF)) -->
+ <span class="seg" title="Date and time"><i class="fa fa-calendar"></i><!-- $(get_exif_value_fixed("Exif.Photo.DateTimeOriginal")) --></span>
+ <span class="seg" title="Shutter speed and aperture number"><i class="fa fa-cog"></i><!-- $(get_exif_value_fixed("Exif.Photo.ExposureTime")) --> &nbsp; <!-- $(get_exif_value_fixed("Exif.Photo.FNumber")) --></span>
+ <span class="seg" title="Focal length"><i class="fa fa-sliders"></i><!-- $(get_exif_value_fixed("Exif.Photo.FocalLength")) --></span>
+ <span class="seg" title="ISO Speed setting"><i class="fa fa-film"></i>ISO <!-- $(get_exif_value_fixed("Exif.Photo.ISOSpeedRatings")) --></span>
+ <span class="seg" title="Camera model"><i class="fa fa-camera"></i><!-- $(get_exif_value_fixed("Exif.Image.Model")) --></span>
+ <!-- $(if (have_exif_key ("__disabled__Exif.CanonSi.CameraTemperature"))) -->
+ <span class="seg" title="Camera temperature"><i class="fa fa-cloud"></i><!-- $(get_exif_value_fixed("Exif.CanonSi.CameraTemperature")) --></span>
+ <!-- $(endif (have_exif_key ())) -->
+ <!-- $(endif(HAVE_EXIF)) -->
+ </div>
+ </div>
+ </div>
+ <br/>
+ <!-- $(END_LIST_PICTURE) -->
+ <!-- $(BEGIN_LIST_SEPARATOR) -->
+ <div class="separator" id="photo-$(ITEM_INDEX)-sep"><!-- $(LIST_SEPARATOR_TITLE) --></div>
+ <!-- $(END_LIST_SEPARATOR) -->
+ <!-- $(BEGIN_LIST_INTERSPACE) -->
+ <div class="interspace" id="photo-$(ITEM_INDEX)-ispc"><!-- $(LIST_INTERSPACE_TITLE) --></div>
+ <!-- $(END_LIST_INTERSPACE) -->
+ <!-- $(END_IMG_LIST) -->
+
+ <!-- ## Footnote, also acts as a bottom border -->
+ <div class="footnote"><!-- $(FOOTNOTE) --></div>
+</div>
+
+
+</div>
+
+<!-- ## Buttons -->
+<div class="buttons photostream-hide">
+ <a href="index.html" title="Small size" class="size-button"><i class="fa fa-picture-o small <!-- $(ifdef(THEME_SIZE_PREVIEW)) -->active<!-- $(endif(THEME_SIZE_PREVIEW)) -->"></i></a>
+ <!-- $(if (have_album_image_size ("original"))) -->
+ <a href="index_big.html" title="Normal size" class="size-button"><i class="fa fa-picture-o <!-- $(ifdef(THEME_SIZE_BIG)) -->active<!-- $(endif(THEME_SIZE_BIG)) -->"></i></a>
+ <!-- $(endif (have_album_image_size ())) -->
+ <!-- $(if (have_album_image_size ("hires"))) -->
+ <a href="index_hires.html" title="Large size" class="size-button"><i class="fa fa-picture-o big <!-- $(ifdef(THEME_SIZE_HIRES)) -->active<!-- $(endif(THEME_SIZE_HIRES)) -->"></i></a>
+ <!-- $(endif (have_album_image_size ())) -->
+</div>
+
+<a class="photostream-force-hide" id="photostream-close" href="javascript: cancel_photostream_mode();" title="Quit the photo stream mode"><i class="fa fa-times"></i></a>
+<span class="photostream-force-hide" id="photostream-position-label">1 / <!-- $(TOTAL_ITEMS) --></span>
+
+<!-- ## Footer -->
+<div class="footer photostream-hide">
+ <hr /><!-- $(FOOTER) -->
+</div>
+</div>
+
+
+</body>
+</html>
diff --git a/templates/fluid/template_index.html b/templates/fluid/template_index.html
new file mode 100644
index 0000000..74833dd
--- /dev/null
+++ b/templates/fluid/template_index.html
@@ -0,0 +1,77 @@
+<?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" />
+</head>
+<body>
+
+
+<!-- ## Navigation bar -->
+<div class="navigation photostream-hide">
+ <div class="navbar">
+ <!-- $(BEGIN_NAV_BAR) -->
+ <!-- $(BEGIN_NAV_BAR_FIRST) -->
+ <a href="$(NAV_BAR_ELEM_LINK)" class="av" rel="home"><i class="fa fa-home"></i> <!-- $(NAV_BAR_ELEM_TITLE) -->&nbsp;</a>
+ <!-- $(END_NAV_BAR_FIRST) -->
+ <!-- $(BEGIN_NAV_BAR_ELEM) -->
+ <a href="$(NAV_BAR_ELEM_LINK)"><!-- $(NAV_BAR_ELEM_TITLE) --></a>
+ <!-- $(END_NAV_BAR_ELEM) -->
+ <!-- $(BEGIN_NAV_BAR_LAST) -->
+ <a href="$(NAV_BAR_ELEM_LINK)"><!-- $(NAV_BAR_ELEM_TITLE) --></a>
+ <!-- $(END_NAV_BAR_LAST) -->
+ <!-- $(BEGIN_NAV_BAR_CURRENT) -->
+ <span class="nav-current av"><!-- $(NAV_BAR_ELEM_TITLE) --></span>
+ <!-- $(END_NAV_BAR_CURRENT) -->
+ <!-- $(BEGIN_NAV_BAR_CURRENT_ROOT) -->
+ <span class="nav-current nav-root"><i class="fa fa-home"></i> <!-- $(NAV_BAR_ELEM_TITLE) --></span>
+ <!-- $(END_NAV_BAR_CURRENT_ROOT) -->
+ <!-- $(END_NAV_BAR) -->
+ </div>
+ <div class="nav-right"><!-- $(TOTAL_ITEMS) --> albums</div>
+</div>
+
+<div class="content-wrapper">
+<div class="content">
+ <div class="title"><!-- $(TITLE) --></div>
+ <div class="text"><!-- $(DESCRIPTION) --></div>
+
+<div class="albums">
+ <!-- $(BEGIN_IMG_LIST) -->
+ <!-- $(BEGIN_LIST_PICTURE) -->
+ <div class="index_item" style="background-image:url($(IMG_SRC_THUMB))">
+ <div class="position_marker" id="$(IMG_POS_MARKER)"></div>
+ <a href="$(ALBUM_SUBPATH)">
+ <span class="album_text"><!-- $(IMG_TITLE) --></span><br />
+ <span class="album_subtext"><!-- $(IMG_DESCRIPTION) --></span>
+ <!-- $(ifdef(IS_PROTECTED)) --><span class="album_protected_note"><br />(This album is password protected)</span><!-- $(endif(IS_PROTECTED)) -->
+ <span class="album_note">(<!-- $(ALBUM_NUM_ITEMS) --> items)</span>
+ </a>
+ </div>
+ <!-- $(END_LIST_PICTURE) -->
+ <!-- $(BEGIN_LIST_SEPARATOR) -->
+ <div class="separator"><!-- $(LIST_SEPARATOR_TITLE) --></div>
+ <!-- $(END_LIST_SEPARATOR) -->
+ <!-- $(BEGIN_LIST_INTERSPACE) -->
+ <div class="interspace"><!-- $(LIST_INTERSPACE_TITLE) --></div>
+ <!-- $(END_LIST_INTERSPACE) -->
+ <!-- $(END_IMG_LIST) -->
+
+ <!-- ## Footnote, also acts as a bottom border -->
+ <div class="footnote"><!-- $(FOOTNOTE) --></div>
+</div>
+
+</div>
+
+<!-- ## Footer -->
+<div class="footer photostream-hide">
+ <hr /><!-- $(FOOTER) -->
+</div>
+</div>
+
+</body>
+</html>
generated by cgit v1.2.3 (git 2.46.0) at 2026-01-12 05:28:46 +0000