From 300eaed89232caa09695e2a947c4e92c1d2d229a Mon Sep 17 00:00:00 2001 From: chrisaga Date: Sat, 24 Jun 2006 08:56:59 +0000 Subject: 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 --- include/category_default.inc.php | 2 ++ template/yoga/content.css | 45 ------------------------------ template/yoga/fix-ie5-ie6.css | 28 ++----------------- template/yoga/index.tpl | 35 +----------------------- template/yoga/layout.css | 1 + template/yoga/thumbnails-fix-ie5-ie6.css | 27 ++++++++++++++++++ template/yoga/thumbnails.css | 47 ++++++++++++++++++++++++++++++++ template/yoga/thumbnails.tpl | 33 ++++++++++++++++++++++ 8 files changed, 113 insertions(+), 105 deletions(-) create mode 100644 template/yoga/thumbnails-fix-ie5-ie6.css create mode 100644 template/yoga/thumbnails.css create mode 100644 template/yoga/thumbnails.tpl diff --git a/include/category_default.inc.php b/include/category_default.inc.php index 6c909647a..652f31f50 100644 --- a/include/category_default.inc.php +++ b/include/category_default.inc.php @@ -60,6 +60,7 @@ SELECT * } // template thumbnail initialization +$template->set_filenames( array( 'thumbnails' => 'thumbnails.tpl',)); if (count($pictures) > 0) { $template->assign_block_vars('thumbnails', array()); @@ -165,6 +166,7 @@ SELECT COUNT(*) AS nb_comments $row_number = 0; } } +$template->assign_var_from_handle('THUMBNAILS', 'thumbnails'); pwg_debug('end include/category_default.inc.php'); ?> 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 @@ {MONTH_CALENDAR} - - - - - +{THUMBNAILS} {CATEGORIES} 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 @@ + + + + -- cgit v1.2.3