feature 434: split thumbnails in template so customization could be easyer

git-svn-id: http://piwigo.org/svn/trunk@1384 68402e56-0260-453c-a942-63ccdbb3a9ee

7 files changed, 111 insertions, 105 deletions

diff --git a/template/yoga/content.css b/template/yoga/content.css
index 3e49c9d88..1fcc4630a 100644
--- a/template/yoga/content.css
+++ b/template/yoga/content.css
@@ -29,51 +29,6 @@ BODY#theNBMPage #content
     text-align: center;
 }
 
-/* Thumbnails customization */
-#content UL.thumbnails SPAN.thumbLegend {
-  font-size: 80%;		/* font size */
-  overflow: hidden;		/* oversized legend is clipped */
-}
-
-/* Thumbnail "elastic" layout */
-#content UL.thumbnails {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  text-align: center;	/* to center the whole collection in #content */
-}
-#content UL.thumbnails LI { display: inline }
-
-#content UL.thumbnails SPAN.wrap1 {
-  margin: 0 5px 5px 5px;
-  display: table-cell; display: inline-table; display: inline-block;
-  vertical-align: top;		/* OK with Opera and IE6 not Geko */
-  text-align: center;		/* to center the thumbnail and legend in Geko/Opera */
-}
-#content UL.thumbnails SPAN.wrap2 {
-  margin: 0;			/* important reset the margins */
-  display: table-cell;		/* block prevents vertical-align here */
-  vertical-align: middle;	/* Ok with Opera and Geko not IE6 */
-}
-#content UL.thumbnails SPAN.wrap2 A,
-#content UL.thumbnails SPAN.wrap2 LABEL {
-  display: block;
-  border-bottom: none;
-}
-#content UL.thumbnails IMG {
-  margin-bottom: -4px;  /* why ??? something wrong with Geko and Opera ignored by IE6*/
-}
-
-/* label and input used for caddie in admin section */
-#content UL.thumbnails SPAN.wrap2 LABEL {
-  position: relative;
-}
-:root #content UL.thumbnails SPAN.wrap2 INPUT { /* hide from Opera */
-  position: absolute;
-  left: 0;
-  top: 0;
-}
-
 #content .navigationBar, #content .additional_info {
     margin: 10px 0;
     text-align: center;
diff --git a/template/yoga/fix-ie5-ie6.css b/template/yoga/fix-ie5-ie6.css
index e78b0bda4..1a9a28415 100644
--- a/template/yoga/fix-ie5-ie6.css
+++ b/template/yoga/fix-ie5-ie6.css
@@ -1,6 +1,8 @@
 /* $Id$ */
 /* Issues in IE from 5 to 6 only not to be used with IE7                      */
 
+@import "thumbnails-fix-ie5-ie6.css";
+
 /* fix lack of :hover behaviour for non link objects */
 BODY {
   behavior:url("template-common/csshover.htc");
@@ -21,32 +23,6 @@ UL.tagSelection LI INPUT,
   background-color: transparent;
 }
 
-/* fix IE with another layout for thumbnails */
-#content UL.thumbnails SPAN.wrap2 {
-  display: block;
-  position: relative;
-  text-align: left;
-}
-#content UL.thumbnails SPAN.wrap2 A,
-#content UL.thumbnails SPAN.wrap2 LABEL {
-  overflow: visible;
-  position: absolute;
-  top: 50%;
-  text-align: center;
-}
-#content UL.thumbnails IMG.thumbnail {
-  position: relative;
-  top: -50%;
-  /*\*//*/
-    margin-top: -40%;
-  /**/
-}
-#content UL.thumbnails SPAN.wrap2 input {
-  position: absolute;
-  left: 0;
-  top: -50%;  /* same as other browsers but not so pretty */
-}
-
 /* fix category thumbnails on main page */
 #content UL.thumbnailCategories {
   width: 99%; /* buggy IE box model */
diff --git a/template/yoga/index.tpl b/template/yoga/index.tpl
index cb4d7d01e..85b91d1de 100644
--- a/template/yoga/index.tpl
+++ b/template/yoga/index.tpl
@@ -76,40 +76,7 @@
 <!-- END calendar -->
 
 {MONTH_CALENDAR}
-
-<!-- BEGIN thumbnails -->
-<ul class="thumbnails">
-  <!-- BEGIN line -->
-  <!-- BEGIN thumbnail -->
-  <li class="{thumbnails.line.thumbnail.CLASS}">
-    <span class="wrap1">
-      <span class="wrap2">
-        <a href="{thumbnails.line.thumbnail.U_IMG_LINK}">
-            <img class="thumbnail" src="{thumbnails.line.thumbnail.IMAGE}"
-	    alt="{thumbnails.line.thumbnail.IMAGE_ALT}"
-	    title="{thumbnails.line.thumbnail.IMAGE_TITLE}">
-        </a>
-      </span>
-      <span class="thumbLegend">
-      <!-- BEGIN element_name -->
-      {thumbnails.line.thumbnail.element_name.NAME}
-      <!-- END element_name -->
-      <!-- BEGIN category_name -->
-      [{thumbnails.line.thumbnail.category_name.NAME}]
-      <!-- END category_name -->
-      {thumbnails.line.thumbnail.IMAGE_TS}
-      <!-- BEGIN nb_comments -->
-      <br />{thumbnails.line.thumbnail.nb_comments.NB_COMMENTS} {lang:comments}
-      <!-- END nb_comments -->
-      </span>
-    </span>
-  </li>
-  <!-- END thumbnail -->
-  <!-- END line -->
-
-</ul>
-<!-- END thumbnails -->
-
+{THUMBNAILS}
 {CATEGORIES}
 
 <!-- BEGIN cat_infos -->
