GNOME.org
 

[gthumb: 51/57] [weblabums] ported the Wiki theme to the new syntax

commit 5964cc48980514e3fd23bdb8fe43933cec2ba868
Author: Paolo Bacchilega <paobac src gnome org>
Date:   Sun Jun 20 10:59:01 2010 +0200

    [weblabums] ported the Wiki theme to the new syntax

 .../webalbums/data/albumthemes/Wiki/Makefile.am    |   12 +-
 .../webalbums/data/albumthemes/Wiki/image.gthtml   |  227 +++++--------
 .../webalbums/data/albumthemes/Wiki/index.gthtml   |  129 ++++---
 .../webalbums/data/albumthemes/Wiki/layout.css     |   90 -----
 .../webalbums/data/albumthemes/Wiki/preview.png    |  Bin 37324 -> 18919 bytes
 .../webalbums/data/albumthemes/Wiki/style.css      |  377 ++++++++++++++++----
 .../data/albumthemes/Wiki/thumbnail.gthtml         |   79 +---
 7 files changed, 480 insertions(+), 434 deletions(-)
---
diff --git a/extensions/webalbums/data/albumthemes/Wiki/Makefile.am b/extensions/webalbums/data/albumthemes/Wiki/Makefile.am
index 0407944..6d73dc0 100644
--- a/extensions/webalbums/data/albumthemes/Wiki/Makefile.am
+++ b/extensions/webalbums/data/albumthemes/Wiki/Makefile.am
@@ -1,15 +1,11 @@
-gthtml_files =			\
+themename = Wiki
+themedir = $(datadir)/gthumb/albumthemes/$(themename)
+theme_DATA =			\
 	image.gthtml		\
 	index.gthtml		\
-	thumbnail.gthtml
-
-themename  = Wiki
-themedir   = $(datadir)/gthumb/albumthemes/$(themename)
-theme_DATA =			\
 	preview.png		\
-	layout.css		\
 	style.css		\
-	$(gthtml_files)
+	thumbnail.gthtml
 
 EXTRA_DIST = $(theme_DATA) 
 
diff --git a/extensions/webalbums/data/albumthemes/Wiki/image.gthtml b/extensions/webalbums/data/albumthemes/Wiki/image.gthtml
index f1b82c8..864a820 100644
--- a/extensions/webalbums/data/albumthemes/Wiki/image.gthtml
+++ b/extensions/webalbums/data/albumthemes/Wiki/image.gthtml
@@ -1,156 +1,103 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd";>
-<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="<gthumb:language/>">
+<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="<%= language %>">
 <head>
-<gthumb:if images > 1 />
-  <title><gthumb:header/> (<gthumb:image_idx/>/<gthumb:images/>)</title>
-<gthumb:else/>
-  <title><gthumb:header/></title>
-<gthumb:end/>
+<% if images > 1 %>
+  <title><%= header %> (<%= image_idx %>/<%= images %>)</title>
+<% else %>
+  <title><%= header %></title>
+<% end %>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta name="Generator" content="gThumb Image Viewer" />
-  <link href="<gthumb:theme_link src='layout.css'/>" rel="stylesheet" type="text/css" />
-  <link href="<gthumb:theme_link src='style.css'/>" rel="stylesheet" type="text/css" />
+  <link href="<%= theme_link src='style.css' %>" rel="stylesheet" type="text/css" />
 </head>
 <body>
+  <div id="wrapper">
+    <div id="main">
 
-  <!-- Header -->
-  <div class="title">
-    <gthumb:header/>
-  </div>
-
-  <!-- Navigation Bar -->
-  <div class="nav_bar">
-    <span class="link">
-      <gthumb:if image_idx > 1 />
-        <a href="<gthumb:image_link idx_relative="-1"/>">
-          <gthumb:text>Previous</gthumb:text>
-        </a>
-      <gthumb:else/>
-        <span class="nolink">
-          <gthumb:text>Previous</gthumb:text>
-        </span>
-      <gthumb:end/>
-    </span>
+      <h1 class="image-title">
+        <%= header %>
+      </h1>
 
