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
This commit is contained in:
chrisaga
parent
235cd53539
commit
300eaed892
8 changed files with 113 additions and 105 deletions
|
|
@ -60,6 +60,7 @@ SELECT *
|
||||||
}
|
}
|
||||||
|
|
||||||
// template thumbnail initialization
|
// template thumbnail initialization
|
||||||
|
$template->set_filenames( array( 'thumbnails' => 'thumbnails.tpl',));
|
||||||
if (count($pictures) > 0)
|
if (count($pictures) > 0)
|
||||||
{
|
{
|
||||||
$template->assign_block_vars('thumbnails', array());
|
$template->assign_block_vars('thumbnails', array());
|
||||||
|
|
@ -165,6 +166,7 @@ SELECT COUNT(*) AS nb_comments
|
||||||
$row_number = 0;
|
$row_number = 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
$template->assign_var_from_handle('THUMBNAILS', 'thumbnails');
|
||||||
|
|
||||||
pwg_debug('end include/category_default.inc.php');
|
pwg_debug('end include/category_default.inc.php');
|
||||||
?>
|
?>
|
||||||
|
|
|
||||||
|
|
@ -29,51 +29,6 @@ BODY#theNBMPage #content
|
||||||
text-align: center;
|
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 {
|
#content .navigationBar, #content .additional_info {
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,8 @@
|
||||||
/* $Id$ */
|
/* $Id$ */
|
||||||
/* Issues in IE from 5 to 6 only not to be used with IE7 */
|
/* 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 */
|
/* fix lack of :hover behaviour for non link objects */
|
||||||
BODY {
|
BODY {
|
||||||
behavior:url("template-common/csshover.htc");
|
behavior:url("template-common/csshover.htc");
|
||||||
|
|
@ -21,32 +23,6 @@ UL.tagSelection LI INPUT,
|
||||||
background-color: transparent;
|
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 */
|
/* fix category thumbnails on main page */
|
||||||
#content UL.thumbnailCategories {
|
#content UL.thumbnailCategories {
|
||||||
width: 99%; /* buggy IE box model */
|
width: 99%; /* buggy IE box model */
|
||||||
|
|
|
||||||
|
|
@ -76,40 +76,7 @@
|
||||||
<!-- END calendar -->
|
<!-- END calendar -->
|
||||||
|
|
||||||
{MONTH_CALENDAR}
|
{MONTH_CALENDAR}
|
||||||
|
{THUMBNAILS}
|
||||||
<!-- 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 -->
|
|
||||||
|
|
||||||
{CATEGORIES}
|
{CATEGORIES}
|
||||||
|
|
||||||
<!-- BEGIN cat_infos -->
|
<!-- BEGIN cat_infos -->
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@
|
||||||
/* template css */
|
/* template css */
|
||||||
@import "menubar.css";
|
@import "menubar.css";
|
||||||
@import "content.css";
|
@import "content.css";
|
||||||
|
@import "thumbnails.css";
|
||||||
@import "image.css";
|
@import "image.css";
|
||||||
@import "popuphelp.css";
|
@import "popuphelp.css";
|
||||||
@import "default-layout.css";
|
@import "default-layout.css";
|
||||||
|
|
|
||||||
27
template/yoga/thumbnails-fix-ie5-ie6.css
Normal file
27
template/yoga/thumbnails-fix-ie5-ie6.css
Normal file
|
|
@ -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 */
|
||||||
|
}
|
||||||
|
|
||||||
47
template/yoga/thumbnails.css
Normal file
47
template/yoga/thumbnails.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
33
template/yoga/thumbnails.tpl
Normal file
33
template/yoga/thumbnails.tpl
Normal file
|
|
@ -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 -->
|
||||||
Loading…
Add table
Add a link
Reference in a new issue