diff --git a/template/yoga/layout.css b/template/yoga/layout.css
index 79cb2911f..c39d46293 100644
--- a/template/yoga/layout.css
+++ b/template/yoga/layout.css
@@ -3,6 +3,7 @@
 /* template css */
 @import "menubar.css";
 @import "content.css";
+@import "thumbnails.css";
 @import "image.css";
 @import "popuphelp.css";
 @import "default-layout.css";
diff --git a/template/yoga/thumbnails-fix-ie5-ie6.css b/template/yoga/thumbnails-fix-ie5-ie6.css
new file mode 100644
index 000000000..9f12c797e
--- /dev/null
+++ b/template/yoga/thumbnails-fix-ie5-ie6.css
@@ -0,0 +1,27 @@
+/* $Id: $ */
+/* fix IE with another layout for thumbnails */
+#content UL.thumbnails SPAN.wrap2 {
+  display: block;
+  position: relative;
+  text-align: left;
+}
+#content UL.thumbnails SPAN.wrap2 A,
+#content UL.thumbnails SPAN.wrap2 LABEL {
+  overflow: visible;
+  position: absolute;
+  top: 50%;
+  text-align: center;
+}
+#content UL.thumbnails IMG.thumbnail {
+  position: relative;
+  top: -50%;
+  /*\*//*/
+    margin-top: -40%;
+  /**/
+}
+#content UL.thumbnails SPAN.wrap2 input {
+  position: absolute;
+  left: 0;
+  top: -50%;  /* same as other browsers but not so pretty */
+}
+
diff --git a/template/yoga/thumbnails.css b/template/yoga/thumbnails.css
new file mode 100644
index 000000000..dfc4bb9dc
--- /dev/null
+++ b/template/yoga/thumbnails.css
@@ -0,0 +1,47 @@
+/* $Id: $ */
+
+/* Thumbnails customization */
+#content UL.thumbnails SPAN.thumbLegend {
+  font-size: 80%;		/* font size */
+  overflow: hidden;		/* oversized legend is clipped */
+}
+
+/* Thumbnail "elastic" layout */
+#content UL.thumbnails {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  text-align: center;	/* to center the whole collection in #content */
+}
+#content UL.thumbnails LI { display: inline }
+
+#content UL.thumbnails SPAN.wrap1 {
+  margin: 0 5px 5px 5px;
+  display: table-cell; display: inline-table; display: inline-block;
+  vertical-align: top;		/* OK with Opera and IE6 not Geko */
+  text-align: center;		/* to center the thumbnail and legend in Geko/Opera */
+}
+#content UL.thumbnails SPAN.wrap2 {
+  margin: 0;			/* important reset the margins */
+  display: table-cell;		/* block prevents vertical-align here */
+  vertical-align: middle;	/* Ok with Opera and Geko not IE6 */
+}
+#content UL.thumbnails SPAN.wrap2 A,
+#content UL.thumbnails SPAN.wrap2 LABEL {
+  display: block;
+  border-bottom: none;
+}
+#content UL.thumbnails IMG {
+  margin-bottom: -4px;  /* why ??? something wrong with Geko and Opera ignored by IE6*/
+}
+
+/* label and input used for caddie in admin section */
+#content UL.thumbnails SPAN.wrap2 LABEL {
+  position: relative;
+}
+:root #content UL.thumbnails SPAN.wrap2 INPUT { /* hide from Opera */
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+ 
diff --git a/template/yoga/thumbnails.tpl b/template/yoga/thumbnails.tpl
new file mode 100644
index 000000000..97ec3e3a3
--- /dev/null
+++ b/template/yoga/thumbnails.tpl
@@ -0,0 +1,33 @@
+<!-- $Id: $ -->
+<!-- BEGIN thumbnails -->
+<ul class="thumbnails">
+  <!-- BEGIN line -->
+  <!-- BEGIN thumbnail -->
+  <li class="{thumbnails.line.thumbnail.CLASS}">
+    <span class="wrap1">
+      <span class="wrap2">
+        <a href="{thumbnails.line.thumbnail.U_IMG_LINK}">
+            <img class="thumbnail" src="{thumbnails.line.thumbnail.IMAGE}"
+	    alt="{thumbnails.line.thumbnail.IMAGE_ALT}"
+	    title="{thumbnails.line.thumbnail.IMAGE_TITLE}">
+        </a>
+      </span>
+      <span class="thumbLegend">
+      <!-- BEGIN element_name -->
+      {thumbnails.line.thumbnail.element_name.NAME}
+      <!-- END element_name -->
+      <!-- BEGIN category_name -->
+      [{thumbnails.line.thumbnail.category_name.NAME}]
+      <!-- END category_name -->
+      {thumbnails.line.thumbnail.IMAGE_TS}
+      <!-- BEGIN nb_comments -->
+      <br />{thumbnails.line.thumbnail.nb_comments.NB_COMMENTS} {lang:comments}
+      <!-- END nb_comments -->
+      </span>
+    </span>
+  </li>
+  <!-- END thumbnail -->
+  <!-- END line -->
+
+</ul>
+<!-- END thumbnails -->