-    <span class="link">
-      <gthumb:if image_idx < images />
-        <a href="<gthumb:image_link idx_relative="+1"/>">
-          <gthumb:text>Next</gthumb:text>
-        </a>
-      <gthumb:else/>
-        <span class="nolink">
-          <gthumb:text>Next</gthumb:text>
-        </span>
-      <gthumb:end/>
-    </span>
+      <% if images > 1 %>
+      <ul class="page-navigation">
+        <li class="status">
+          <%= translate 'Image %d of %d', image_idx, images %>
+        </li>      
+        <% if image_idx > 1  %>
+        <li>
+          <a href="<%= image_link idx_relative="-1" %>" title="<%= translate 'View the previous image' %>">
+            <%= translate 'Previous' %>
+          </a>
+        </li>
+        <% else %>
+        <li class="disabled">
+          <span><%= translate 'Previous' %></span>
+        </li>        
+        <% end %>        
+        <% if image_idx < images %>
+        <li class="separator">
+          <a href="<%= image_link idx_relative="+1" %>" title="<%= translate 'View the next image' %>">
+            <%= translate 'Next' %>
+          </a>
+        </li>
+        <% else %>
+        <li class="disabled separator">
+          <span><%= translate 'Next' %></span>
+        </li> 
+        <% end %>      
+        <li>
+          <a href="<%= page_link idx_relative="0" image_idx %>" title="<%= translate 'Go back to the index' %>"">
+            <%= translate 'Index' %>
+          </a>
+        </li>      
+        <li class="ultimo">
+        </li>
+      </ul>
+      <% end %> 
+      
+      <% if image_description_enabled || image_attributes_enabled %>
+      <div class="image-preview">
+      <% else %>      
+      <div class="image-preview image-preview-centered">
+      <% end %>
+        <div class="image-preview-container">
+        <% if copy_originals %>    
+        <a href="<%= file_name with_relative_path %>"><%= image preview class="preview" %></a>
+        <% else %>
+        <%= image preview class="preview" %>
+        <% end %>
+        </div>
+      </div>      
+    
+      <% for_each image_caption %>
+        <% if first_item %>
+          <dl class="caption-container">
+        <% end %>
+    
+            <dt class="property"> <%= item_attribute display_name %> </dt>
+            <dd class="property-value"> <%= item_attribute value %> </dd>
+    
+        <% if last_item %>
+            <dt class="last property"></dt>
+            <dd class="last property-value"></dd>
+          </dl>
+        <% end %>
+      <% end %>
 
-    <span class="link">
-      <a href="<gthumb:page_link idx_relative=0 image_idx/>">
-        <gthumb:text>Index</gthumb:text>
-      </a>
-    </span>
-  </div>
+      <% if image_description_enabled && image_attribute_available('general::description') %>
+      <div class="image-comment">
+        <%= image_attribute id="general::description" %>
+      </div>
+      <% end %>
 
-  <!-- Image preview -->
-  <div class="preview">
-    <a href="<gthumb:file_name with_relative_path/>">
-      <gthumb:image preview class="preview"/>
-    </a>
+    </div>    
   </div>
