[gthumb: 38/57] [webalbums] fixed some themes
- From: Paolo Bacchilega <paobac src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gthumb: 38/57] [webalbums] fixed some themes
- Date: Sun, 20 Jun 2010 16:24:57 +0000 (UTC)
commit c71474b6eebc507045c9d77a2b6f66a2cb099006
Author: Paolo Bacchilega <paobac src gnome org>
Date: Wed Jun 16 21:59:27 2010 +0200
[webalbums] fixed some themes
Fixed Classic, ClassicClips and NeatRound.
.../webalbums/data/albumthemes/Classic/1.gif | Bin 43 -> 0 bytes
.../webalbums/data/albumthemes/Classic/Makefile.am | 2 -
.../data/albumthemes/Classic/background.gif | Bin 43 -> 0 bytes
.../data/albumthemes/Classic/image.gthtml | 266 ++++++-------------
.../data/albumthemes/Classic/index.gthtml | 147 ++++-------
.../webalbums/data/albumthemes/Classic/layout.css | 268 ++++++++++++++------
.../webalbums/data/albumthemes/Classic/preview.png | Bin 37132 -> 19528 bytes
.../webalbums/data/albumthemes/Classic/style.css | 25 ++-
.../data/albumthemes/Classic/thumbnail.gthtml | 96 ++-----
.../webalbums/data/albumthemes/ClassicClips/1.gif | Bin 68 -> 0 bytes
.../data/albumthemes/ClassicClips/Makefile.am | 2 -
.../data/albumthemes/ClassicClips/background.gif | Bin 43 -> 0 bytes
.../data/albumthemes/ClassicClips/image.gthtml | 18 +-
.../data/albumthemes/ClassicClips/layout.css | 7 +
.../data/albumthemes/ClassicClips/preview.png | Bin 39785 -> 22450 bytes
.../data/albumthemes/ClassicClips/style.css | 4 +-
extensions/webalbums/data/albumthemes/Makefile.am | 2 +-
.../webalbums/data/albumthemes/NeatRound/1.gif | Bin 68 -> 0 bytes
.../data/albumthemes/NeatRound/Makefile.am | 5 +-
.../data/albumthemes/NeatRound/background.gif | Bin 43 -> 0 bytes
.../data/albumthemes/NeatRound/image.gthtml | 266 ++++++-------------
.../data/albumthemes/NeatRound/index.gthtml | 147 ++++-------
.../data/albumthemes/NeatRound/layout.css | 269 ++++++++++++++------
.../data/albumthemes/NeatRound/preview.png | Bin 26197 -> 19734 bytes
.../webalbums/data/albumthemes/NeatRound/style.css | 26 +-
.../data/albumthemes/NeatRound/thumbnail.gthtml | 96 ++-----
26 files changed, 777 insertions(+), 869 deletions(-)
---
diff --git a/extensions/webalbums/data/albumthemes/Classic/Makefile.am b/extensions/webalbums/data/albumthemes/Classic/Makefile.am
index 7266e2a..36863c4 100644
--- a/extensions/webalbums/data/albumthemes/Classic/Makefile.am
+++ b/extensions/webalbums/data/albumthemes/Classic/Makefile.am
@@ -6,8 +6,6 @@ gthtml_files = \
themename = Classic
themedir = $(datadir)/gthumb/albumthemes/$(themename)
theme_DATA = \
- 1.gif \
- background.gif \
back.png \
bot.png \
left.png \
diff --git a/extensions/webalbums/data/albumthemes/Classic/image.gthtml b/extensions/webalbums/data/albumthemes/Classic/image.gthtml
index 8d6d928..691d1ca 100644
--- a/extensions/webalbums/data/albumthemes/Classic/image.gthtml
+++ b/extensions/webalbums/data/albumthemes/Classic/image.gthtml
@@ -1,194 +1,98 @@
<?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="layout.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">
-<table class="full_size" summary="page body">
-<tr>
-<td class="title">
+ <h1 class="image-title">
+ <%= header %>
+ </h1>
+
+ <ul class="navigation-bar">
+ <li class="index">
+ <a href="<%= page_link idx_relative="0" image_idx %>" title="<%= translate 'Go back to the index' %>"">
+ <span><%= translate 'Go back to the index' %></span>
+ </a>
+ </li>
+ <% if image_idx < images %>
+ <li class="next-image">
+ <a href="<%= image_link idx_relative="+1" %>" title="<%= translate 'View the next image' %>">
+ <span><%= translate 'View the next image' %></span>
+ </a>
+ </li>
+ <% else %>
+ <li class="void">
+ </li>
+ <% end %>
+ <li class="current-image">
+ <span><%= image_idx %> / <%= images %></span>
+ </li>
+ <% if image_idx > 1 %>
+ <li class="previous-image">
+ <a href="<%= image_link idx_relative="-1" %>" title="<%= translate 'View the previous image' %>">
+ <span><%= translate 'View the previous image' %></span>
+ </a>
+ </li>
+ <% else %>
+ <li class="void">
+ </li>
+ <% end %>
+ <li class="last">
+ </li>
+ </ul>
+
+ <% if image_description_enabled || image_attributes_enabled %>
+ <div class="image-preview">
+ <% else %>
+ <div class="image-preview image-preview-centered">
+ <% end %>
+ <% if copy_originals %>
+ <a href="<%= file_name with_relative_path %>"><%= image preview class="preview" %></a>
+ <% else %>
+ <%= image preview class="preview" %>
+ <% end %>
+ </div>
+
+ <% for_each_image_caption %>
+ <% if first_item %>
+ <dl class="caption-container">
+ <% end %>
+
+ <dt class="property" title="<%= item_attribute id %>"> <%= 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 %>
-<!-- Title -->
-<table class="title" summary="title bar">
-<tr>
- <td>
- <span class="title"><gthumb:header/></span>
- </td>
-</tr>
-</table>
-
-</td>
-</tr>
-<tr>
-<td class="nav_bar">
-
-<!-- Navigation Bar -->
-<table class="full_size" summary="navigation bar">
-<tr>
- <td class="button">
- <a href="<gthumb:page_link idx_relative=0 image_idx/>">
- <img src="<gthumb:theme_link src='back.png'/>" alt="Back" />
- </a>
- </td>
- <td>
-
- </td>
- <td class="button">
-<gthumb:if image_idx == 1 />
- <img src="<gthumb:theme_link src='background.gif'/>" alt="void" />
-<gthumb:else/>
- <a href="<gthumb:image_link idx_relative=-1/>">
- <img src="<gthumb:theme_link src='prev.png'/>" alt="Previous" />
- </a>
-<gthumb:end/>
- </td>
- <td class="button">
-<gthumb:if images == 1 />
- <img src="<gthumb:theme_link src='background.gif'/>" alt="void" />
-<gthumb:else/>
- <span class="page_index"><gthumb:image_idx/> / <gthumb:images/></span>
-<gthumb:end/>
- </td>
- <td class="button">
-<gthumb:if image_idx == images />
- <img src="<gthumb:theme_link src='background.gif'/>" alt="void" />
-<gthumb:else/>
- <a href="<gthumb:image_link idx_relative=+1/>">
- <img src="<gthumb:theme_link src='next.png'/>" alt="Next" />
- </a>
-<gthumb:end/>
- </td>
-</tr>
-</table>
-
-</td>
-</tr>
-<tr>
-<td>
-
-<!-- Thumbnails and preview -->
-<table class="row" summary="preview">
-<tr>
- <td>
- <a href="<gthumb:file_name with_relative_path/>"><gthumb:image preview class="preview"/>
- </a>
- </td>
-</tr>
-</table>
-
-<!-- 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 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>
-
-</td>
-</tr>
-<tr>
-<td class="footer">
-
-<!-- Footer -->
-<table class="full_size" summary="copyright">
-<tr>
- <td>
- <span class="copyright"><gthumb:footer/></span>
- </td>
-</tr>
-</table>
-
-</td>
-</tr>
-</table>
+ <% if image_description_enabled && image_attribute_available('general::description') %>
+ <div class="image-comment">
+ <%= image_attribute id="general::description" %>
+ </div>
+ <% end %>
+ </div>
+ </div>
+ <div id="footer">
+ <div id="footer-2">
+ <%= footer %>
+ </div>
+ </div>
</body>
</html>
diff --git a/extensions/webalbums/data/albumthemes/Classic/index.gthtml b/extensions/webalbums/data/albumthemes/Classic/index.gthtml
index 4f9254f..f3c6495 100644
--- a/extensions/webalbums/data/albumthemes/Classic/index.gthtml
+++ b/extensions/webalbums/data/albumthemes/Classic/index.gthtml
@@ -1,103 +1,66 @@
<?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="layout.css" %>" rel="stylesheet" type="text/css" />
+ <link href="<%= theme_link src="style.css" %>" rel="stylesheet" type="text/css" />
</head>
-<gthumb:set_var thumbnail_width="159" thumbnail_height="120" />
-<gthumb:set_var preview_width="450" preview_height="400" />
+<% set_var thumbnail_width="159" thumbnail_height="120" %>
+<% set_var preview_width="650" preview_height="600" %>
<body>
+ <div id="wrapper">
+ <div id="main">
+
+ <h1 class="index-title">
+ <%= header %>
+ </h1>
+
+ <ul class="navigation-bar">
+ <% if page_idx < pages %>
+ <li class="next-page">
+ <a href="<%= page_link idx_relative="+1" %>" title="<%= translate 'View the next page' %>">
+ <span><%= translate 'View the next page' %></span>
+ </a>
+ </li>
+ <% else %>
+ <li class="void">
+ </li>
+ <% end %>
+ <li class="current-page">
+ <span><%= page_idx %> / <%= pages %></span>
+ </li>
+ <% if page_idx > 1 %>
+ <li class="previous-page">
+ <a href="<%= page_link idx_relative="-1" %>" title="<%= translate 'View the previous page' %>">
+ <span><%= translate 'View the previous page' %></span>
+ </a>
+ </li>
+ <% else %>
+ <li class="void">
+ </li>
+ <% end %>
+ <li class="last">
+ </li>
+ </ul>
+
+ <div id="thumbnail-list">
+ <%= thumbnails %>
+ </div>
-<table class="full_size" summary="page body">
-<tr>
-<td class="title">
-
-<!-- Title -->
-<table class="title" summary="title bar">
-<tr>
- <td>
- <span class="title"><gthumb:header/></span>
- </td>
-</tr>
-</table>
-
-</td>
-</tr>
-<tr>
-<td class="nav_bar">
-
-<!-- Navigation Bar -->
-<table class="full_size" summary="navigation bar">
-<tr>
- <td>
-
- </td>
- <td class="button">
-<gthumb:if page_idx == 1 />
- <img src="<gthumb:theme_link src='background.gif'/>" alt="void" />
-<gthumb:else/>
- <a href="<gthumb:page_link idx_relative=-1/>">
- <img src="<gthumb:theme_link src='prev.png'/>" alt="Previous" />
- </a>
-<gthumb:end/>
- </td>
- <td class="button">
-<gthumb:if pages == 1 />
- <img src="<gthumb:theme_link src='background.gif'/>" alt="void" />
-<gthumb:else/>
- <span class="page_index"><gthumb:page_idx/> / <gthumb:pages/></span>
-<gthumb:end/>
- </td>
- <td class="button">
-<gthumb:if page_idx == pages />
- <img src="<gthumb:theme_link src='background.gif'/>" alt="void" />
-<gthumb:else/>
- <a href="<gthumb:page_link idx_relative=+1/>">
- <img src="<gthumb:theme_link src='next.png'/>" alt="Next" />
- </a>
-<gthumb:end/>
- </td>
-</tr>
-</table>
-
-</td>
-</tr>
-<tr>
-<td>
-
-<!-- Photos -->
-<div class="thumbnails">
-<table summary="thumbnails">
-<gthumb:table/>
-</table>
-</div>
-
-</td>
-</tr>
-<tr>
-<td class="footer">
-
-<!-- Footer -->
-<table class="full_size" summary="copyright">
-<tr>
- <td>
- <span class="copyright"><gthumb:footer/></span>
- </td>
-</tr>
-</table>
-
-</td>
-</tr>
-</table>
-
+ </div>
+ </div>
+ <div id="footer">
+ <div id="footer-2">
+ <%= footer %>
+ </div>
+ </div>
</body>
</html>
diff --git a/extensions/webalbums/data/albumthemes/Classic/layout.css b/extensions/webalbums/data/albumthemes/Classic/layout.css
index 93083c5..00212f4 100644
--- a/extensions/webalbums/data/albumthemes/Classic/layout.css
+++ b/extensions/webalbums/data/albumthemes/Classic/layout.css
@@ -1,142 +1,256 @@
-/* Gthumb "Classic" layout, v. 2005-02-25 */
+/* gthumb "ClassicClips" layout, v. 2010-06-11 */
+
+* {
+ margin: 0;
+}
html, body {
height: 100%;
- padding: 0;
- margin: 0;
}
-table {
- border-collapse: collapse;
- border-width: 0;
+#wrapper {
+ min-height: 100%;
+ height: auto !important;
+ height: 100%;
}
-td {
- border-width: 0;
- padding: 0;
- vertical-align: middle;
+#main {
+ overflow: auto;
+ padding-bottom: 4em;
+}
+
+#footer {
+ position: relative;
+ margin-top: -4em;
+ height: 2em;
+ clear: both;
text-align: center;
}
-/* Title, header, footer */
+#footer-2 {
+ padding-top: 2em;
+}
-table.full_size {
- width: 100%;
- height: 100%;
+/* image page */
+
+h1.image-title,
+h1.index-title {
+ font-size: 21px;
+ text-align: center;
+ margin: 20px 0 10px 0;
+}
+
+ul.navigation-bar {
+ display: block;
+ list-style-type: none;
+ margin: 0;
+ padding: 10px 20px 10px 20px;
}
-table.row {
- width: 100%;
+ul.navigation-bar li a {
+ display: block;
}
-td.title {
- height: 4em;
- vertical-align: middle;
+ul.navigation-bar li span {
+ display: none;
}
-table.title {
- height: 4em;
- width: 100%;
+ul.navigation-bar li.index {
+ float: left;
+ background: url(back.png) no-repeat;
}
-td.nav_bar {
+ul.navigation-bar li.index a {
+ width: 30px;
height: 30px;
}
-td.button {
- width: 60px;
- white-space: nowrap;
+ul.navigation-bar li.current-image,
+ul.navigation-bar li.current-page {
+ float: right;
}
-td.button img,
-td.button a img {
- border-style: none;
+ul.navigation-bar li.current-image span,
+ul.navigation-bar li.current-page span {
+ padding: 7px 20px 0 20px;
+ display: block;
+ font-weight: bold;
+ font-size: 12px;
+}
+
+ul.navigation-bar li.void {
+ float: right;
+ background-image: none;
+ width: 40px;
+ height: 30px;
+}
+
+ul.navigation-bar li.previous-image,
+ul.navigation-bar li.previous-page {
+ float: right;
+ background: url(prev.png) no-repeat;
+}
+
+ul.navigation-bar li.previous-image a,
+ul.navigation-bar li.previous-page a {
+ width: 40px;
+ height: 30px;
+}
+
+ul.navigation-bar li.next-image,
+ul.navigation-bar li.next-page {
+ float: right;
+ background: url(next.png) no-repeat;
+}
+
+ul.navigation-bar li.next-image a,
+ul.navigation-bar li.next-page a {
+ width: 40px;
+ height: 30px;
}
-td.footer {
- height: 3em;
+ul.navigation-bar li.last {
+ clear: both;
}
+div.image-preview {
+ width: 660px;
+ float: left;
+ margin: 15px 0 0 15px;
+ text-align: center;
+}
-/* image.gthtml */
+div.image-preview-centered {
+ float: none;
+ margin: 20px auto;
+ text-align: center;
+}
-td.left_thumbnail {
- width: 115px;
+div.image-comment {
+ float: right;
+ display: block;
+ margin: 15px 15px 0 0;
+ padding: 3px;
text-align: left;
- padding-left: 10px;
+ font-size: 10px;
+ font-family: sans;
+ overflow: auto;
+ width: 300px;
+ border: 0px solid #aaa;
+}
+
+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;
}
-td.right_thumbnail {
- width: 115px;
+dl.caption-container dt {
+ font-weight: bold;
+ cursor: default;
+ float: left;
+ clear: left;
+ margin: 0 5px 0 0;
+ padding: 0;
+ color: #aaa;
+ width: 120px;
text-align: right;
- padding-right: 10px;
}
-div.properties {
- margin-top: 1em;
- margin-left: 10%;
- text-align: left;
+dl.caption-container dd {
+ float: left;
+ margin: 0;
+ padding: 0;
+ color: #fff;
}
-div.preview_comment {
- margin-bottom: 1em;
+dl.caption-container dd.last {
+ clear: both;
+ display: block;
+ float: none;
}
-div.properties table td {
- text-align: left;
- padding: 0.2em 1em 0.2em 0em;
+/* index page */
+
+#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: 225px;
+ height: auto;
+}
-/* index.gthtml */
+#thumbnail-grid tr.tr_empty_index td.td_empty_index {
+ height: 0;
+}
-div.thumbnails table {
- margin:auto;
+#thumbnail-list div.thumbnail-caption-container {
+ float: left;
+ margin: 10px;
}
-td.td_index {
- width: 215px;
- padding: 8px 5px 8px 5px;
- vertical-align: top;
+#thumbnail-list div.thumbnail-container {
+ height: 160px;
}
+#thumbnail-list div.thumbnail-top {
+ background: url(top.png) no-repeat top left;
+ width: 205px;
+ height: 21px;
+}
-/* thumbnail.gthtml */
+#thumbnail-list div.thumbnail-bottom {
+ clear: both;
+ background: url(bot.png) no-repeat bottom left;
+ width: 205px;
+ height: 26px;
+}
-table.photo {
- cursor: pointer;
+#thumbnail-list div.thumbnail-center {
+ background: #fff;
+ overflow: hidden;
+ float: left;
}
-td.photo {
- background-color: white;
- width: 162px;
- height: 122px;
+#thumbnail-list div.thumbnail-left {
+ background: url(left.png) no-repeat top left;
+ width: 205px;
+ height: 100%;
}
-img.photo_top {
- border-style: none;
- vertical-align: bottom;
+#thumbnail-list div.thumbnail-right {
+ background: url(right.png) no-repeat top right;
+ width: 205px;
+ height: 100%;
}
-img.photo_bottom {
- border-style: none;
- vertical-align: top;
+#thumbnail-list div.thumbnail-image-container {
+ width: 205px;
+ height: 100%;
}
-img.photo_left {
+#thumbnail-list a.thumbnail-image img {
+ display: block;
+ margin: 0 auto;
border-style: none;
- text-align: right;
- vertical-align: top;
+ padding: 0;
}
-img.photo_right {
- border-style: none;
- text-align: left;
- vertical-align: top;
+#thumbnail-list div.caption-container {
}
-img.photo_center {
- border-style: none;
- vertical-align: top;
+#thumbnail-list div.property-row {
+ text-align: center;
}
diff --git a/extensions/webalbums/data/albumthemes/Classic/preview.png b/extensions/webalbums/data/albumthemes/Classic/preview.png
index 9b14beb..f134684 100644
Binary files a/extensions/webalbums/data/albumthemes/Classic/preview.png and b/extensions/webalbums/data/albumthemes/Classic/preview.png differ
diff --git a/extensions/webalbums/data/albumthemes/Classic/style.css b/extensions/webalbums/data/albumthemes/Classic/style.css
index db45c89..ddc908c 100644
--- a/extensions/webalbums/data/albumthemes/Classic/style.css
+++ b/extensions/webalbums/data/albumthemes/Classic/style.css
@@ -1,4 +1,4 @@
-/* Gthumb "Classic" style, v. 2005-02-25 */
+/* gthumb "ClassicClips" style, v. 2010-06-11 */
/* Common */
@@ -22,18 +22,18 @@ span.file_name {
font-family: monospace;
}
-#footer {
- font-size: 11px;
+span.copyright {
+ font-size: small;
}
/* image.gthtml */
img.preview {
- border: solid 2px white;
+ border: 2px solid #fff;
}
img.thumbnail {
- border: solid 2px white;
+ border: 2px solid #fff;
}
div.preview_comment {
@@ -59,6 +59,16 @@ span.property_value {
color: white;
}
+/* index.gthtml */
+
+td.td_index {
+ color: #969696;
+}
+
+td.td_index span.image_dim {
+ font-weight: bold;
+}
+
/* links */
a:link {
@@ -78,3 +88,8 @@ a:hover {
text-decoration: none;
color: #FFD700;
}
+
+.property-name {
+ font-weight: bold;
+ cursor: default;
+}
diff --git a/extensions/webalbums/data/albumthemes/Classic/thumbnail.gthtml b/extensions/webalbums/data/albumthemes/Classic/thumbnail.gthtml
index 6eb7c29..ca52fab 100644
--- a/extensions/webalbums/data/albumthemes/Classic/thumbnail.gthtml
+++ b/extensions/webalbums/data/albumthemes/Classic/thumbnail.gthtml
@@ -1,71 +1,33 @@
- <table class="photo" summary="photo">
- <tr>
- <td colspan="3"><img class="photo_top" src="<gthumb:theme_link src='top.png'/>" alt="Top" /></td>
- </tr>
- <tr>
- <td><img class="photo_left" src="<gthumb:theme_link src='left.png'/>" alt="Left" /></td>
- <td class="photo">
- <a href="<gthumb:image_link/>">
- <gthumb:image thumbnail class="photo_center" /></a>
- </td>
- <td><img class="photo_right" src="<gthumb:theme_link src='right.png'/>" alt="Right" /></td>
- </tr>
- <tr>
- <td colspan="3"><img class="photo_bottom" src="<gthumb:theme_link src='bot.png'/>" alt="Bottom" /></td>
- </tr>
- </table>
+ <div class="thumbnail-caption-container">
-<span class="comment">
- <gthumb:if comment_visibility_index/>
- <gthumb:comment/> <br />
- <gthumb:end/>
- <gthumb:if place_visibility_index/>
- <gthumb:place/> <br />
- <gthumb:end/>
- <gthumb:if date_time_visibility_index/>
- <gthumb:date_time/>
- <gthumb:end/>
-</span><br />
+ <div class="thumbnail-container">
+ <div class="thumbnail-top">
+ </div>
+ <div class="thumbnail-center">
+ <div class="thumbnail-left">
+ <div class="thumbnail-right">
+ <div class="thumbnail-image-container">
+ <a class="thumbnail-image" href="<%= image_link %>" title="<%= translate 'Click to view the image' %>"><%= image thumbnail %></a>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="thumbnail-bottom">
+ </div>
+ </div>
-<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>
+ <% end %>
+ <% end %>
+
+ </div> <!-- thumbnail-caption-container -->
diff --git a/extensions/webalbums/data/albumthemes/ClassicClips/Makefile.am b/extensions/webalbums/data/albumthemes/ClassicClips/Makefile.am
index ae2de5c..b9076ce 100644
--- a/extensions/webalbums/data/albumthemes/ClassicClips/Makefile.am
+++ b/extensions/webalbums/data/albumthemes/ClassicClips/Makefile.am
@@ -6,8 +6,6 @@ gthtml_files = \
themename = ClassicClips
themedir = $(datadir)/gthumb/albumthemes/$(themename)
theme_DATA = \
- 1.gif \
- background.gif \
back.png \
bot.png \
left.png \
diff --git a/extensions/webalbums/data/albumthemes/ClassicClips/image.gthtml b/extensions/webalbums/data/albumthemes/ClassicClips/image.gthtml
index cba0050..ad24b56 100644
--- a/extensions/webalbums/data/albumthemes/ClassicClips/image.gthtml
+++ b/extensions/webalbums/data/albumthemes/ClassicClips/image.gthtml
@@ -28,7 +28,7 @@
</a>
</li>
<% if image_idx < images %>
- <li class="next-image">
+ <li class="next-image">
<a href="<%= image_link idx_relative="+1" %>" title="<%= translate 'View the next image' %>">
<span><%= translate 'View the next image' %></span>
</a>
@@ -41,10 +41,10 @@
<span><%= image_idx %> / <%= images %></span>
</li>
<% if image_idx > 1 %>
- <li class="previous-image">
+ <li class="previous-image">
<a href="<%= image_link idx_relative="-1" %>" title="<%= translate 'View the previous image' %>">
<span><%= translate 'View the previous image' %></span>
- </a>
+ </a>
</li>
<% else %>
<li class="void">
@@ -52,10 +52,14 @@
<% end %>
<li class="last">
</li>
- </ul>
+ </ul>
+ <% if image_description_enabled || image_attributes_enabled %>
<div class="image-preview">
- <% if copy_originals %>
+ <% else %>
+ <div class="image-preview image-preview-centered">
+ <% end %>
+ <% if copy_originals %>
<a href="<%= file_name with_relative_path %>"><%= image preview class="preview" %></a>
<% else %>
<%= image preview class="preview" %>
@@ -77,13 +81,13 @@
<% end %>
<% end %>
- <% if image_attribute_available('general::description') %>
+ <% if image_description_enabled && image_attribute_available('general::description') %>
<div class="image-comment">
<%= image_attribute id="general::description" %>
</div>
<% end %>
- </div>
+ </div>
</div>
<div id="footer">
<div id="footer-2">
diff --git a/extensions/webalbums/data/albumthemes/ClassicClips/layout.css b/extensions/webalbums/data/albumthemes/ClassicClips/layout.css
index d9d6d9d..00212f4 100644
--- a/extensions/webalbums/data/albumthemes/ClassicClips/layout.css
+++ b/extensions/webalbums/data/albumthemes/ClassicClips/layout.css
@@ -120,6 +120,12 @@ div.image-preview {
text-align: center;
}
+div.image-preview-centered {
+ float: none;
+ margin: 20px auto;
+ text-align: center;
+}
+
div.image-comment {
float: right;
display: block;
@@ -196,6 +202,7 @@ dl.caption-container dd.last {
}
#thumbnail-list div.thumbnail-container {
+ height: 160px;
}
#thumbnail-list div.thumbnail-top {
diff --git a/extensions/webalbums/data/albumthemes/ClassicClips/preview.png b/extensions/webalbums/data/albumthemes/ClassicClips/preview.png
index 77d33e3..871a29f 100644
Binary files a/extensions/webalbums/data/albumthemes/ClassicClips/preview.png and b/extensions/webalbums/data/albumthemes/ClassicClips/preview.png differ
diff --git a/extensions/webalbums/data/albumthemes/ClassicClips/style.css b/extensions/webalbums/data/albumthemes/ClassicClips/style.css
index b50f6b6..ddc908c 100644
--- a/extensions/webalbums/data/albumthemes/ClassicClips/style.css
+++ b/extensions/webalbums/data/albumthemes/ClassicClips/style.css
@@ -29,11 +29,11 @@ span.copyright {
/* image.gthtml */
img.preview {
- border: solid 2px white;
+ border: 2px solid #fff;
}
img.thumbnail {
- border: solid 2px white;
+ border: 2px solid #fff;
}
div.preview_comment {
diff --git a/extensions/webalbums/data/albumthemes/Makefile.am b/extensions/webalbums/data/albumthemes/Makefile.am
index 8aa3d60..b093f5e 100644
--- a/extensions/webalbums/data/albumthemes/Makefile.am
+++ b/extensions/webalbums/data/albumthemes/Makefile.am
@@ -1,4 +1,4 @@
-SUBDIRS = BestFit Classic ClassicClips Flicker NeatRound Wiki
+SUBDIRS = BestFit Classic ClassicClips Flicker NeatRound Wiki
EXTRA_DIST = text.h
-include $(top_srcdir)/git.mk
diff --git a/extensions/webalbums/data/albumthemes/NeatRound/Makefile.am b/extensions/webalbums/data/albumthemes/NeatRound/Makefile.am
index 4b5e5ce..cc4c981 100644
--- a/extensions/webalbums/data/albumthemes/NeatRound/Makefile.am
+++ b/extensions/webalbums/data/albumthemes/NeatRound/Makefile.am
@@ -6,8 +6,6 @@ gthtml_files = \
themename = NeatRound
themedir = $(datadir)/gthumb/albumthemes/$(themename)
theme_DATA = \
- 1.gif \
- background.gif \
back.png \
bot.png \
left.png \
@@ -15,11 +13,12 @@ theme_DATA = \
prev.png \
preview.png \
right.png \
- top.png \
+ top.png \
layout.css \
style.css \
$(gthtml_files)
EXTRA_DIST = $(theme_DATA)
+
-include $(top_srcdir)/git.mk
diff --git a/extensions/webalbums/data/albumthemes/NeatRound/image.gthtml b/extensions/webalbums/data/albumthemes/NeatRound/image.gthtml
index 13234a0..70c67c3 100644
--- a/extensions/webalbums/data/albumthemes/NeatRound/image.gthtml
+++ b/extensions/webalbums/data/albumthemes/NeatRound/image.gthtml
@@ -1,194 +1,98 @@
<?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="layout.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">
-<table class="full_size" summary="page body">
-<tr>
-<td class="title">
+ <h1 class="image-title">
+ <%= header %>
+ </h1>
+
+ <ul class="navigation-bar">
+ <li class="index">
+ <a href="<%= page_link idx_relative="0" image_idx %>" title="<%= translate 'Go back to the index' %>"">
+ <span><%= translate 'Go back to the index' %></span>
+ </a>
+ </li>
+ <% if image_idx < images %>
+ <li class="next-image">
+ <a href="<%= image_link idx_relative="+1" %>" title="<%= translate 'View the next image' %>">
+ <span><%= translate 'View the next image' %></span>
+ </a>
+ </li>
+ <% else %>
+ <li class="void">
+ </li>
+ <% end %>
+ <li class="current-image">
+ <span><%= image_idx %> / <%= images %></span>
+ </li>
+ <% if image_idx > 1 %>
+ <li class="previous-image">
+ <a href="<%= image_link idx_relative="-1" %>" title="<%= translate 'View the previous image' %>">
+ <span><%= translate 'View the previous image' %></span>
+ </a>
+ </li>
+ <% else %>
+ <li class="void">
+ </li>
+ <% end %>
+ <li class="last">
+ </li>
+ </ul>
+
+ <% if image_description_enabled || image_attributes_enabled %>
+ <div class="image-preview">
+ <% else %>
+ <div class="image-preview image-preview-centered">
+ <% end %>
+ <% if copy_originals %>
+ <a href="<%= file_name with_relative_path %>"><%= image preview class="preview" %></a>
+ <% else %>
+ <%= image preview class="preview" %>
+ <% end %>
+ </div>
+
+ <% for_each_image_caption %>
+ <% if first_item %>
+ <dl class="caption-container">
+ <% end %>
+
+ <dt class="property" title="<%= item_attribute id %>"> <%= 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 %>
-<!-- Title -->
-<table class="title" summary="title bar">
-<tr>
- <td>
- <span class="title"><gthumb:header/></span>
- </td>
-</tr>
-</table>
-
-</td>
-</tr>
-<tr>
-<td class="nav_bar">
-
-<!-- Navigation Bar -->
-<table class="full_size" summary="navigation bar">
-<tr>
- <td class="button">
- <a href="<gthumb:page_link idx_relative=0 image_idx/>">
- <img src="<gthumb:theme_link src='back.png'/>" alt="Back" />
- </a>
- </td>
- <td>
-
- </td>
- <td class="button">
-<gthumb:if image_idx == 1 />
- <img src="<gthumb:theme_link src='background.gif'/>" alt="void" />
-<gthumb:else/>
- <a href="<gthumb:image_link idx_relative=-1/>">
- <img src="<gthumb:theme_link src='prev.png'/>" alt="Previous" />
- </a>
-<gthumb:end/>
- </td>
- <td class="button">
-<gthumb:if images == 1 />
- <img src="<gthumb:theme_link src='background.gif'/>" alt="void" />
-<gthumb:else/>
- <span class="page_index"><gthumb:image_idx/> / <gthumb:images/></span>
-<gthumb:end/>
- </td>
- <td class="button">
-<gthumb:if image_idx == images />
- <img src="<gthumb:theme_link src='background.gif'/>" alt="void" />
-<gthumb:else/>
- <a href="<gthumb:image_link idx_relative=+1/>">
- <img src="<gthumb:theme_link src='next.png'/>" alt="Next" />
- </a>
-<gthumb:end/>
- </td>
-</tr>
-</table>
-
-</td>
-</tr>
-<tr>
-<td>
-
-<!-- Thumbnails and preview -->
-<table class="row" summary="preview">
-<tr>
- <td>
- <a href="<gthumb:file_name with_relative_path/>"><gthumb:image preview class="preview"/>
- </a>
- </td>
-</tr>
-</table>
-
-<!-- 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 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>
-
-</td>
-</tr>
-<tr>
-<td class="footer">
-
-<!-- Footer -->
-<table class="full_size" summary="copyright">
-<tr>
- <td>
- <span class="copyright"><gthumb:footer/></span>
- </td>
-</tr>
-</table>
-
-</td>
-</tr>
-</table>
+ <% if image_description_enabled && image_attribute_available('general::description') %>
+ <div class="image-comment">
+ <%= image_attribute id="general::description" %>
+ </div>
+ <% end %>
+ </div>
+ </div>
+ <div id="footer">
+ <div id="footer-2">
+ <%= footer %>
+ </div>
+ </div>
</body>
</html>
diff --git a/extensions/webalbums/data/albumthemes/NeatRound/index.gthtml b/extensions/webalbums/data/albumthemes/NeatRound/index.gthtml
index 6124655..7068f6d 100644
--- a/extensions/webalbums/data/albumthemes/NeatRound/index.gthtml
+++ b/extensions/webalbums/data/albumthemes/NeatRound/index.gthtml
@@ -1,103 +1,66 @@
<?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="layout.css" %>" rel="stylesheet" type="text/css" />
+ <link href="<%= theme_link src="style.css" %>" rel="stylesheet" type="text/css" />
</head>
-<gthumb:set_var thumbnail_width="120" thumbnail_height="100"/>
-<gthumb:set_var preview_width="450" preview_height="400"/>
+<% set_var thumbnail_width="120" thumbnail_height="100" %>
+<% set_var preview_width="650" preview_height="600" %>
<body>
+ <div id="wrapper">
+ <div id="main">
+
+ <h1 class="index-title">
+ <%= header %>
+ </h1>
+
+ <ul class="navigation-bar">
+ <% if page_idx < pages %>
+ <li class="next-page">
+ <a href="<%= page_link idx_relative="+1" %>" title="<%= translate 'View the next page' %>">
+ <span><%= translate 'View the next page' %></span>
+ </a>
+ </li>
+ <% else %>
+ <li class="void">
+ </li>
+ <% end %>
+ <li class="current-page">
+ <span><%= page_idx %> / <%= pages %></span>
+ </li>
+ <% if page_idx > 1 %>
+ <li class="previous-page">
+ <a href="<%= page_link idx_relative="-1" %>" title="<%= translate 'View the previous page' %>">
+ <span><%= translate 'View the previous page' %></span>
+ </a>
+ </li>
+ <% else %>
+ <li class="void">
+ </li>
+ <% end %>
+ <li class="last">
+ </li>
+ </ul>
+
+ <div id="thumbnail-list">
+ <%= thumbnails %>
+ </div>
-<table class="full_size" summary="page body">
-<tr>
-<td class="title">
-
-<!-- Title -->
-<table class="title" summary="title bar">
-<tr>
- <td>
- <span class="title"><gthumb:header/></span>
- </td>
-</tr>
-</table>
-
-</td>
-</tr>
-<tr>
-<td class="nav_bar">
-
-<!-- Navigation Bar -->
-<table class="full_size" summary="navigation bar">
-<tr>
- <td>
-
- </td>
- <td class="button">
-<gthumb:if page_idx == 1 />
- <img src="<gthumb:theme_link src='background.gif'/>" alt="void" />
-<gthumb:else/>
- <a href="<gthumb:page_link idx_relative=-1/>">
- <img src="<gthumb:theme_link src='prev.png'/>" alt="Previous" />
- </a>
-<gthumb:end/>
- </td>
- <td class="button">
-<gthumb:if pages == 1 />
- <img src="<gthumb:theme_link src='background.gif'/>" alt="void" />
-<gthumb:else/>
- <span class="page_index"><gthumb:page_idx/> / <gthumb:pages/></span>
-<gthumb:end/>
- </td>
- <td class="button">
-<gthumb:if page_idx == pages />
- <img src="<gthumb:theme_link src='background.gif'/>" alt="void" />
-<gthumb:else/>
- <a href="<gthumb:page_link idx_relative=+1/>">
- <img src="<gthumb:theme_link src='next.png'/>" alt="Next" />
- </a>
-<gthumb:end/>
- </td>
-</tr>
-</table>
-
-</td>
-</tr>
-<tr>
-<td>
-
-<!-- Photos -->
-<div class="thumbnails">
-<table summary="thumbnails">
-<gthumb:table/>
-</table>
-</div>
-
-</td>
-</tr>
-<tr>
-<td class="footer">
-
-<!-- Footer -->
-<table class="full_size" summary="copyright">
-<tr>
- <td>
- <span class="copyright"><gthumb:footer/></span>
- </td>
-</tr>
-</table>
-
-</td>
-</tr>
-</table>
-
+ </div>
+ </div>
+ <div id="footer">
+ <div id="footer-2">
+ <%= footer %>
+ </div>
+ </div>
</body>
</html>
diff --git a/extensions/webalbums/data/albumthemes/NeatRound/layout.css b/extensions/webalbums/data/albumthemes/NeatRound/layout.css
index 1585c1b..c8cbe78 100644
--- a/extensions/webalbums/data/albumthemes/NeatRound/layout.css
+++ b/extensions/webalbums/data/albumthemes/NeatRound/layout.css
@@ -1,141 +1,256 @@
-/* Gthumb "NeatRound" layout, v. 2005-02-25 */
+/* gthumb "NeatRound" layout, v. 2010-06-11 */
+
+* {
+ margin: 0;
+}
html, body {
height: 100%;
- padding: 0;
- margin: 0;
}
-table {
- border-collapse: collapse;
- border-width: 0;
+#wrapper {
+ min-height: 100%;
+ height: auto !important;
+ height: 100%;
}
-td {
- border-width: 0;
- padding: 0;
- vertical-align: middle;
+#main {
+ overflow: auto;
+ padding-bottom: 4em;
+}
+
+#footer {
+ position: relative;
+ margin-top: -4em;
+ height: 2em;
+ clear: both;
text-align: center;
}
-/* Title, header, footer */
+#footer-2 {
+ padding-top: 2em;
+}
-table.full_size {
- width: 100%;
- height: 100%;
+/* image page */
+
+h1.image-title,
+h1.index-title {
+ font-size: 21px;
+ text-align: center;
+ margin: 20px 0 10px 0;
}
-table.row {
- width: 100%;
+ul.navigation-bar {
+ display: block;
+ list-style-type: none;
+ margin: 0;
+ padding: 10px 20px 10px 20px;
}
-td.title {
- height: 4em;
- vertical-align: middle;
+ul.navigation-bar li a {
+ display: block;
}
-table.title {
- height: 4em;
- width: 100%;
+ul.navigation-bar li span {
+ display: none;
}
-td.nav_bar {
+ul.navigation-bar li.index {
+ float: left;
+ background: url(back.png) no-repeat;
+}
+
+ul.navigation-bar li.index a {
+ width: 30px;
height: 30px;
}
-td.button {
- width: 60px;
- white-space: nowrap;
+ul.navigation-bar li.current-image,
+ul.navigation-bar li.current-page {
+ float: right;
}
-td.button img,
-td.button a img {
- border-style: none;
+ul.navigation-bar li.current-image span,
+ul.navigation-bar li.current-page span {
+ padding: 7px 20px 0 20px;
+ display: block;
+ font-weight: bold;
+ font-size: 12px;
}
-td.footer {
- height: 3em;
+ul.navigation-bar li.void {
+ float: right;
+ background-image: none;
+ width: 40px;
+ height: 30px;
}
+ul.navigation-bar li.previous-image,
+ul.navigation-bar li.previous-page {
+ float: right;
+ background: url(prev.png) no-repeat;
+}
-/* image.gthtml */
+ul.navigation-bar li.previous-image a,
+ul.navigation-bar li.previous-page a {
+ width: 40px;
+ height: 30px;
+}
-td.left_thumbnail {
- width: 115px;
- text-align: left;
- padding-left: 10px;
+ul.navigation-bar li.next-image,
+ul.navigation-bar li.next-page {
+ float: right;
+ background: url(next.png) no-repeat;
}
-td.right_thumbnail {
- width: 115px;
- text-align: right;
- padding-right: 10px;
+ul.navigation-bar li.next-image a,
+ul.navigation-bar li.next-page a {
+ width: 40px;
+ height: 30px;
}
-div.properties {
- margin-top: 1em;
- margin-left: 10%;
- text-align: left;
+ul.navigation-bar li.last {
+ clear: both;
}
-div.preview_comment {
- margin-bottom: 1em;
+div.image-preview {
+ width: 660px;
+ float: left;
+ margin: 15px 0 0 15px;
+ text-align: center;
}
-div.properties table td {
+div.image-preview-centered {
+ float: none;
+ margin: 20px auto;
+ text-align: center;
+}
+
+div.image-comment {
+ float: right;
+ display: block;
+ margin: 15px 15px 0 0;
+ padding: 3px;
text-align: left;
- padding: 0.2em 1em 0.2em 0em;
+ font-size: 10px;
+ font-family: sans;
+ overflow: auto;
+ width: 300px;
+ border: 0px solid #aaa;
}
+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;
+}
+dl.caption-container dt {
+ font-weight: bold;
+ cursor: default;
+ float: left;
+ clear: left;
+ margin: 0 5px 0 0;
+ padding: 0;
+ color: #aaa;
+ width: 120px;
+ text-align: right;
+}
-/* index.gthtml */
+dl.caption-container dd {
+ float: left;
+ margin: 0;
+ padding: 0;
+ color: #222;
+}
-div.thumbnails table {
- margin:auto;
+dl.caption-container dd.last {
+ clear: both;
+ display: block;
+ float: none;
}
-td.td_index {
- width: 215px;
- padding: 8px 5px 8px 5px;
- vertical-align: top;
+/* index page */
+
+#thumbnail-grid {
+ margin: auto;
}
+#thumbnail-grid td.td_index,
+#thumbnail-grid td.td_empty_index {
+ vertical-align: middle;
+}
-/* thumbnail.gthtml */
+#thumbnail-grid tr td.td_empty_index {
+ width: 174px;
+ height: auto;
+}
-table.photo {
+#thumbnail-grid tr.tr_empty_index td.td_empty_index {
+ height: 0;
}
-td.photo {
- background-color: white;
- width: 122px;
- height: 102px;
+#thumbnail-list div.thumbnail-caption-container {
+ float: left;
+ margin: 15px;
}
-img.photo_top {
- border-style: none;
- vertical-align: bottom;
+#thumbnail-list div.thumbnail-container {
+ height: 125px;
}
-img.photo_bottom {
- border-style: none;
- vertical-align: top;
+#thumbnail-list div.thumbnail-top {
+ background: url(top.png) no-repeat top left;
+ width: 154px;
+ height: 14px;
}
-img.photo_left {
- border-style: none;
- text-align: right;
- vertical-align: top;
+#thumbnail-list div.thumbnail-bottom {
+ clear: both;
+ background: url(bot.png) no-repeat bottom left;
+ width: 154px;
+ height: 15px;
}
-img.photo_right {
- border-style: none;
- text-align: left;
- vertical-align: top;
+#thumbnail-list div.thumbnail-center {
+ background: #fff;
+ overflow: hidden;
+ float: left;
+}
+
+#thumbnail-list div.thumbnail-left {
+ background: url(left.png) no-repeat top left;
+ width: 154px;
+ height: 100%;
}
-img.photo_center {
+#thumbnail-list div.thumbnail-right {
+ background: url(right.png) no-repeat top right;
+ width: 154px;
+ height: 100%;
+}
+
+#thumbnail-list div.thumbnail-image-container {
+ width: 151px;
+ height: 100%;
+}
+
+#thumbnail-list a.thumbnail-image img {
+ display: block;
+ margin: 0 auto;
border-style: none;
- vertical-align: top;
+ padding: 0;
}
+
+#thumbnail-list div.caption-container {
+}
+
+#thumbnail-list div.property-row {
+ text-align: center;
+}
\ No newline at end of file
diff --git a/extensions/webalbums/data/albumthemes/NeatRound/preview.png b/extensions/webalbums/data/albumthemes/NeatRound/preview.png
index 6a100aa..67d230f 100644
Binary files a/extensions/webalbums/data/albumthemes/NeatRound/preview.png and b/extensions/webalbums/data/albumthemes/NeatRound/preview.png differ
diff --git a/extensions/webalbums/data/albumthemes/NeatRound/style.css b/extensions/webalbums/data/albumthemes/NeatRound/style.css
index cd86bb9..20a2148 100644
--- a/extensions/webalbums/data/albumthemes/NeatRound/style.css
+++ b/extensions/webalbums/data/albumthemes/NeatRound/style.css
@@ -1,22 +1,21 @@
-/* Gthumb "NeatRound" style, v. 2005-02-25 */
+/* gthumb "NeatRound" style, v. 2010-06-11 */
/* Common */
body {
- background-color: white;
- color: black;
+ background-color: #fff;
+ color: #222;
+ font-size: 12px;
}
span.title {
font-weight: bold;
font-size: 150%;
- color: #555555;
}
span.page_index {
font-weight: bold;
font-size: small;
- color: #969696;
}
span.file_name {
@@ -25,19 +24,16 @@ span.file_name {
span.copyright {
font-size: small;
- color: #969696;
}
-
/* image.gthtml */
-
img.preview {
- border-style: none;
+ border: 2px solid #fff;
}
img.thumbnail {
- border-style: none;
+ border: 2px solid #fff;
}
div.preview_comment {
@@ -60,6 +56,7 @@ span.property {
span.property_value {
font-size: small;
+ color: white;
}
/* index.gthtml */
@@ -72,19 +69,18 @@ td.td_index span.image_dim {
font-weight: bold;
}
-
/* links */
a:link {
font-weight: bold;
text-decoration: none;
- color: black;
+ color: #000;
}
a:visited {
font-weight: bold;
text-decoration: none;
- color: black;
+ color: #000;
}
a:hover {
@@ -93,3 +89,7 @@ a:hover {
color: #FFD700;
}
+.property-name {
+ font-weight: bold;
+ cursor: default;
+}
\ No newline at end of file
diff --git a/extensions/webalbums/data/albumthemes/NeatRound/thumbnail.gthtml b/extensions/webalbums/data/albumthemes/NeatRound/thumbnail.gthtml
index 55b5725..4605c33 100644
--- a/extensions/webalbums/data/albumthemes/NeatRound/thumbnail.gthtml
+++ b/extensions/webalbums/data/albumthemes/NeatRound/thumbnail.gthtml
@@ -1,71 +1,33 @@
- <table class="photo" summary="photo">
- <tr>
- <td colspan="3"><img class="photo_top" src="<gthumb:theme_link src='top.png'/>" alt="Top" /></td>
- </tr>
- <tr>
- <td><img class="photo_left" src="<gthumb:theme_link src='left.png'/>" alt="Left" /></td>
- <td class="photo">
- <a href="<gthumb:image_link/>">
- <gthumb:image thumbnail class="photo_center" /></a>
- </td>
- <td><img class="photo_right" src="<gthumb:theme_link src='right.png'/>" alt="Right" /></td>
- </tr>
- <tr>
- <td colspan="3"><img class="photo_bottom" src="<gthumb:theme_link src='bot.png'/>" alt="Bottom" /></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-top">
+ </div>
+ <div class="thumbnail-center">
+ <div class="thumbnail-left">
+ <div class="thumbnail-right">
+ <div class="thumbnail-image-container">
+ <a class="thumbnail-image" href="<%= image_link %>" title="<%= translate 'Click to view the image' %>"><%= image thumbnail %></a>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="thumbnail-bottom">
+ </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]