-
-<!-- Comment and Exif data -->
-<div class="properties">
-
-<div class="preview_comment">
-<span class="comment">
-  <gthumb:if comment_visibility_image/>
-    <gthumb:comment /> <br />
-  <gthumb:end/>
-  <gthumb:if place_visibility_image/>
-    <gthumb:place /> <br />
-  <gthumb:end/>
-  <gthumb:if date_time_visibility_image/>
-    <gthumb:date_time/>
-  <gthumb:end/>
-</span><br />
-</div>
-
-<table class="properties" summary="image properties">
-<gthumb:if file_name_visibility_image/>
-<tr>
-  <td><span class="property"><gthumb:text>Image</gthumb:text></span></td>
-  <td><span class="property_value file_name"><gthumb:file_name utf8="1" /></span></td>
-</tr>
-<gthumb:end/>
-<gthumb:if image_dim_visibility_image/>
-<tr>
-  <td><span class="property"><gthumb:text>Dimensions</gthumb:text></span></td>
-  <td><span class="property_value image_dim"><gthumb:image_dim/> pixels</span></td>
-</tr>
-<gthumb:end/>
-<gthumb:if file_size_visibility_image/>
-<tr>
-  <td><span class="property"><gthumb:text>Bytes</gthumb:text></span></td>
-  <td><span class="property_value file_size"><gthumb:file_size/></span></td>
-</tr>
-<gthumb:end/>
-<gthumb:if exif_date_time_visibility_image/>
-<tr>
-  <td><span class="property"><gthumb:text>Date</gthumb:text></span></td>
-  <td><span class="property_value date_time"><gthumb:exif:date_time/></span></td>
-</tr>
-<gthumb:end/>
-<gthumb:if exif_exposure_time_visibility_image/>
-<tr>
-  <td><span class="property"><gthumb:text>Exposure time</gthumb:text></span></td>
-  <td><span class="property_value exif"><gthumb:exif:exposure_time/></span></td>
-</tr>
-<gthumb:end/>
-<gthumb:if exif_exposure_mode_visibility_image/>
-<tr>
-  <td><span class="property"><gthumb:text>Exposure mode</gthumb:text></span></td>
-  <td><span class="property_value exif"><gthumb:exif:exposure_mode/></span></td>
-</tr>
-<gthumb:end/>
-<gthumb:if exif_flash_visibility_image/>
-<tr>
-  <td><span class="property"><gthumb:text>Flash</gthumb:text></span></td>
-  <td><span class="property_value exif"><gthumb:exif:flash/></span></td>
-</tr>
-<gthumb:end/>
-<gthumb:if exif_shutter_speed_visibility_image/>
-<tr>
-  <td><span class="property"><gthumb:text>Shutter speed</gthumb:text></span></td>
-  <td><span class="property_value exif"><gthumb:exif:shutter_speed/></span></td>
-</tr>
-<gthumb:end/>
-<gthumb:if exif_aperture_value_visibility_image/>
-<tr>
-  <td><span class="property"><gthumb:text>Aperture value</gthumb:text></span></td>
-  <td><span class="property_value exif"><gthumb:exif:aperture_value/></span></td>
-</tr>
-<gthumb:end/>
-<gthumb:if exif_focal_length_visibility_image/>
-<tr>
-  <td><span class="property"><gthumb:text>Focal length</gthumb:text></span></td>
-  <td><span class="property_value exif"><gthumb:exif:focal_length/></span></td>
-</tr>
-<gthumb:end/>
-<gthumb:if exif_camera_model_visibility_image/>
-<tr>
-  <td><span class="property"><gthumb:text>Camera model</gthumb:text></span></td>
-  <td><span class="property_value exif"><gthumb:exif:camera_model/></span></td>
-</tr>
-<gthumb:end/>
-</table>
-</div>
-
-  <!-- Footer -->
-  <div class="copyright">
-    <gthumb:footer/>
+  <div id="footer">
+    <div id="footer-2">
+      <%= footer %>
+    </div>
   </div>
-
 </body>
 </html>
diff --git a/extensions/webalbums/data/albumthemes/Wiki/index.gthtml b/extensions/webalbums/data/albumthemes/Wiki/index.gthtml
index c576b21..e29c914 100644
--- a/extensions/webalbums/data/albumthemes/Wiki/index.gthtml
+++ b/extensions/webalbums/data/albumthemes/Wiki/index.gthtml
@@ -1,70 +1,85 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd";>
-<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="<gthumb:language/>">
+<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="<%= language %>">
 <head>
-<gthumb:if pages > 1 />
-  <title><gthumb:header/> (<gthumb:page_idx/>/<gthumb:pages/>)</title>
-<gthumb:else/>
-  <title><gthumb:header/></title>
-<gthumb:end/>
+<% if pages > 1 %>
+  <title><%= header %> (<%= page_idx %>/<%= pages %>)</title>
+<% else %>
+  <title><%= header %></title>
+<% end %>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta name="Generator" content="gThumb Image Viewer" />
-  <link href="<gthumb:theme_link src='layout.css'/>" rel="stylesheet" type="text/css" />
-  <link href="<gthumb:theme_link src='style.css'/>" rel="stylesheet" type="text/css" />
+  <link href="<%= theme_link src='style.css' %>" rel="stylesheet" type="text/css" />
 </head>
-<gthumb:set_var thumbnail_width="140" thumbnail_height="140"/>
-<gthumb:set_var preview_width="550" preview_height="500"/>
+<% set_var thumbnail_width="140" thumbnail_height="140" squared %>
+<% set_var preview_width="650" preview_height="650" if="image_description_enabled || image_attributes_enabled" %>
+<% set_var preview_width="750" preview_height="750" unless="image_description_enabled || image_attributes_enabled" %>
 <body>
+  <div id="wrapper">
+    <div id="main">
+    
+      <h1 class="index-title">
+        <%= header %>
+      </h1>
+      
+      <% if pages > 1 %>
+      <ul class="page-navigation">
+        <li class="status">
+          <%= translate 'Page %d of %d', page_idx, pages %> 
+        </li>
+        <% if page_idx > 1  %>
+        <li>
+          <a href="<%= page_link idx_relative="-1" %>" title="<%= translate 'View the previous page' %>">
+            <%= translate 'Previous' %>
+          </a>
+        </li>
+        <% else %>
+        <li class="disabled">
+          <span><%= translate 'Previous' %></span>
+        </li>        
+        <% end %>        
+        <% if page_idx < pages %>
+        <li class="separator">
+          <a href="<%= page_link idx_relative="+1" %>" title="<%= translate 'View the next page' %>">
+            <%= translate 'Next' %>
+          </a>
+        </li>
+        <% else %>
+        <li class="disabled separator">
+          <span><%= translate 'Next' %></span>
+        </li> 
+        <% end %>      
+        <% for_each i in 1..pages %>
+        <% if i == page_idx %>
+        <li class="current number">
+          <span><%= eval i %></span>
+        </li>
+        <% else %>
+        <li class="number">
+          <a href="<%= page_link idx="i" %>" title="<%= translate 'View page %d', i %>">
+            <%= eval i %>
+          </a>
+        </li>
+        <% end %>
+        <li>
+        </li>        
+        <% end %>        
+        <li class="ultimo">
+        </li>
+      </ul>
+      <% end %>
+          
+      <div id="thumbnail-list">
+        <%= thumbnails %>
+      </div>
 
-  <!-- Header -->
-  <div class="title">
-    <gthumb:header/>
+    </div>    
   </div>
-
-
-  <!-- Navigation Bar -->
-  <gthumb:if pages > 1 />
-  <div class="nav_bar">
-    <span class="link">
-      <gthumb:if page_idx > 1 />
-        <a href="<gthumb:page_link idx_relative="-1"/>">
-          <gthumb:text>Previous</gthumb:text>
-        </a>
-      <gthumb:else/>
-        <span class="nolink">
-          <gthumb:text>Previous</gthumb:text>
-        </span>
-      <gthumb:end/>
-    </span>
-
-    <span class="link">
-      <gthumb:if page_idx < pages />
-        <a href="<gthumb:page_link idx_relative="+1"/>">
-          <gthumb:text>Next</gthumb:text>
-        </a>
-      <gthumb:else/>
-        <span class="nolink">
-          <gthumb:text>Next</gthumb:text>
-        </span>
-      <gthumb:end/>
-    </span>
-  </div>
-  <gthumb:end/>
-
-
-  <!-- Index -->
-  <div class="thumbnails">
-    <table class="thumbnails" summary="thumbnails">
-      <gthumb:table/>
-    </table>
+  <div id="footer">
+    <div id="footer-2">
+      <%= footer %>
+    </div>
   </div>
-
-
-  <!-- Footer -->
-  <div class="copyright">
-    <gthumb:footer/>
-  </div>
-
 </body>
 </html>
diff --git a/extensions/webalbums/data/albumthemes/Wiki/preview.png b/extensions/webalbums/data/albumthemes/Wiki/preview.png
index 8eb68f6..1009371 100644
Binary files a/extensions/webalbums/data/albumthemes/Wiki/preview.png and b/extensions/webalbums/data/albumthemes/Wiki/preview.png differ
diff --git a/extensions/webalbums/data/albumthemes/Wiki/style.css b/extensions/webalbums/data/albumthemes/Wiki/style.css
index d54b409..056e0fa 100644
--- a/extensions/webalbums/data/albumthemes/Wiki/style.css
+++ b/extensions/webalbums/data/albumthemes/Wiki/style.css
@@ -1,79 +1,298 @@
-/* Gthumb "Wiki" style */
-
-  body {
-    background: white;
-  }
-
-  td.photo {
-    border: 1px solid #ccc;
-  }
-
-  table.nav_button {
-    border: 0px outset #bbb;
-  }
-
-  div.copyright {
-    font-size: 8pt;
-    color: #888;
-  }
-
-  img.photo_center {
-    border: 1px solid #ccc;
-  }
-
-  img.preview {
-    border: 1px solid #ccc;
-  }
-
-  .comment, .property, .property_value {
-    font-size: 9pt;
-  }
-
-  .property_value file_name {
-    font-family: monospace;
-  }
-
-  .property {
-    font-weight: bold;
-  }
-
-  .comment, .property_value {
-    font-size: 9pt;
-  }
-  
-  .comment {
-    font-style: italic;
-  }
-
-  div.title {
-    color: #000;
-  }
-
-  span.page_index {
-    color: #000;
-  }
-
-  /* links */
-
-  a:link { 
-    color: #0000FF;
-    text-decoration: none;
-  }
-
-  a:visited { 
-    color: #0000FF;
-    text-decoration: none;
-  }
-
-  a:hover {
-    color: #0000FF;
-    text-decoration: underline;
-  }
-
-  span.nolink {
-    color: #AAA;
-  }
-
-  span.link {
-    padding: 10px;;
-  }
+/* gthumb "Wiki" style, v. 2010-06-20 */
+
+* {
+	margin: 0;
+}
+
+html, body {
+	height: 100%;
+	background: white;
+	font-family: "Trebuchet MS", Arial, sans-serif, Tahoma;
+}
+
+#wrapper {
+	min-height: 100%;
+	height: auto !important;
+	height: 100%;
+}
+
+#main {
+	overflow: auto;
+	padding-bottom: 4em;	
+}
+
+#footer {	
+	position: relative;
+	margin-top: -4em;
+	height: 2em;
+	clear: both;
+	text-align: center;
+	color: #c60;
+	font-weight: normal;
+	font-size: 11px;
+}
+
+#footer-2 {
+	border-top: 1px dotted #aaa;	
+	margin-top: 1em;
+	padding-top: 1em;
+	margin-left: 15px;
+	margin-right: 15px;
+}
+
+/* image page */
+
+h1.image-title,
+h1.index-title {	
+	text-align: center;
+	margin: 20px 15px 10px 15px;
+	border-bottom: 1px dotted #aaa;	
+	font-weight: normal;
+	font-size: 24px;
+	color: #cc6600;
+}
+
+div.image-preview {	
+	float: left;
+	margin: 15px;
+	text-align: center;
+}
+
+div.image-preview-centered {
+	float: none;
+	margin: 40px auto 0 auto;
+	text-align: center;
+}
+
+div.image-preview-container {
+	width: 650px;
+}
+
+div.image-preview-centered div.image-preview-container {
+	width: auto;
+}
+
+div.image-preview-container img {
+	-webkit-box-shadow: 0px 0px 4px #333;
+	-moz-box-shadow: 0px 0px 4px #333;
+	box-shadow: 0px 0px 4px #333;
+	border: 0;
+}
+
+div.image-comment {
+	float: right;
+	display: block;
+	margin: 15px 15px 0 0;
+	padding: 3px;
+	text-align: left;
+	font-size: 10px;
+	font-family: sans;
+	overflow: auto;
+	width: 300px;
+	border: 0px solid #aaa;
+	clear: right;
+	color: #444;
+}
+
+dl.caption-container {
+	float: right;
+	display: block;
+	margin: 15px 15px 0 0;
+	padding: 3px;
+	text-align: center;	
+	font-size: 10px;
+	font-family: sans;
+	width: 300px;
+	border: 1px solid #aaa;
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	border-radius: 4px;
+	-moz-box-shadow: 1px 1px 1px #ccc;
+	-webkit-box-shadow: 1px 1px 1px #ccc;
+	box-shadow: 1px 1px 1px #ccc;
+}
+
+dl.caption-container dt {
+	font-weight: normal;
+	cursor: default;
+	float: left;
+	clear: left;
+	margin: 0 5px 0 0;
+	padding: 0;
+	color: #185390;
+	width: 120px;
+	text-align: right;
+}
+
+dl.caption-container dd {	
+	float: left;
+	margin: 0;
+	padding: 0;
+	color: #444;
+}
+
+dl.caption-container dd.last {
+	clear: both;
+	display: block;
+	float: none;
+}
+
+/* index page */
+
+ul.page-navigation {
+	display: block;
+	list-style-type: none;	
+	margin: 0 0 20px 0;
+	padding: 10px 15px 10px 15px;
+}
+
+ul.page-navigation li {
+	display: block;
+	text-align: center;
+	float: left;
+	font-size: 11px;
+	margin-right: 5px;
+}
+
+ul.page-navigation li.status {
+	padding-top: 4px;
+	color: #cc6600;
+	margin-right: 15px;
+}
+
+ul.page-navigation li.current span,
+ul.page-navigation li.disabled span,
+ul.page-navigation li a  {
+	display: block;
+	height: 1.3em;
+	padding: 3px;
+}
+
+ul.page-navigation li.number span,
+ul.page-navigation li.number a {
+	width: 1.3em;
+}
+
+ul.page-navigation li.current span {
+	border: 1px solid #669517;
+	cursor: default;
+	background: #669517;
+	color: #fff;
+	font-weight: bold;
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	border-radius: 4px;
+	-moz-box-shadow: 1px 1px 1px #ccc;
+	-webkit-box-shadow: 1px 1px 1px #ccc;
+	box-shadow: 1px 1px 1px #ccc;
+}
+
+ul.page-navigation li.disabled span {
+	border: 1px solid #bbb;
+	cursor: default;
+	color: #bbb;
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	border-radius: 4px;
+}
+
+ul.page-navigation li.separator {
+	margin-right: 20px;
+}
+
+ul.page-navigation li a {
+	border: 1px solid #669517;
+	color: #669517;
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	border-radius: 4px;
+	-moz-box-shadow: 1px 1px 1px #ccc;
+	-webkit-box-shadow: 1px 1px 1px #ccc;
+	box-shadow: 1px 1px 1px #ccc;
+}
+
+ul.page-navigation li a:hover {
+	text-decoration: none;
+	background: #669517;
+	color: #fff;
+}
+
+ul.page-navigation li.last {
+	clear: right;
+}
+
+#thumbnail-grid {
+	margin: auto;
+}
+
+#thumbnail-grid td.td_index,
+#thumbnail-grid td.td_empty_index {
+	vertical-align: middle;
+}
+
+#thumbnail-grid tr td.td_empty_index {
+	width: 185px;
+	height: auto;
+}
+
+#thumbnail-grid tr.tr_empty_index td.td_empty_index {
+	height: 0;
+}
+
+#thumbnail-list div.thumbnail-caption-container {
+	float: left;
+	margin: 10px 15px;
+}
+
+#thumbnail-list div.thumbnail-container {
+	border: 1px solid #aaa;
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	border-radius: 4px;
+	margin-bottom: 5px;
+}
+
+#thumbnail-list div.thumbnail-image-container {
+	width: 140px;
+	height: 140px;
+	padding: 5px;
+}
+
+#thumbnail-list a.thumbnail-image img {
+	display: block;
+	margin: 0 auto;
+	border-style: none;
+	padding: 0;	
+}
+
+#thumbnail-list a.thumbnail-image:hover img {
+	opacity: 0.75;
+}
+
+#thumbnail-list div.caption-container {
+	font-size: 11px;
+	padding-bottom: 3px;
+	color: #999;
+}
+
+#thumbnail-list div.property-row {
+	text-align: center;
+	margin-top: 2px;
+}
+
+/* links */
+
+a:link { 
+	color: #0000FF;
+	text-decoration: none;
+}
+
+a:visited { 
+	color: #0000FF;
+	text-decoration: none;
+}
+
+a:hover {
+	color: #0000FF;
+	text-decoration: underline;
+}
diff --git a/extensions/webalbums/data/albumthemes/Wiki/thumbnail.gthtml b/extensions/webalbums/data/albumthemes/Wiki/thumbnail.gthtml
index 5344585..e328061 100644
--- a/extensions/webalbums/data/albumthemes/Wiki/thumbnail.gthtml
+++ b/extensions/webalbums/data/albumthemes/Wiki/thumbnail.gthtml
@@ -1,64 +1,23 @@
-      <table class="photo" summary="photo">
-      <tr>
-        <td class="photo">
-          <a href="<gthumb:image_link/>">
-            <gthumb:image thumbnail class="photo_center" />
-          </a>
-        </td>
-      </tr>
-      </table>
+    <div class="thumbnail-caption-container">
 
-<span class="comment">
-  <gthumb:if comment_visibility_index/>
-    <gthumb:comment max_size=100/> <br />
-  <gthumb:end/>
-  <gthumb:if place_visibility_index/>
-    <gthumb:place max_size=100/> <br />
-  <gthumb:end/>
-  <gthumb:if date_time_visibility_index/>
-    <gthumb:date_time/>
-  <gthumb:end/>
-</span><br />
+      <div class="thumbnail-container">
+        <div class="thumbnail-image-container">
+          <a class="thumbnail-image" href="<%= image_link %>" title="<%= translate 'Click to view the image' %>"><%= image thumbnail %></a>
+        </div>
+      </div> <!-- thumbnail-container -->
 
-<gthumb:if image_dim_visibility_index/>
-      <span class="property_value image_dim"><gthumb:image_dim/></span>
-<gthumb:if file_size_visibility_index/>
-      <span class="property_value file_size">(<gthumb:file_size/>)</span>
-<gthumb:end/>
-<gthumb:else/>
-<gthumb:if file_size_visibility_index/>
-      <span class="property_value file_size"><gthumb:file_size/></span>
-<gthumb:end/>
-<gthumb:end/>
-<gthumb:if image_dim_visibility_index || file_size_visibility_index/>
-      <br />
-<gthumb:end/>
+      <% for_each thumbnail_caption %>
+        <% if first_item %>
+          <div class="caption-container">
+        <% end %>
 
-<gthumb:if file_name_visibility_index/>
-      <span class="property_value file_name"><gthumb:file_name utf8="1" /></span><br />
-<gthumb:end/>
+          <div class="property-row">
+            <span class="property-value" title="<%= item_attribute display_name %>"> <%= item_attribute value %> </span>
+          </div>
 
-<gthumb:if exif_date_time_visibility_index/>
-      <span class="property_value exif"><gthumb:exif:date_time/></span><br />
-<gthumb:end/>
-<gthumb:if exif_exposure_time_visibility_index/>
-      <span class="property_value exif"><gthumb:exif:exposure_time/></span><br />
-<gthumb:end/>
-<gthumb:if exif_exposure_mode_visibility_index/>
-      <span class="property_value exif"><gthumb:exif:exposure_mode/></span><br />
-<gthumb:end/>
-<gthumb:if exif_flash_visibility_index/>
-      <span class="property_value exif"><gthumb:exif:flash/></span><br />
-<gthumb:end/>
-<gthumb:if exif_shutter_speed_visibility_index/>
-      <span class="property_value exif"><gthumb:exif:shutter_speed/></span><br />
-<gthumb:end/>
-<gthumb:if exif_aperture_value_visibility_index/>
-      <span class="property_value exif"><gthumb:exif:aperture_value/></span><br />
-<gthumb:end/>
-<gthumb:if exif_focal_length_visibility_index/>
-      <span class="property_value exif"><gthumb:exif:focal_length/></span><br />
-<gthumb:end/>
-<gthumb:if exif_camera_model_visibility_index/>
-      <span class="property_value exif"><gthumb:exif:camera_model/></span>
-<gthumb:end/>
+        <% if last_item %>
+          </div> <!-- caption-container -->
+        <% end %>
+      <% end %>
+
+    </div> <!-- thumbnail-caption-container -->
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]